/* simple reset*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 1.44rem;
  line-height: 1.44;
  height: 100%;
}
h1 {
  font-size: 4.209rem;
}
h2 {
  font-size: 3.157rem;
}
h3 {
  font-size: 1.777rem;
}
h4 {
  font-size: 1.777rem;
}
pre,
code {
  font-size: 1.2rem;
  font-family:fantasy;
  color:rgb(17, 151, 196);
  white-space: pre-wrap;
}
small {
  font-size: 0.777rem;
}

strong {
  color: rgb(45, 43, 72);
}

ul {
  margin: 0 1.44em;
}

/* end of reset */

/* basic styling */
body {
  min-height: 110vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color:rgb(0, 29, 35);
  background-color:rgb(107, 147, 175);
}

h1,
h2,
h3,
h4 {
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  color:rgb(59, 65, 84);
}

/* anchor tag pseudo elements */
a:link,
a:visited {
  color:rgb(81, 105, 138);
  /*transition: color 0.5s;*/
}

a:hover,
a:focus {
  color:rgb(25, 31, 36);
  text-decoration: none;
  /*background-color: rgba(240, 240, 240, 0.15);*/
}
a:active {
  color:rgb(119, 224, 224);
}

/* end of basic styling */

header {
  position: fixed;
  top: 0;
  right: 0;
  padding: 0.5em;
  width: 100%;
  height: 75px;
  display: grid;
  grid-template-columns: 1fr auto;
  background-color:rgba(0, 10, 10, 0.731);
}

header h1 {
  font-size: 1.44em;
  display: inline-block;
}
header nav a {
  padding: 0.5em;
  line-height: 1.44rem;
}

main {
  padding: 0.5em;
  margin-top: 125px;
}