#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100svw;
  background-color: var(--osuRed);
  z-index: 100;
  height: 5svh;
  transition: height 0.4s;
}

#header > #header-logo {
  position: relative;
  left: 2svw;
  top: -10svh;
  height: 3svh;
  transition: top 0.4s;
}

#header > #menu-icon {
  position: absolute;
  right: 2svw;
  height: 5svh;
  width: min(27px, 3.5svh);
  top: -10svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: top 0.4s;
}

#menu-icon {
  position: relative;
  cursor: pointer;
  display: block;
}

#menu-icon span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: white;
  position: absolute;
  right: 0;
  transition: transform 0.4s, opacity 0.4s;
}

#bar1 {
  top: 5px;
}

#bar2 {
  top: 13px;
}

#bar3 {
  top: 21px;
}

#show-menu {
  display: none;
}

#show-menu:checked ~ #menu-icon #bar1 {
  transform: rotate(-45deg) translate(-5.5px, 5.5px);
}

#show-menu:checked ~ #menu-icon #bar2 {
  opacity: 0;
}

#show-menu:checked ~ #menu-icon #bar3 {
  transform: rotate(45deg) translate(-5.5px, -5.5px);
}

#menu {
  position: fixed;
  right: -75svw;
  top: 5svh;
  width: 75svw;
  height: 100svh;
  background-color: #fff;
  transition: right 0.4s;
  border-left: var(--osuRed) 14px solid;
}

#menu-container {
  display: flex;
  padding-top: 5svh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4svh;
}

#menu-container img {
  width: 60%;
}

#menu-container a {
  font-size: 4svw;
  text-align: center;
  text-decoration: none;
  color: var(--osuRed);
}

#show-menu:checked ~ #menu {
  right: 0vw;
}

#menu-share-button {
  background-color: transparent;
  border: none;
  font-family: "BuckeyeSerif2";
  color: var(--osuRed);
  font-size: 4svw;
}

@media screen and (min-aspect-ratio: 4/5) {
  #menu {
    top: 5svh;
  }

  #menu-container img {
    width: unset;
    height: 20svh;
  }
  #menu-container a {
    font-size: 3svh;
  }
  #header {
    height: 10svh;
  }
  #header > img {
    height: 8svh;
  }
}