/* test */
body #root main .test *:nth-child(n) {
  background-color: rgba(0, 0, 200, 0.2);
}
body #root main .test *:nth-child(2n-1) {
  background-color: rgba(200, 200, 0, 0.2);
}
body #root main .test *:nth-child(3n-2) {
  background-color: rgba(200, 0, 0, 0.2);
}
body #root main .test *:nth-child(4n-3) {
  background-color: rgba(0, 200, 0, 0.2);
}
body #root main .test *:nth-child(5n-4) {
  background-color: rgba(0, 200, 200, 0.2);
}
body #root main .test *:nth-child(6n-5) {
  background-color: rgba(200, 0, 200, 0.2);
}
* {
  /* background-color: white; */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.done * {
  background-color: transparent !important;
}
/* .test {
  display: flex;
  justify-content: center;
  align-items: center;
}
.test-10vh {
  height: 10vh;
}
.test-30vh {
  height: 30vh;
}
.test-50vh {
  height: 50vh;
}
.test-100vh {
  height: 100vh;
} */
#menuToggle {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1000;
}

/* real */

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
.ratio_1_1 {
  aspect-ratio: 1/1;
}
.fixed_background {
  min-width: 100vw;
  min-height: 50vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* media */

@media (orientation: portrait) {
  #root > header {
    position: relative;
  }
  #carousel img {
    height: 100%;
  }
  #counters {
    grid-template-columns: repeat(2, 1fr);
  }
  #root main section.contents_block {
    grid-template-columns: repeat(2, 1fr);
  }
  #root main section.contents_block header {
    grid-column: 1 / span 2;
  }
}
@media (max-width: 40rem) and (orientation: portrait) {
  #counters {
    grid-template-columns: auto;
  }
  #counters .item {
    font-size: 1rem;
    min-height: fit-content;
  }
  #counters .count_animation {
    font-size: 2rem;
  }
  #root main .over_contents {
    padding-left: 1rem;
  }
}
@media (min-width: 140rem) {
  .background_layer img {
    width: 100%;
  }
}