body,
html {
  height: 100%;
  margin: 0;
}

@font-face {
  font-family: HelveticaNeue;
  src: url('./AnyConv.com__HelveticaNeueLTStd-Lt.ttf');
}

@font-face {
  font-family: HelveticaNeueThin;
  src: url('./AnyConv.com__HelveticaNeueLTStd-Th.ttf');
}

@font-face {
  font-family: HelveticaNeueCondensed;
  src: url('./AnyConv.com__HelveticaNeueLTStd-Cn.ttf');
}

@font-face {
  font-family: HelveticaNeueMedium;
  src: url('./AnyConv.com__HelveticaNeueLTStd-Lt.ttf');
}

@font-face {
  font-family: HelveticaNeueMediumCondensed;
  src: url('./AnyConv.com__HelveticaNeueLTStd-MdCn.ttf');
}

@font-face {
  font-family: HelveticaNeueHeavyCondensed;
  src: url('./AnyConv.com__HelveticaNeueLTStd-HvCn.ttf');
}

@font-face {
  font-family: HelveticaNeueBoldCondensed;
  src: url('./AnyConv.com__HelveticaNeueLTStd-HvCn.ttf');
}

/* .bg {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 0;
} */

.letsplay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.play {
  position: absolute;
  width: 200px;
  top: 40%;
  right: 45%;
}

.logos {
  position: absolute;
  bottom: 25px;
  right: 7%;
  width: 200px;
  z-index: 10;
}

.rigthElement {
  position: absolute;
  width: 300px;
  top: 10%;
  right: 16%;
}

.leftElement {
  position: absolute;
  width: 470px;
  top: 13%;
  right: 65%;
}

.indexTitle1 {
  position: absolute;
  font-size: 52px;
  font-family: 'HelveticaNeue';
  color: aliceblue;
  top: 9%;
  right: 40%;
}
.indexTitle2 {
  position: absolute;
  font-family: 'HelveticaNeueHeavyCondensed';
  color: aliceblue;
  top: 18%;
  right: 37%;
  font-size: 57px;
}

.indexTitle3 {
  position: absolute;
  font-family: 'HelveticaNeueMedium';
  color: aliceblue;
  top: 59%;
  right: 38%;
  font-size: 57px;
}

.leftintro {
  position: absolute;
  top: 15%;
  left: 70%;
  width: 400px;
}

@media only screen and (max-width: 1300px) {
  .indexTitle1 {
    font-size: 39px;
    top: 9%;
    right: 41%;
  }
  .indexTitle2 {
    top: 18%;
    right: 40%;
    font-size: 46px;
  }

  .indexTitle3 {
    top: 63%;
    right: 40%;
    font-size: 44px;
  }
  .leftintro {
    top: 15%;
    left: 70%;
    width: 300px;
  }
}

@media only screen and (max-width: 1320px) {
  .leftintro {
    top: 23%;
    left: 74%;
    width: 300px;
  }
}

.intropanel {
  position: absolute;
  top: 10%;
  left: 3%;
  width: 1300px;
}

.titulointro {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 500px;
}
.vamosjogar {
  position: absolute;
  bottom: 15%;
  left: 30%;
  color: rgb(143, 41, 41);
  font-family: HelveticaNeue;
  font-size: 40px;
  font-weight: 600;
}

@media screen and (max-width: 1320px), screen and (max-height: 700px) {
  .intropanel {
    top: 5%;
    left: 3%;
    width: 1139px;
  }

  .titulointro {
    left: 26%;
    width: 400px;
  }
  .vamosjogar {
    bottom: 6%;
  }

  .indexTitle3 {
    top: 66%;
  }
}
/* 
@media screen and (max-width: 1320px), screen and (max-height: 710px) {
  .intropanel {
    top: 10%;
  }
} */

/* @media screen and (max-width: 1320px), screen and (max-height: 900px) {
  .vamosjogar {
    bottom: 18%;
  }
} */

.titulointro2 {
  position: absolute;
  font-family: HelveticaNeueBoldCondensed;
  top: 34%;
  left: 12%;
  color: black;
  font-size: 29px;
}

.textointro {
  position: absolute;
  top: 41%;
  left: 12%;
  width: 633px;
  color: black;
  font-family: HelveticaNeueCondensed;
  font-size: 24px;
}

.desafiotitle {
  position: absolute;
  top: 20%;
  left: 10%;
  width: 350px;
}

.leftdesafio {
  position: absolute;
  top: 0%;
  right: 10%;
  width: 450px;
}

.desafioname {
  position: absolute;
  bottom: 20%;
  /* left: 10%; */
  color: rgb(255, 255, 255);
  font-family: HelveticaNeueHeavyCondensed;
  font-size: 160px;
  /* transform: translate3d(23%, 0%, 0); */
  /* transition: transform 0.8s ease-in-out; */
  animation: slide-in 1s forwards;
}

@media screen and (max-width: 1320px), screen and (max-height: 700px) {
  .desafioname {
    bottom: 4%;
    font-size: 160px;
  }

  .leftdesafio {
    width: 331px;
  }
}

@keyframes slide-in {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(23%);
    opacity: 1;
  }
}

.concluidoTitle {
  position: absolute;
  font-family: HelveticaNeueHeavyCondensed;
  color: white;
  font-size: 84px;
  top: 35%;
  left: 36%;
}

.rigthConcluido {
  position: absolute;
  width: 452px;
  top: 16%;
  right: 3%;
}

.leftConcluido {
  position: absolute;
  width: 236px;
  top: 14%;
  right: 67%;
}

.concluidoText {
  position: absolute;
  font-family: HelveticaNeueMediumCondensed;
  color: white;
  font-size: 20px;
  top: 57%;
  left: 36%;
  width: 317px;
}

@media screen and (max-width: 1320px), screen and (max-height: 700px) {
  .concluidoText {
    top: 66%;
  }
}