@font-face {
  font-family: "Horseshoes and Lemonade";
  src: local("Horseshoes and Lemonade"),
    url("assets/fonts/horseshoeslemonade.otf") format("opentype")
      tech(color-COLRv1);
}
@font-face {
  font-family: "Children Sans";
  src: local("Children Sans"),
    url("assets/fonts/Children Sans.ttf") format("truetype")
      tech(color-COLRv1);
}

html,
body,
body > div {
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
}

html {
  background-color: #000;
}

.hidden {
  display: none;
}

body > div > img,
body .quiz-page-question > svg {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1;
  pointer-events: none;
}

#tv-background {
  z-index: 10;
}

.questions-bg-path {
  fill: #000000;
}

#guigui-bottom-left,
#guigui-bottom-right {
  position: absolute;
  bottom: -22vh;
  height: 30vh;
}

#guigui-bottom-left {
  left: 10vw;
}

#guigui-bottom-right {
  right: 10vw;
}

.quiz-page, .quiz-page-question, .quiz-page-questions-links {
  height: 100vh;
  width: 100vw;
}

.quiz-page > * {
  padding: 10vh 7vw;
  height: calc(100vh - 20vh);
}

.quiz-page:not(:target), .quiz-page-question:not(:target), .quiz-page-questions-links:not(:target) {
  display: none;
}
.quiz-page:target ~ #page-startup, .quiz-page-question:target ~ #page-startup {
  display: none;
}
.quiz-page#page-index {
  display: block;
}

.quiz-page-questions-links,
.quiz-page-question {
    padding: 17vh 8vw;
    box-sizing: border-box;
}

.quiz-page-question {
    background-color: #FFFFFF;
}

#page-index div.index-page-wrapper {
    display: flex;
    flex-direction: row;
    gap: 6vw;
}

.index-page-links {
    display: inline-block;
    padding: 10px;
    color: #FFFFFF;
    font-size: min(4vw, 10vh);
    text-decoration: none;
}

#page-index > *,
#page-startup > *,
#page-pub > *,
#page-index div.index-page-wrapper > div {
  font-size: min(14vw, 35vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#page-startup #text-quiz {
    margin-bottom: 25vh;
}

#pub-text-natura,
#pub-text-quiz {
  font-size: min(10vw, 23vh);
}

#pub-text-pub {
  margin-top: 5vh;
}

#title-img {
    position: absolute;
    left: calc(50% - 12vh);
    bottom: 10vh;
    height: 25vh;
    width: 25vh;
    z-index: -1;
}

#text-natura {
  font-size: min(11vw, 30vh);
}

#text-natura > * {
  margin: 0 10px;
}

#page-score-content {
  display: flex;
  flex-direction: column;
}

.score-wrapper {
  display: flex;
  justify-content: space-between;
}

.score-wrapper > * {
  flex: 1;
}

.score-img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.score-number {
  font-size: min(30vw, 35vh);
  display: flex;
  align-items: center;
  justify-content: center;
}

.font-quiz-wrapper {
  display: flex;
}

.font-quiz {
  font-family: "Horseshoes and Lemonade";
}

.font-quiz > * {
  flex: 1;
  position: relative;
  z-index: 0;
  display: inline-block;
}

.font-quiz > *::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 20%;
  left: 16%;
  right: 15%;
  bottom: 10%;
}

.txtblue {
  color: rgb(63, 58, 152);
}

.font-quiz.txtblue > span.letter::before {
  background: #9cdffc;
}

.txtblue::before {
  background: #9cdffc;
}

.txtketchup {
  color: #183F33;
}

.font-quiz.txtketchup > span::before {
  background: rgba(245, 220, 220);
}

.txtketchup::before {
  background: rgba(245, 220, 220);
}

.txtmayo {
  color: #FF7000;
}

.font-quiz.txtmayo > span::before {
  background: rgba(250, 250, 220);
}

.txtmayo::before {
  background: rgba(250, 250, 220);
}

.beer {
  position: relative;
  height: 65%;
}

.beer img {
  max-height: 30vh;
  max-width: 30vw;
}

.beer .fill {
  z-index: 1;
  top: 0;
  left: 0;
  position: absolute;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}


.questions-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.quiz-page-questions-A .questions-bg .questions-bg-path {
  fill: #183F33;
}
.quiz-page-questions-B .questions-bg .questions-bg-path {
  fill: #FF7000;
}

#page-questions-index, .quiz-page-questions-links {
  align-items: center;
}

#page-questions-index, .quiz-page-questions-step {
    display: flex;
    flex-direction: column;
    gap: 10vh;
    text-align: center;
    justify-content: center;
}
.question-link {
    font-size: 8vh;
}

.question-title {
    text-align: center;
    padding: 5vh 10vw;
    font-weight: bold;
    font-family: Arial;
    font-size: 5vh;
    min-height: 12vh;
}

.question-answers-text {
    font-size: 3vh;
    padding: 0 6vw;
    display: flex;
    flex-direction: column;
    gap: 4vh;
}

.question-answers-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2vh;
  padding: 0 0vw;
}

.question-answers-images img {
  max-width: 40vw;
  max-height: 20vh;
}

.question-answer-letter {
  font-size: 6vh;;
}

.question-answer-text1,
.question-answer-text2,
.question-answer-text3,
.question-answer-text4 {
  display: flex;
  align-items: center;
  gap: 1vw;
}