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

:root {
  --primary: rgb(253, 178, 89);
  --secondary: rgb(230, 172, 96);
  --highlight: rgb(248, 243, 199);
  --background: #fff;
  --text: #333;

  --correct-color: #77dd77;
  --wrong-color: #fd6861;
}

.model-3d-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  z-index: 1;
  justify-self: center;
  align-self: center;
  align-content: center;
  justify-content: center;
}

.image-3d {
  width: 75%;
  align-self: center;
  justify-self: center;
  height: 30vh;
}

p {
  text-align: center;
}

.no-event {
  pointer-events: none;
}

.correct-color {
  background-color: var(--correct-color);
  color: white;
}

.correct-color:after {
  content: "✅";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 0.2rem;
  margin-right: 0.2rem;
}

.wrong-color {
  background-color: var(--wrong-color);
  color: white;
}

.wrong-color:after {
  content: "❌";
  display: inline-block;
  width: 12px;
  height: 12px;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

body {
  padding: 0;
  margin: 0;
  color: var(--text);

  font-family: "Inter", sans-serif;
  font-family: "Roboto", sans-serif;
}

.visual-theme-change {
  align-self: flex-end;
  justify-self: start;
  margin-right: 10%;
  padding: 1rem;
  font-size: 3rem;
}

select {
  font-size: 1.5rem;
  border-radius: 0.25rem;
}

.main-container {
  display: flex;
  flex-direction: column;
  width: 99vw;
  justify-self: center;
  min-height: 100vh;
  align-items: center;
  gap: 1rem;
}

.seasons-answers-container {
  display: flex;
  width: 70vw;
  gap: 1rem;
  align-items: flex-end;
  align-content: stretch;
  justify-content: center;
}

.season {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  flex: 3;
  flex-grow: 0;
  border: 0.2rem solid var(--secondary);
  border-radius: 0.25rem;
  aspect-ratio: 1 / 1;
  min-width: 15rem;

  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently */
}

@media (max-width: 1280px) {
  .seasons-answers-container {
    width: 90vw;
  }
}

@media (max-width: 1100px) {
  .seasons-answers-container {
    width: 80vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .season {
    min-width: 10rem;
  }

  .spring {
    grid-row: 1;
    grid-column: 1;
  }

  .spring-season {
  }

  .summer {
    grid-row: 1;
    grid-column: 2;
  }

  .summer-season {
  }

  .autumn {
    grid-row: 2;
    grid-column: 1;
  }

  .autumn-season {
  }

  .winter {
    grid-row: 2;
    grid-column: 2;
  }

  .winter-season {
  }
}

@media (max-width: 500px) {
  .seasons-answers-container {
    width: 90vw;
  }

  .season {
    min-width: 10rem;
  }
}

.answers-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  height: fit-content;
}

.answer-box {
  flex: 1;
  flex-grow: 0;
  border: 0.2rem solid var(--primary);
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.25rem;
  min-height: 5rem;
  height: fit-content;

  overflow-x: hidden;
  overflow-y: scroll;
  flex-wrap: wrap;
}

@media (max-width: 1100px) {
  .answer-box {
    overflow-x: hidden;
    overflow-y: scroll;
    flex-wrap: wrap;
  }
}

.possible-answers {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border: 0.2rem solid var(--secondary);
  border-radius: 0.25rem;
  gap: 0.5rem;
  min-width: 50%;
  min-height: 2.5rem;
}

@media (max-width: 1100px) {
  .possible-answers {
    min-width: 90%;
    flex-wrap: wrap;
  }
}

.answer-option {
  padding: 0.2rem;
  border: 0.2rem solid var(--primary);
  border-radius: 0.2rem;
  cursor: pointer;
  min-width: max-content;
  padding-left: 0.5rem;
  padding-right: 0.5rem;

  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently */
}

.answer-option:not(.correct-color):hover.answer-option:not(.wrong-color):hover {
  background-color: var(--highlight);
}

.actions-container {
  display: flex;
  gap: 0.5rem;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently */
}

.action {
  cursor: pointer;
}

.action:hover {
  transform: scale(1.1);
}

.confirm-selection {
  padding: 0.2rem;
  border: 0.1rem solid gray;
  border-radius: 0.2rem;
}

.show-answers {
  padding: 0.2rem;
  border: 0.1rem solid gray;
  border-radius: 0.2rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity 2s;
}

.refresh-answers {
  padding: 0.2rem;
  border: 0.1rem solid gray;
  border-radius: 0.2rem;
}

.sticky {
  position: fixed;
  pointer-events: none;
  z-index: 10;
}