* {
  margin: 0;
  padding: 0;
  font-size: inherit;
  -webkit-user-select: none;
  user-select: none;
}

html {
  width: 100%;
  height: 100%;
  background-color: #ff0004;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  min-height: 100%;
  min-height: -webkit-fill-available;
  overflow: hidden;
  overscroll-behavior: none;
  position: fixed;
  width: 100%;
  touch-action: none;
  -webkit-touch-callout: none;
  /* background-image: linear-gradient(0deg, #8f0f13, #ff0004, #b91319, #ff0004, #8f0f13); */
  background-image: linear-gradient(0deg, #ff0004, #ff6d53,  #ff0004, #ff0004);

  background-repeat: repeat-y;
  background-size: 100% 100%;
  background-position: 0 0;
  /* Hidden until all photos are preloaded (JS adds .is-ready) */
  opacity: 0;
}

body.is-ready {
  opacity: 1;
}

#bg-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
}

#animated-bg,
#photos-bg-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.screen {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  padding-top: max(1rem, env(safe-area-inset-top));
  padding-right: max(1rem, env(safe-area-inset-right));
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  padding-left: max(1rem, env(safe-area-inset-left));
}

@media (min-width: 768px) {
  .screen {
    padding-top: max(2rem, env(safe-area-inset-top));
    padding-right: max(2rem, env(safe-area-inset-right));
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
    padding-left: max(2rem, env(safe-area-inset-left));
  }
}

@font-face {
  font-family: "GT America Compressed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/GT-America-Compressed-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "GT America Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/GT-America-Mono-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "GT America Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/GT-America-Mono-Regular-Italic.woff2") format("woff2");
}


#animated-bg {
  background: linear-gradient(1deg, #b91319, #ff0004 50%, #b91319) repeat-y;
  background-size: 100% 100dvh;
  background-position: 0 0;
}

.photo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.letter-shape {
  pointer-events: none;
}

.letter-hit {
  cursor: pointer;
  pointer-events: all;
  fill: transparent;
}