@import url("https://fonts.googleapis.com/css2?family=Itim&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Itim", cursive;
  user-select: none;
  color: black;
}

html,
body,
main {
  height: 100%;
}

body {
  background-image: linear-gradient(
      22.5deg,
      rgba(66, 66, 66, 0.02) 0%,
      rgba(66, 66, 66, 0.02) 11%,
      rgba(135, 135, 135, 0.02) 11%,
      rgba(135, 135, 135, 0.02) 24%,
      rgba(29, 29, 29, 0.02) 24%,
      rgba(29, 29, 29, 0.02) 38%,
      rgba(15, 15, 15, 0.02) 38%,
      rgba(15, 15, 15, 0.02) 50%,
      rgba(180, 180, 180, 0.02) 50%,
      rgba(180, 180, 180, 0.02) 77%,
      rgba(205, 205, 205, 0.02) 77%,
      rgba(205, 205, 205, 0.02) 100%
    ),
    linear-gradient(
      67.5deg,
      rgba(10, 10, 10, 0.02) 0%,
      rgba(10, 10, 10, 0.02) 22%,
      rgba(52, 52, 52, 0.02) 22%,
      rgba(52, 52, 52, 0.02) 29%,
      rgba(203, 203, 203, 0.02) 29%,
      rgba(203, 203, 203, 0.02) 30%,
      rgba(69, 69, 69, 0.02) 30%,
      rgba(69, 69, 69, 0.02) 75%,
      rgba(231, 231, 231, 0.02) 75%,
      rgba(231, 231, 231, 0.02) 95%,
      rgba(138, 138, 138, 0.02) 95%,
      rgba(138, 138, 138, 0.02) 100%
    ),
    linear-gradient(
      112.5deg,
      rgba(221, 221, 221, 0.02) 0%,
      rgba(221, 221, 221, 0.02) 17%,
      rgba(190, 190, 190, 0.02) 17%,
      rgba(190, 190, 190, 0.02) 39%,
      rgba(186, 186, 186, 0.02) 39%,
      rgba(186, 186, 186, 0.02) 66%,
      rgba(191, 191, 191, 0.02) 66%,
      rgba(191, 191, 191, 0.02) 68%,
      rgba(16, 16, 16, 0.02) 68%,
      rgba(16, 16, 16, 0.02) 70%,
      rgba(94, 94, 94, 0.02) 70%,
      rgba(94, 94, 94, 0.02) 100%
    ),
    linear-gradient(90deg, #ffffff, #ffffff);
  overflow: hidden;
}

body.customCursor,
body.customCursor * {
  cursor: none;
}

@media (max-aspect-ratio: 12/10) {
  #pointer {
    display: none;
  }
  body.customCursor,
  body.customCursor * {
    cursor: initial;
  }
}

#pointer {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2;
}

#pointer > img {
  transition: opacity 0.4s;
  transition-delay: 0.1s;
}

#pointer > img.hidden {
  opacity: 0;
}

main {
  display: flex;
  flex-direction: column;
}

#image {
  height: 40vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#puzzle {
  height: 25vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.puzzleImage {
  max-height: 80%;
}

#puzzleWord {
  text-transform: uppercase;
  font-size: 8vh;
  white-space: nowrap;
}

#puzzleWord [data-letter] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8vh;
}

@media (max-aspect-ratio: 12/10) {
  #puzzleWord {
    font-size: 8vw;
  }
  #puzzleWord [data-letter] {
    width: 6vw;
  }
}

#letters {
  height: 35vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (max-aspect-ratio: 12/10) {
  #letters {
    height: 65vh;
  }
}

#letters button {
  width: 7vh;
  height: 7vh;
  margin: 1vh;
  text-transform: uppercase;
  font-size: 4vh;
  transition: transform 0.25s, border-color 0.25s, opacity 0.25s;
  border-radius: 1vh;
  border: 1px solid darkgray;
  background-color: lightgray;
}

@media (max-aspect-ratio: 12/10) {
  #letters {
    width: 100%;
    margin: 0 auto;
    max-width: 65vh;
  }
  #letters > div {
    width: 100%;
    text-align: center;
  }
  #letters button {
    width: calc(16.67% - 2.5vh);
    height: 8vh;
  }
}

#letters button.disabled {
  opacity: 0.25;
  border-color: lightgray;
}

#letters button:not(.disabled):hover {
  transform: scale(1.25);
}

#language-selector {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 1;
}

#language-selector ul {
  display: flex;
  list-style-type: none;
  gap: 12px;
}

#language-selector img {
  height: 32px;
}