* {
  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: Consolas, " IndieFlower-Regular";
  color: rgba(255, 255, 255, 0.75);
  white-space: pre-wrap;
}
small {
  font-size: 0.777rem;
}

strong {
  color: rgb(153, 74, 184);
}

ul {
  margin: 0 1.44em;
}


body {
  min-height: 110vh;
  font-family: "IndieFlower-Regular";
  color: rgba(240, 240, 240, 1);
  background-color: rgba(32, 32, 32, 1);
}

h1,
h2,
h3,
h4 {
  font-family: "IndieFlower-Regular",;
  color: rgba(224, 224, 224, 1);
}


a:link,
a:visited {
  color: rgba(151, 193, 234, 0.85);

}

a:hover,
a:focus {
  color: rgb(149, 108, 196);
  text-decoration: none;

}
a:active {
  color: rgba(151, 193, 234, 0.85);
}



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

@font-face {
    font-family: IndieFlower-Regular;
    src: url(../fonts/IndieFlower-Regular.ttf) 
}