html {
  font-size: min(4vw, 16px);
}

html::before {
  all: unset;
}
.slideshow {
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  height: calc(100% - var(--navbar-height));
  width: 100%;
  background: black;
  z-index: -1;
}
.slideshow img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
}
.slideshow img.inactive {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.2) rotate(40deg);
}
.slideshow .arrow {
  position: absolute;
  top: 50%;
  font-size: 2.5rem;
  cursor: pointer;
  transform: translateY(-50%);
  color: #aaa;
  transition: color 0.15s, font-size 0.15s;
  left: max(10px, 5vw);
  text-shadow: 0px 0px 5px black, 0px 0px 2px black, 0px 0px 3px black;
}
.slideshow .arrow:hover {
  color: skyblue;
  font-size: 3rem;
}
.slideshow .arrowNext {
  left: unset;
  right: max(10px, 5vw);
}
.slideshow img.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  transition: opacity 0.5s, transform 0.5s;
}
.slideshow img.active.enlarge {
  transition: var(--dur) linear;
  transform: translate(-50%, -50%) scale(1.1) rotate(0deg);
}
.slideshow img.inactive2 {
  animation: none;
  transform: translate(-50%, 100vh) scale(1.05) rotate(0deg);
  opacity: 0;
  transition: opacity 0.5s, transform 0.5s;
}
.animatedText {
  text-shadow: 0px 0px 2px black, 0px 0px 3px black, 0px 0px 4px black,
    0px 0px 7px black, 0px 0px 6px black;
}
.slideshowTitle {
  position: fixed;
  top: 50%;
  right: calc(max(10px, 5vw) + 1.5rem);
  text-align: right;
  font-size: 2rem;
  line-height: 2rem;
  transform: translateY(-50%);
  color: white;
  height: 4rem;
  overflow: hidden;
  text-align: right;
  padding: 0px 15px;
}
.overlay {
  position: fixed;
  top: 20px;
  left: 0;
  height: 100%;
  width: 100%;
  transform: translateY(-80px);
}
.slideshowTitle .animatedText {
  position: absolute;
  transform: translateX(calc(200% + 10px));
}
.slideshowTitle .animatedText.active {
  transform: translateX(0%);
  transition: 0.5s;
}
.slideshowTitle .animatedText.inactive {
  transform: translateY(calc(-200% - 10px));
  transition: 0.5s;
}
.slideshowSubtitle {
  position: fixed;
  top: calc(50% + 1rem + 0.6rem);
  right: calc(max(10px, 5vw) + 1.5rem);
  font-size: 1.4rem;
  line-height: 1.5rem;
  transform: translateY(-50%);
  color: white;
  height: 1.8rem;
  overflow: hidden;
  padding: 0px 10px;
}
.slideshowSubtitle .animatedText {
  position: absolute;
  width: max-content;
  transform: translateX(calc(-200% - 10px));
  text-shadow: 0px 0px 2px black, 0px 0px 3px black, 0px 0px 4px black;
}
.slideshowSubtitle .animatedText.active {
  transform: translateX(0%);
  transition: 0.5s;
}
.slideshowSubtitle .animatedText.inactive {
  transform: translateY(100%);
  transition: 0.5s;
}
@media (width > 800px) {
  .slideshowSubtitle,
  .slideshowTitle {
    right: 15vw;
  }
}
.progress {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  column-gap: 20px;
}
.prog {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  opacity: 0.5;
  transform: scale(0.5);
  transition: 0.5s;
  box-shadow: 0px 0px 10px 5px black;
}
.prog.active {
  opacity: 1;
  transform: scale(1);
}
body {
  margin-top: 100vh;
  padding-top: 10px;
}
.thing h1 {
  font-size: min(calc(min(3vw, 18px) * 2.5), 40px);
}
.thing h1.heading span {
  display: inline-block;
  text-decoration: underline rgb(10, 105, 74);
  color: rgb(10, 105, 74);
}

.img {
  height: calc(100vh - var(--navbar-height));
  width: 100%;
  position: relative;
}
.img .image {
  height: 100%;
  width: 100%;
}
.img img {
  height: 100%;
  min-width: 100%;
  width: unset;
}
.img .texts {
  position: absolute;
  right: 10px;
  max-width: min(520px, 90vw);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  top: 50%;
  transform: translateY(-50%);
}
.img .texts .page {
  cursor: pointer;
}
.img .texts h1 {
  font-size: min(calc(min(14px, 2.8vw) * 3), 45px);
  height: min(calc(min(14px, 2.8vw) * 3), 45px);
  text-shadow: 0px 0px 2px white, 0px 0px 3px white, 0px 0px 4px white,
    0px 0px 7px white, 0px 0px 6px white;
}
.img .texts h2 {
  font-size: min(calc(min(14px, 2.8vw) * 1.5), 22px);
  height: min(calc(min(14px, 2.8vw) * 1.5), 22px);
  max-height: min(calc(min(14px, 2.8vw) * 3), 44px);
  text-shadow: 0px 0px 2px white, 0px 0px 3px white, 0px 0px 4px white;
}
.img .texts h3 {
  font-size: min(calc(min(14px, 2.8vw) * 1.35), 21px);
  text-shadow: 0px 0px 2px white, 0px 0px 3px white, 0px 0px 4px white;
  display: flex;
  flex-wrap: wrap;
  width: min(500px, 80vw);
  /* justify-content: space-evenly; */
}
.img .texts h3 .page {
  /* width: 20%; */
  flex-grow: 1;
  text-align: center;
}
.img .texts h3 .page span {
  width: max-content;
}

.identity {
  display: grid;
  max-height: min(calc(min(18px, 2.8vw) * 6.5), 90px);
  width: 100%;
  grid-template-columns: min(calc(min(18px, 2.8vw) * 5), 68px) 1fr;
  column-gap: 10px;
}
.identity img {
  grid-row: 1/5;
  max-height: min(calc(min(18px, 2.8vw) * 5), 68px);
  aspect-ratio: 1/1;
  border-radius: 50%;
}
.things {
  width: 100%;
  display: grid;
  --spacing: 0.6rem;
  padding: 1rem;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(max(200px, 30vw), calc(50% - var(--spacing) * 2)), 1fr)
  );
  gap: var(--spacing);

  font-size: .9rem;
}
.thingText {
  padding: 7px;
}
.thing {
  background: #d99900;
}
.thing b {
  display: block;
  font-size: 1.1rem;
}
.thing img {
  aspect-ratio: 1/1;
}
.thing .goTo {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
}
.thing .goTo span {
  text-decoration: underline;
}
.thing .goTo i {
  transition: 0.5s;
  margin-left: 2px;
}
.thing .goTo:hover {
  cursor: pointer;
}
.thing .goTo:hover i {
  margin-left: 10px;
}

.things {
  max-width: 100%;
}
@media (width > 850px) {
  .thing h1 {
    font-size: min(calc(min(3vw, 18px) * 2), 35px);
  }
}