:root {
  --background-colour: #EEE;
  --font-colour: #444;
}

* {
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
  box-sizing: border-box;
  color: var(--font-colour);
  font-family: sans-serif;
}

#header {
  position: fixed;
  height: 7vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 127;
  background-color: var(--background-colour);
  transition: height 0.3s ease;
}
#header .logo {
  align-self: flex-start;
  position: absolute;
  left: 0;
  margin: calc((7vh - 64px) / 2);
}
#header #hamburger, #header .navbar .navbaritem a {
  --background-colour: #FFF;
  --hover-colour: #E8E8E8;
  --border-colour: #DDD;
  background-color: var(--background-colour);
  border: 2px solid var(--border-colour);
  border-radius: 10px;
  height: 4.5vh;
  margin: 1.25vh;
}
#header #hamburger:hover, #header .navbar .navbaritem a:hover {
  background-color: var(--hover-colour);
}
#header .navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
}
#header .navbar .navbaritem {
  margin: 1em 1.5em;
  font-size: 1.25rem;
}
#header .navbar .navbaritem a {
  padding: 0.5em;
  text-decoration: none;
}
#header #hamburger {
  display: none;
  aspect-ratio: 1;
  font-size: 3vh;
  cursor: pointer;
  align-self: flex-start;
  position: absolute;
  right: 0;
}
@media screen and (max-width: 100vh) {
  #header .navbar {
    flex-direction: column;
    display: none;
  }
  #header .show {
    display: flex;
  }
  #header #hamburger {
    display: initial;
  }
}

.scroller {
  max-height: 93vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  position: fixed;
  top: 7vh;
}
.scroller .page {
  height: 93vh;
  width: 100vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}
.scroller .page .box, .scroller .page .textbox {
  max-height: 85%;
  max-width: 42.5%;
  width: 100%;
  margin: 7.5% 3.75%;
}
.scroller .page .textbox {
  border-radius: 15px;
  font-size: 1.25rem;
  line-height: 1.8;
  padding: 2em;
  background-color: var(--background-colour);
}
.scroller .page .textbox .icon-footer {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  max-width: 90%;
  margin-top: 5%;
}
.scroller .page .textbox .icon-footer .social-icon {
  width: 6.25vh;
  margin-left: 2.5%;
  margin-right: 2.5%;
}
.scroller .page .box {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scroller .page .box img {
  max-height: 100%;
  max-width: 100%;
  border-radius: 15px;
}
@media screen and (max-width: 100vh) {
  .scroller .page {
    flex-direction: column;
  }
  .scroller .page .textbox, .scroller .page .box {
    max-height: 100%;
    max-width: 85%;
    margin: 3.75% 7.5%;
  }
  .scroller .page .box {
    max-height: 42.5%;
    height: unset;
  }
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --background-colour: #333;
    --font-colour: #DDD;
  }
  #header .navbar .navbaritem a, #header #hamburger {
    --background-colour: #222;
    --hover-colour: #383838;
    --border-colour: #444;
  }
  .social-icon img {
    filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(7495%) hue-rotate(214deg) brightness(116%) contrast(73%);
  }
}

/*# sourceMappingURL=main.css.map */