* {
  box-sizing: border-box;
  margin: 0;
  font-family: CustomFont;
  scrollbar-width: none;
  color: white;
}

/* content */

.wrapper_child > div {
  border: 2mm solid black;
  border-radius: 3mm;
  background-color: #ffffff2a;
  backdrop-filter: blur(1mm);
  margin: 2mm;
  padding: 2mm;
}

/* text sizing */

h1 {
  font-size: 6vw;
}
h2 {
  font-size: 9.5vw;
  text-align: center;
}
h3 {
  font-size: 20mm;
}
h4 {
  font-size: 15mm;
}
p,
a,
button {
  font-size: 10mm;
}
a,
button {
  text-decoration: none;
  font-weight: bold;
  font-style: italic;
  padding: 0;
  background-color: transparent;
  border: 0;
}
a:hover,
button:hover {
  text-decoration: underline;
}

/*Selection*/

*::selection {
  background-color: #ff5c00;
}

/* font */

@font-face {
  font-family: "CustomFont";
  src: url("/Asset/Font/SegoeUIBlack-Regular.otf");
}

/* background */

body > img {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  z-index: -128;
}

/* header */

header {
  width: 100%;
  height: 9vw;
  position: relative;
}
h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  text-wrap: balance;
  text-align: center;
  width: 100%;
}

/* wrapper */

#wrapper {
  width: 100vw;
  display: flex;
}

/* nav / aside */

nav,
aside {
  width: 18%;
}

/* nav */

.separation {
  height: 0;
  border: 1mm solid rgb(0, 0, 0);
  border-radius: 1mm;
  margin: 1mm;
  font-size: 0;
}

/* aside */

aside a {
  margin: auto;
  display: block;
}
aside a > div {
  display: inline-block;
}
aside p {
  font-size: 5.5mm;
}

/* main */

main {
  width: 64%;
  display: inline-block;
}

/* footer */

footer {
  border-top: 1mm solid #976b6e;
  background-color: #ffffff2a;
  backdrop-filter: blur(1mm);
  bottom: 0;
  left: 0;
  right: 0;
}
footer img {
  position: fixed;
  bottom: 95%;
  width: 18%;
  left: 0%;
}
footer p {
  display: inline;
  margin: 1mm;
}

/* adofai */

#adofai > div {
  display: flex;
}
#adofai img {
  width: 40%;
  align-self: start;
}
#adofai > div > div {
  width: 60%;
}

/* 404 */

#not_found img {
  max-width: 100%;
  width: 150mm;
}

/* svg icon */

svg {
  height: 10mm;
}

/* make remi not overlap */
#footer_separator {
  height: 25vw;
  display: none;
}

@media (max-width: 380mm) {
  /* nav */

  #wrapper {
    flex-direction: column;
  }
  .wrapper_child {
    width: 100vw;
  }
  .separation {
    border-width: 0;
    font-size: 10mm;
    display: inline-block;
    color: black;
  }
  nav > div > div {
    margin: auto;
    width: fit-content;
  }
  h1 {
    font-size: 10vw;
  }
  header {
    height: 22vw;
  }

  /* aside */

  aside a {
    display: inline-block;
  }
  aside p {
    font-size: 5vw;
  }
  aside svg {
    height: 5vw;
  }
  aside > div {
    display: flex;
  }

  /* footer */
  footer img {
    bottom: 97%;
    width: 50%;
  }
  #footer_separator {
    display: block;
  }

  /* adofai */

  #adofai > div {
    flex-direction: column;
  }
  #adofai img {
    width: 100%;
  }
  #adofai > div > div {
    width: 100%;
  }
  #adofai h3 {
    font-size: 7vw;
  }

  @media (max-width: 285mm) {
    nav button,
    .separation {
      font-size: 3.4vw;
    }

    #adofai h3 {
      font-size: 10vw;
    }
    @media (max-width: 220mm) {
      nav button,
      .separation {
        font-size: 3.2vw;
      }
      #nav_div {
        padding: 1mm;
      }
      /* footer */
      footer p {
        display: flex;
        flex-direction: column;
      }
      footer t {
        display: none;
      }
      footer a {
        font-size: 8.5vw;
      }
      @media (max-width: 170mm) {
        nav button,
        .separation {
          font-size: 2.5vw;
        }
      }
    }
  }
}