*,
*::before,
*::after {
  box-sizing: border-box;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;

  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/***/

:root {
  --margin: 1rem;
}
@media (min-width: 800px) {
  :root {
    --margin: 3rem;
  }
}

html,
body {
  margin: 0;
  padding: 0;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
}

body {
  font-family: "IM Fell Double Pica PRO", serif;
  /* color: #fff; */
  color: #ffece5;
}

a {
  color: inherit;
}

.bgVideo-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.bgVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
  /* https://slicejack.com/fullscreen-html5-video-background-css/ */
  @media (min-aspect-ratio: 16/9) {
    .bgVideo {
      width: 100%;
      height: auto;
    }
  }
  @media (max-aspect-ratio: 16/9) {
    .bgVideo {
      width: auto;
      height: 100%;
    }
  }

.vignette {
  position: absolute;
  inset: 0;
  background: #000000;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.25) 40%,
    rgba(0, 0, 0, 0) 75%,
    rgba(0, 0, 0, 0.25) 95%,
    rgba(0, 0, 0, 0.25) 100%
  );
}

.overlay {
  position: fixed;
  left: var(--margin);
  width: 300px;
  display: grid;
  padding-block-start: var(--margin);
  grid-template-rows: auto 1fr;
  text-shadow: 1px 1px 5px rgba(0,0,0,.15);
}

p:first-child {
  margin-block-start: 0;
}

p:last-child {
  margin-block-end: 0;
}

.toggle {
  padding: .5em 1em;
  background: none;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 15px;
  margin-right: 1em;
  font: inherit;
  font-size: .8em;
  cursor: pointer;
}

.toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.texts {
  margin-block-start: 2em;
  display: grid;
  grid-template-rows: auto 1fr auto;
  opacity: 0.8;
}

.text {
  transition: .5s opacity ease-in-out;
}

/* .hidden {
  opacity: 0;
} */

.instruction {
  font-style: italic;
}

.stream {
  position: fixed;
  width: 100%;
  height: 40vh;
  top: 60%;
}

.thought {
  --x: 0px;
  --y: 0px;
  position: fixed;
  width: 100px;
  margin-block: 0;
  left: var(--margin);
  transform: translate(var(--x), var(--y));
  transition: 0.1s transform;
}

.hide-text .text {
  opacity: 0;
}

.credits {
  position: absolute;
  bottom: var(--margin);
  right: var(--margin);
  text-align: right;
  font-size: 0.8em;
  color: #ffece5;
}

#label {
  position: fixed;
  top: 54%;
  left: var(--margin);
  font-style: italic;
  transition: 0.25s opacity ease-in-out;
  /* color: #ffece5; */
  color: #D08939;
  cursor: pointer;
  opacity: 0.75;
}

#label .icon {
  display: inline-block;
  font-size: 1.5rem;
}

#label:hover {
  opacity: 1;
}

#label:has(+ textarea:focus-visible) {
  opacity: 1;
}
#label:has(+ textarea:focus-visible) .icon {
  animation: 5s sway infinite alternate ease-in-out;
}
#label:has(+ textarea:focus-visible) .hint {
  animation: 3s hint forwards;
}

@keyframes sway {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-10deg);
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(10deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes hint {
  0%,
  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}