@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  src: url(../../../static/ArchivoBlackLatin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url(../../../static/PoppinsLatin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url(../../../static/PoppinsLatinBold.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body {
  font-family: Poppins, sans-serif;
  margin: 0;
  padding: 0;
  background: #fff;
  color: #000;
}

body {
  padding: 2em 5% 2em;
  margin: 0 auto;
  max-width: 80em;
}

h1 {
  font-family: 'Archivo Black', sans-serif;
}

a {
  color: #2069cf;
}

a:visited {
  color: #1e0038;
}

@media (hover: hover) {
  a:hover {
    color: #7401cf;
    transition: color 0.25s ease-in-out;
  }
}

body > h1 {
  text-align: center;
  margin-top: 0;
}

body > h1 img {
  height: 15rem;
  max-height: 25vh;
}

body > h1:first-of-type {
  position: relative;
  margin: 0 auto;
  width: max-content;
  overflow: hidden;
  padding-top: 0.3rem;
}

body > nav {
  position: fixed;
  top: 0em;
  left: 0em;
}

body > nav summary {
  display: block;
  list-style-type: none;
  padding: 1em;
  cursor: pointer;
}

body > nav summary::before, body > nav summary::marker, body > nav summary::-webkit-details-marker {
  display: none;
}

body > nav details {
  background: #fff;
}

body > nav details[open] {
  background-color: #84c7f7;
  padding-bottom: 0.5em;
}

body > nav details[open] summary {
  padding-bottom: 0;
}

body > nav ul, body > nav li {
  padding: 0;
  list-style-type: none;
}

body > nav a, body > nav a:visited {
  display: block;
  text-decoration: none;
  padding: 0.5em 1em 0.5em;
  color: black;
}

@media (hover: hover) {
  body > nav li a:hover {
    background-color: #2069cf;
    color: black;
  }
}

*[id] {
  scroll-margin-top: 5em;
}