:root {
   --darkest:#090C02;
   --darker:#191919;
   --medium:#333333;
   --medlight:#555555;
   --light:#F9F9F9;
}

@font-face {
   font-family: 'Righteous-Regular';
   src: url('Righteous-Regular.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   url('Righteous-Regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

@font-face {
   font-family: 'Roboto-Regular';
   src: url('Roboto-Regular.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   url('Roboto-Regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

* {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
}

html {
   background-color: var(--light);
   font-family: 'Roboto-Regular';
}

.header {
   display: flex;
   background-color: var(--light);
   color: var(--darkest);
   padding-left: 2em;
   padding-right: 2em;
   padding-top: 1em;
   padding-bottom: 1em;
   box-shadow: 0px 2px 8px -1px var(--darker);
   word-wrap: break-word;
   justify-content: space-between;
   width: 100vw;
   box-sizing: border-box;
}

.header h1 {
   max-width: 25%;
   text-align: left;
   font-size: 2.25vw;
}

h1, h2 {
   font-style: normal;
   font-weight: normal;
   font-family: 'Righteous-Regular';
}

h1 {
   font-size: max(3vh, 2.75vw);
}

h2 {
   font-size: 150%;
}


body {
   text-align: center;
}

.navbar {
   margin-right: 2.5em;
   margin-top: 2.25em;
   font-family: 'Righteous-Regular';
}

.navbar a {
   list-style-type: none;
   margin: 0;
   padding: 0;
   min-width: 10vw;
}

.circle {
   border-radius: 50%;
   width: 15vw;
   height: 15vw;
}

.center {
   align-self: center;
}

hr {
   display: block;
   height: 1px;
   border: 0;
   border-top: 1px solid #ccc;
   margin: 1em 0;
   padding: 0;
}

a {
   text-decoration: none;
}

.navbar a {
   margin: 0.5em;
   font-size: 1.5vw;
   text-decoration: none;
   color: var(--darkest);
}

.navbar ul > li > a {
   color: var(--darkest);
}

ul {
   padding-left: 2em;
}

.footer {
   padding: 5em;
   height: 2.5em;
   background: var(--darker);
   color: var(--light);
   display: flex;
   flex-wrap: wrap-reverse;
   justify-content: space-between;
}

.outer-centered {
   text-align: center;
}

.inner-centered {
   display: inline-block;
}

.navbar .fa-bars {
   display: none;
   align-self: right;
   width: 100%;
}

.spacer {
   height: 3vh;
}

img {
   object-fit: cover;
}

@media screen and (max-width: 1080px) {
   .spacer {
      height: 16vh;
   }

   .header h1 {
      max-width: 100%;
      width: 100%;
      font-size: 4vw;
   }

   .header {
      position: fixed;
      flex-direction: row;
   }

   .navbar {
      width: 100%;
      display: flex;
      flex-direction: column;
      text-align: right;
      align-items: right;
      margin-right: 0;
      margin-top: 0.15em;
   }

   .navbar .fa-bars {
      font-size: 1.5em;
      display: inline-block;
      margin-top: 0em;
   }

   .navbar a {
      font-family: 'Righteous-Regular';
      color: var(--darkest);
      padding-top: 0.5em;
      padding-bottom: 0.5em;
      display: none;
      font-size: 1.75em;
   }

   .navbar .shown-link {
      display: inline-block;
   }
}