/* 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.44rem;
}
pre,
code {
  font-size: 1.2rem;
  font-family: Consolas, "Andale Mono", "Lucida Console", "DejaVu Sans Mono",
    "Courier New", monospace;
  color: rgba(255, 255, 255, 0.75);
  white-space: pre-wrap;
}
small {
  font-size: 0.777rem;
}

strong {
  color: rgba(255, 162, 87, 1);
}

ul {
  margin: 0 1.44em;
}

/* end of reset */

/* basic styling */
body {
  min-height: 110vh;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: rgba(240, 240, 240, 1);
  background-color: rgba(32, 32, 32, 1);
}

h1,
h2,
h3,
h4 {
  font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text",
    "Times New Roman", serif;
  color: rgba(224, 224, 224, 1);
}

/* anchor tag pseudo elements */
a:link,
a:visited {
  color: rgba(151, 193, 234, 0.85);
  /*transition: color 0.5s;*/
}

a:hover,
a:focus {
  color: rgba(236, 121, 66, 1);
  text-decoration: none;
  /*background-color: rgba(240, 240, 240, 0.15);*/
}
a:active {
  color: rgba(151, 193, 234, 0.85);
}

/* 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(16, 16, 16, 1);
}

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;
}
