index.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  margin: 0; 
  height: 100%; 
  overflow: hidden; 
  position: relative
}

body {
  background: rgb(29, 29, 29);
  color: #e3e3e3;

}
.main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 50px;
}

.box {
  background-color: red;
  height: 100vh;
  background-image: url('./images/BG.png');
  background-size: cover;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 106px;
  width: 100%;
}

.box.question1 {
  background-image: url('./images/BG1.png');
} 

.box.question2 {
  background-image: url('./images/BG2.png');
} 

.box.question3 {
  background-image: url('./images/BG3.png');
}

.box.question4 {
  background-image: url('./images/BG4.png');
} 

.box.question5 {
  background-image: url('./images/BG5.png');
}

.box.finished {
  background-image: url('./images/BG-END.png');
} 

#logo {
  width: 22vh;
  height: 8vh;
  margin-bottom: 36px;
}

#logo.countdown,
#logo.question{
  margin-bottom: 120px;
}

#logo.finished {
  margin-bottom: 177px
}

#logo.wrong {
  margin-bottom: 80px;
}

#logo.advance {
  margin-bottom: 120px;
}

#cenarios {
  margin-top: 56px;
  margin-bottom: 56px;
  width: 16vh;
}

.text {
  font-size: 2.5rem;
  text-align: center;
}

.question-main-title {
  font-size: 2.5rem;
  margin-bottom: 100px;
  text-align: center;
}

.btn {
  padding: 24px 101px;
  font-size: 2.5rem;
  text-decoration: none;
  background-color: #6021D8;
  color: white;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0px 4px 26px 1px #6021D8;
  z-index: 999;
  position: relative;
}

.btn.continue {
  padding: 24px 150px;
  margin-right: 49px;
}

.btn-help, .btn-exit {
  width: 101px;
  height: 101px;
  border-radius: 999px;
  background-color: #FF305C;
  color: white;
  font-weight: 700;
  font-size: 2.5rem;
  outline: 0;
  border: 0;
}

.buttons-home {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-help {
  position: absolute;
  right: 120px;
}

.popover {
  bottom: 153px;
  right: -18px;
  position: absolute;
  color: black;
  width: 850px;
  border-radius: 12px;
  background-color: white;
  text-align: left;
  padding: 30px;
}

.popover #sair {
  position: absolute;
  right: 27px;
  top: 27px;
  color: red;
}

.popover ol {
  font-size: 24px;
  font-weight: 400;
  padding-left: 50px;
  margin-top: 20px;
}

.hidden {
  display: none;
}

.correct-answer {
  background-color: #73FFB4 !important;
}

.wrong-answer {
  background-color: #FF3D3D !important;
  color: #fff !important;
}

.buttons-advance {
  margin-top: 200px;
  position: relative;
  left: 60px;
}

.buttons-advance.level3 {
  margin-top: 60px;
}

.buttons-advance.level5 {
  margin-top: 170px;
}

.popover-level {
  bottom: 158px;
  right: -11px;
  position: absolute;
  color: black;
  width: 680px;
  border-radius: 12px;
  background-color: white;
  text-align: left;
  padding: 30px;
  text-align: center;
  height: 200px;
}

.popover-level::after {
  content: '';
	position: absolute;
	bottom: 0;
	left: 97%;
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top-color: #fff;
	border-bottom: 0;
	margin-left: -94px;
	margin-bottom: -48px;
}

.popover-level .buttons {
  position: relative;
  top: 30px;
}

.popover-level .buttons a {
  text-decoration: none;
  color: #fff;
  padding: 14px 45px;
  border-radius: 10px;
}

.popover-level .buttons .btn-finish {
  background-color: #71B32B;
  margin-right: 30px;
}

.popover-level .buttons .btn-continue {
  background-color: #FF5A5A;
  
}

.finish-main-title {
  font-size: 80px;
  font-weight: 400;
  margin-bottom: 10px;
  text-align: center;
}

.finish-main-title.total {
  font-size: 150px;
  color: #FF305C;
  text-align: center;
}

.finish-subtitle.total {
  text-align: center;
}

.finish-subtitle {
  font-size: 40px;
  margin-bottom: 21px;
  text-align: center;
}

.hero-bottom {
  position: absolute;
  bottom: 0;
  right: 100px;
}

.hero-bottom.level3 {
  right: 50px;
}

.hero-bottom.level5 {
  right: 30px;
}

.hero-bottom.finish-level {
  right: 30px;
}

.hero-bottom img {
  width: 140%;
}

.hero-bottom.level3 img {
  width: 130%;
}

.hero-bottom.level5 img {
  width: 160%;
  position: relative;
  right: 100px;
  bottom: 30px;
}

.hero-bottom.wrong {
  bottom: 180px;
    right: 480px; 
}

.hero-bottom.finished {
  bottom: 157px;
  right: 73px;
}

.box.finished .main-content {
  position: relative;
  bottom: 200px;
}

.box.wrong .main-content {
  position: relative;
  bottom: 430px;
} 

.buttons-finish {
  position: absolute;
  bottom: 200px;
}

.buttons-finish.wrong {
  bottom: 90px;
}

.buttons-finish.finished-total {
  bottom: 200px;
}

.level-main-title {
  font-weight: 900;
  font-size: 40px;
  color: #fff;
}

.level-subtitle {
  font-size: 40px;
  text-align: center;
  color: #fff;
}

.level-hero {
  font-size: 150px;
  font-family: 'Bangers';
  color: #fff;
}

.level-hero.countdown {
  margin-bottom: 40px;
}

.main-content.level .level-img {
  height: 110%;
  position: relative;
  left: 20px;
  width: 60%;
}

.main-content.level .level-img.level3 {
  height: 100%;
}

.countdown-hero-container {
  display: flex;
  justify-content: center;
}

.countdown-hero {
  width: 120%;
}

.countdown-hero.level4 {
  width: 390px;
}

.countdown-hero.level5 {
  width: 40vw;
}

.start-text {
  margin-top: 120px; 
  font-size: 60px;
}

.popover.initial::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 97%;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
  margin-left: -94px;
  margin-bottom: -48px;
}

/** responsivo **/

@media (min-width: 2000px) {
  .box {
    background-size: 100% 100%;
  }

  .btn-help {
    right: 28vw;
    width: 141px;
    height: 141px;
  }

  #logo {
    width: 30vh;
    height: 12vh;
  }

  #logo.finished,
  #logo.advance {
    margin-bottom: 60px;
  }

  .text {
    font-size: 4.5rem;
  }
  
  #cenarios {
    width: 21vh;
  }

  .btn {
    padding: 40px 110px;
  }

  .btn, .btn-help {
    font-size: 3.5rem;

  }

  .countdown-hero {
    width: 8vw;
  }

  .countdown-hero.level2,
  .countdown-hero.level3  {
    width: 9vw;
  }

  .countdown-hero.level4 {
    width: 11vw;
  }

  .countdown-hero.level5 {
    width: 14vw;
  }

  .level-hero {
    font-size: 200px;
  }

  .level-main-title {
    font-size: 50px;
  }

  .start-text {
    font-size: 70px;
  }

  .finish-main-title {
    font-size: 200px;
  }

  .finish-subtitle {
    font-size: 100px;
  }

  .qrcode {
    width: 25%;
  }

  .qrcode.finished {
    width: 35%;
  }

  .box.wrong .main-content {
    bottom: 200px;
  }

  .hero-bottom.finished,
  .hero-bottom.wrong {
    right: 1000px;
  }

  .hero-bottom,
  .hero-bottom.level3,
  .hero-bottom.level4,
  .hero-bottom.level5 {
    right: 1000px;
  }

  .hero-bottom img {
    width: 160%;
  }

  .hero-bottom.level3 img {
    width: 140%;
  }

  .hero-bottom.level4 img {
    width: 170%;
  }


  .hero-bottom.level5 img {
    width: 190%;
  }

  .main-content.level {
    margin-bottom: 150px;
  }

  .buttons-advance {
    margin-top: 130px;
  }

  .btn-exit {
    height: 121px;
    width: 121px;
  }

  .main-content.level3 {
    margin-bottom: 0;
  }

  .buttons-advance.level5 {
    margin-top: 60px;
  }
  
  .finish-main-title.total {
    font-size: 250px;
  }

  .popover-level,
  .popover.initial {
    width: 40vw;
    bottom: 184px;
    right: 0.3vw;
    padding: 70px;
    border-radius: 30px;
  }

  .popover-level {
    height: 9vw;
    font-size: 60px;
  }

  .popover ol {
    font-size: 60px;
  }

  .popover-level::after,
  .popover.initial::after {
    border: 35px solid transparent;
    border-bottom: 0;
    border-top-color: #fff;
    left: 100%;
    margin-bottom: -34px;
  }
}

@media (max-height: 1900px) {
  .btn {
    padding: 15px 50px;
  }
  
  .box {
    padding-top: 0;
    background-size: 100% 100%;
  }

  .btn-help, .btn-exit, .text, .question-main-title {
    font-size: 1.5rem;
  }

  .btn {
    font-size: 1rem;
  }

  .btn-help {
    right: calc(50% - 250px);
  }

  .btn-help, 
  .btn-exit {
    width: 61px;
    height: 61px;
  }

  .countdown-hero {
    width: 16vh;
  }

  .countdown-hero.level4 {
    width: 20vh;
  }

  .countdown-hero.level5 {
    width: 23vh;
  }

  .start-text {
    margin-top: 70px;
    font-size: 30px;
  }

  .start-text.level5 {
    margin-top: 50px;
  }

  .level-hero.countdown {
    font-size: 70px;
  }
  
  .level-subtitle,
  .level-main-title {
    font-size: 17px;
  }

  #logo.countdown {
    margin-bottom: 40px;
  }

  #logo.advance {
    margin-bottom: 10px;
  }

  #logo.finished,
  #logo.wrong {
    margin-bottom: 30px;
  }

  .hero-bottom.wrong img {
    width: 50%;
  }

  .hero-bottom img {
    width: 200px;
  }

  .hero-bottom.level4 {
    right: 60px;
  }

  .hero-bottom.level5 {
    right: -20px;
  }

  .hero-bottom.level3 img {
    width: 60%;
  }

  .hero-bottom.level4 img,
  .hero-bottom.level5 img {
    width: 70%;
  }

  .hero-bottom.wrong {
    bottom: 110px;
    right: 160px;
  }
  
  .qrcode {
    width: 30%;
  }

  .qrcode.finished {
    width: 50%;
  }

  .box.wrong .main-content {
    bottom: 50px;
    gap: 10px;
  }

  .box.finished .main-content {
    bottom: 20px;
  }

  .finish-subtitle {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .level-hero,
  .finish-main-title {
    font-size: 50px;
  }

  .buttons-finish {
    bottom: 60px;
  }
  
  .buttons-advance.level3,
  .buttons-advance.level5,
  .buttons-advance {
    margin-top: 0;
    left: 40px;
  }

  .main-content.level .level-img {
    width: 45%;
    left: 0;
  }

  .main-content.level {
    margin-bottom: 30px;
  }

  .btn.continue {
    padding: 15px 110px;
  }

  .main-content.level .level-img.level3 {
    height: 200px;
  }

  .main-content.level3 {
    margin-bottom: 0;
    gap: 10px;
  }

  .finish-main-title.total {
    font-size: 110px;
  }

  .hero-bottom.finished {
    bottom: 70px;
    right: 150px;
  }
  
  .buttons-finish.finished-total {
    bottom: 40px;
  }

  .popover-level,
  .popover.initial {
    bottom: 102px;
    right: -30px;
  }


  .popover-level::after,
  .popover.initial::after {
    border: 35px solid transparent;
    border-bottom: 0;
    border-top-color: #fff;
    left: 100%;
    margin-bottom: -34px;
  }

  .popover-level {
    height: auto;
    width: auto;
  }

  .popover-level .buttons {
    display: flex;
    justify-content: center;
    top: 10px;
  }
}

@media (min-width: 600px) and (max-width: 920px) {
  .countdown-hero {
    width: 80%;
  }

  .countdown-hero.level4 {
    width: 95%;
  }

  #logo.countdown {
    margin-bottom: 70px;
  }

  #logo.advance {
    margin-bottom: 30px;
  }

  .start-text {
    margin-top: 70px;
    font-size: 40px;
  }

  .level-hero.countdown {
    font-size: 100px;
  }

  .level-main-title {
    font-size: 30px;
  }

  .qrcode {
    width: 30%;
  }

  .qrcode.finished {
    width: 50%;
  }

  .hero-bottom.wrong img {
    width: 60%;
  }

  .hero-bottom.wrong {
    right: 40px;
    bottom: 150px
  }

  .level-subtitle,
  .level-main-title,
  .finish-subtitle {
    font-size: 30px;
  }

  .level-hero,
  .finish-main-title {
    font-size: 70px;
  }

  .box.wrong .main-content {
    bottom: 100px;
  }

  .box.finished .main-content {
    bottom: 120px;
  }

  #logo.wrong {
    margin-bottom: 30px;
  }

  #logo.finished {
    margin-bottom: 40px;
  }

  .hero-bottom {
    right: -15px;
  }

  .hero-bottom.level3,
  .hero-bottom.level4 {
    right: -64px;
  }

  .hero-bottom.level5 {
    right: -160px;
  }

  .hero-bottom img {
    width: 90%;
  }

  .hero-bottom.level3 img {
    width: 80%;
  }

  .hero-bottom.level4 img,
  .hero-bottom.level5 img {
    width: 100%;
  }

  .buttons-finish {
    bottom: 90px;
  } 

  .popover-level,
  .popover.initial {
    width: 580px;
    bottom: 102px;
    right: -30px;
  }

  .popover-level {
    height: 170px;
  }

  .popover-level::after,
  .popover.initial::after {
    border: 35px solid transparent;
    border-bottom: 0;
    border-top-color: #fff;
    left: 100%;
    margin-bottom: -34px;
  }
}

@media (max-width: 480px) { 
  .btn-help {
    right: calc(50% - 180px);
  }

  .btn-help, .btn-exit, .btn, .text, .question-main-title {
    font-size: 0.9rem;
  }

  .btn-help, .btn-exit {
    width: 51px;
    height: 51px;
  }

  .countdown-hero {
    width: 14vh;
  }

  .countdown-hero.level2,
  .countdown-hero.level3 {
    width: 16vh;
  }

  .countdown-hero.level4,
  .countdown-hero.level5 {
    width: 40vw;
  }

  .start-text {
    font-size: 25px;
  }

  .qrcode,
  .hero-bottom.wrong img,
  .qrcode.finished {
    width: 40%;
  }

  .level-hero,
  .finish-main-title {
    font-size: 40px;
  }

  .level-main-title,
  .level-subtitle,
  .finish-subtitle {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .hero-bottom.wrong {
    bottom: 106px;
    right: -109px;
  }

  .box.wrong .main-content {
    bottom: 80px;
    margin: 0 10px;
  }
  
  .main-content.level {
    margin-bottom: 0px;
    gap: 10px;
  }

  .buttons-finish.wrong {
    bottom: 60px;
  }

  #logo.wrong {
    margin-bottom: 10px;
  }

  #logo.advance {
    margin-bottom: 20px;
  }

  .hero-bottom {
    right: -18px;
  }

  .hero-bottom.level3{
    right: -24px;
  }

  .hero-bottom.level4 {
    right: -50px;
  }

  .hero-bottom.level5 {
    right: -145px;
  }

  .hero-bottom img,
  .hero-bottom.level3 img {
    width: 150px;
  }

  .hero-bottom.level4 img,
  .hero-bottom.level5 img {
    width: 180px;
  }

  .buttons-finish {
    bottom: 0;
  }

  .buttons-finish .btn {
    bottom: 50px;
  }

  #logo.finished {
    margin-bottom: 30px;
  }

  .box.finished .main-content {
    bottom: 70px;
  }

  .main-content.level .level-img {
    width: 150px;
    left: 5px;
  }

  .buttons-advance,
  .buttons-advance.level3,
  .buttons-advance.level5 {
    margin-top: 0;
    left: 30px;
  }

  .buttons-advance .btn {
    padding: 15px 70px;
    margin-right: 15px;
  }

  .hero-bottom.finished {
    bottom: 65px;
    right: -30px;
  }

  .finish-main-title.total {
    font-size: 65px;
  }

  .buttons-finish.finished-total {
    bottom: 88px;
  }

  .hero-bottom.finish-level {
    right: -146px;
  }

  .popover-level,
  .popover.initial {
    width: 100vw;
  }

  .popover.initial {
    bottom: 72px;
    right: -6px;
  }

  .popover-level {
    right: -20px;
    height: 150px;
    bottom: 71px;
  }

  .popover-level::after,
  .popover.initial::after {
    border: 20px solid transparent;
    border-bottom: 0;
    border-top-color: #fff;
    margin-bottom: -19px;
  }

  .popover-level::after {
    left: 108%;
  }

  .popover.initial::after {
    left: 111%;
  }

  .popover.initial ol {
    font-size: 20px;
  }

  .popover #sair {
    font-size: 1.5rem;
  }
}