img {
  border-radius: 10px;
}
body {
     background: linear-gradient(to right, rgb(2, 2, 24), rgb(92, 85, 85));   
  }
main {
  background-color: rgb(104, 104, 99);
  height: 500px;
  width: 500px;
  border-radius: 20px;
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -30%);
  text-align: center;

}
input{
  padding: 10px;
  border-radius: 5px;
}
 
#palabranueva{
  visibility: hidden;
}

.botones {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%);
}
button {
  background-color: #38628e;
  padding: 10px;
  border-radius: 5px;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
button:hover {
  background-color: #183f9f;
  padding: 12px;
  transition: 50ms;
}
.btn_iniciar{
 position: absolute;
 top: 50%;
 visibility: visible;
}

#juego {
  margin: 10px;
  margin-top: -10px;
  height: 300px;
  background-color: #183f9f;
  border-radius: 5px;
  visibility: hidden;
  border-style: inset;
  border-color: black;
}
.piso{
  height: 3px;
  width: 300px;
  background-color: black;
  position: absolute;
  top: 55%;
  left: 60%;
  transform: translate(-70%);

}
.circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: #183f9f;
  border-style: groove;
  border-color: black;
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%,-20%);
}
.cuerpo {
  height: 90px;
  width: 3px;
  background-color: black;
  position: absolute;
  top: calc(20% + 59px);
  left: 50%;
  transform: translate(-58%, -20%);
}
.soga {
  height: 6px;
  width: 3px;
  background-color: black;
  position: absolute;
  top: 17.2%;
  left: 50%;
  transform: translate(-58%, -20%);
}

.lateral {
  height: 190px;
  width: 3px;
  background-color: black;
  position: absolute;
  top: 19%;
  left: 20%;
  transform: translate(-17%,-5%);
}
.arriba {
  height: 3px;
  width: 150px;
  background-color: black;
  position: absolute;
  top: 17%;
  left: 25%;
  transform: translate(-17%,-5%);
}
.brazos{
  height: 3px;
  width: 70px;
  background-color: black;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.piernaizq{
  height: 3px;
  width: 60px;
  background-color: black;
  position: absolute;
  top: 50%;
  left: 48%;
  transform: translate(-50%, -50%);
  transform: rotate(50deg);
}
.piernader{
  height: 3px;
  width: 60px;
  background-color: black;
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  transform: rotate(-50deg);
}


.uno,.dos,.tres,.cuatro,.cinco,.seis,.siete,.ocho,.nueve,.diez,.once{
  height: 3px;
  width: 20px;
  background-color: black;
  position:absolute;
 left: 5%;
  bottom: 30%;
 visibility: hidden;
}
.dos{
   left: 13%;
 }
.tres{
  left: 21%;
}
.cuatro{
  left: 29%;
}
.cinco{
  left: 37%;
}
.seis{
  left: 45%;
  }
.siete{
  left: 53%;
}
.ocho{
  left: 61%;
}
.nueve{
  left: 69%;
}
.diez{
  left: 77%;
}
.once{
  left: 85%;
}
#spanuno,#spandos,#spantres,#spancuatro,#spancinco,#spanseis,#spansiete,#spanocho,#spannueve,#spandiez,#spanonce{
  height: 20px;
  width: 20px;
 
  position:absolute;
  left: 5%;
  bottom: 31%;
 visibility: visible;
}
#spandos{
  left: 13%;
}
#spantres{
  left: 21%;
}
#spancuatro{
  left: 29%;
}
#spancinco{
  left: 37%;
}
#spanseis{
  left: 45%;
}
#spansiete{
  left: 53%;
}
#spanocho{
  left: 61%;
}
#spannueve{
  left: 69%;
}
#spandiez{
  left: 77%;
}
#spanonce{
  left: 85%;
}
h2{
  
  color: yellow;
  animation: ganar .9s alternate infinite ease-in;
  visibility: hidden; 
  font-size: 30px;
  position: absolute;
  left: 45%;
  top: 45%;
  transform: translate(-50%, -50%);
}
h3{
  
  color: yellow;
  animation: ganarr .9s alternate infinite ease-in;
  visibility: hidden; 
  font-size: 30px;
  position: absolute;
  left: 25%;
  top: 25%;
  transform: translate(-50%, -50%);
}
@media screen and (min-width:701px) {
  @keyframes ganar {
    0% {
      left: 75%;
      transform: scale(0);
      color: aqua;
    }
    100% {
      left: 75%;
      transform: scale(2);
    }
  }
}
@media screen and (min-width:701px) {
  @keyframes ganarr {
    0% {
      left: 15%;
      transform: scale(2);
      color: aqua;
    }
    100% {
      left: 15%;
      transform: scale(1);
    }
  }
}
@media screen and (max-width:700px) {
  @keyframes ganar {
    0% {
      left: 75%;
      transform: scale(0);
      color: aqua;
    }
    100% {
      left: 75%;
      transform: scale(1);
    }
  }
  img{
    visibility: hidden;
     }
     body{
      background: rgb(2,2,24);
     }
}
@media screen and (max-width:700px) {
  @keyframes ganarr {
    0% {
      left: 15%;
      transform: scale(1);
      color: aqua;
    }
    100% {
      left: 15%;
      transform: scale(0);
    }
  }
}