style-ahorcado.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body{
  background-color: #f3f5fc;
  font-family: "Inter", Helvetica, sans-serif ;
  font-weight: 200;
}
header{
  height: 60px;
  width: 97vw;
  display: flex;
  margin: auto;
  justify-content: space-between;
  align-items: center;
}
#logo-alura{
  height: 50px;
}
#toggle{
  display: flex;
  position: relative;
  border-radius: 50px;
  background: #f3f5fc;
  transition: 0.5s;
  width: 100px;
  height: 50px;
  border: solid 2px #0A3871;
  cursor: pointer;
  box-sizing: content-box;
  justify-content: space-around;
}
#toggle .indicator{
  position: absolute;
  display: flex;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: #84a8d8;
  border-radius: 50%;
  transform: scale(0.9);
  transition: 0.5s;
}
#toggle.active .indicator{
  left: 50px;
  background-color: #0A3871;
}
.globo, .cuerda{
  display: flex;
  height: 45px;
  align-self: center;
}

.main{
 width: 90vw;
 height: 80vh;
 display: flex;
 align-items: center;
 align-content: center;
 flex-direction: column;
 margin: auto;
}

.section-iniciar{
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  align-content: center;
}
.botones-iniciar{
  display: flex;
  height: 60%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.btn{
  display: flex;
  border-radius: 24px;
  align-self: center;
  margin: 10px auto;
  font-weight: 200;
  justify-content: center;
}
.btn-iniciar{
  height: 15vh;
  width: 60vw;
  max-width: 250px;
  background: #0A3871;
  border-style: none;
  border-color: #0A3871;
  color: #f3f5fc;
  font-size: 26px;
}
.btn-iniciar:active{
  background-color: #84a8d8;
  border-color: #84a8d8;
}
.btn-inicio-agregar{
  height: 10vh;
  width: 55vw;
  max-width: 220px;
  background: #f3f5fc;
  border-color: #0A3871;
  border-style: solid;
  color: #0A3871;
  font-size: 18px;
}
.btn-inicio-agregar:active{
  border-color: #84a8d8;
    color: #84a8d8;
}
.redes{
  display: flex;
  justify-content: center;
}
.imgredes{
  width: 25px;
  margin: 0px 15px;
}

.section-agregar-palabra{
  display:none;
  /* display: flex; */
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
  width:90%;
  max-width: 600px;
  max-height: 900px;
}
.div-input-agregar{
  width: 100%;
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.input-agregar-palabra, .input-agregar-pista{
  background-color: transparent;
  font-weight: 300;
  font-size: 32px;
  border: 0;
  color: #0A3871;
  width: 90%;
  text-align: center;
  outline: none;
  caret-color: #0A3871;
}
.input-agregar-palabra{
  text-transform: uppercase;
}
.input-agregar-palabra.invalido, .input-agregar-pista.invalido{
  color: rgba(255, 1, 5, 0.4);
  outline: solid 3px rgba(255, 1, 5, 0.4) ;
  border-radius: 3px;
  box-shadow: 2px 2px 1px 1px #79797950;
  animation: shake 300ms;
}
@keyframes shake {
  25% {transform: translateX(4px);}
  50% {transform: translateX(-4px);}
  75% {transform: translateX(4px);}
}
input::placeholder{
  text-transform:none;
  color: #0A387170;
}
.div-info-agregar-cancelar{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 30%;
  max-height: 105px;
  width: 100%;
}
.info-descripcion{
 display: flex;
 flex-direction: row;
 width: 100%;
 align-items: center;
 justify-content: center;
 color: #0008;
}
#img-info{
  width: 15px;
  height: 15px;
  margin: 0px 5px 0px 0px;
}
.descripcion-agregar-palabra{
  font-style: italic;
  font-size: 15px;
  font-weight: 200;
  margin: 10px 0px;
}
.div-botones-agregar-cancelar{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 55%;
  justify-content: space-between;
  align-items: center;
}
.btn-agregar-jugar, .btn-cancelar{
  width: 48%;
  height: 90%;
  display: flex;
  border-radius: 15px; 
  font-weight: 200;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}

.section-juego-ahorcado{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  width:80%;
  display: none;
  max-width: 800px;
  max-height: 1200px;
}
.div-imagen-ambas{
  display: flex;
  height: 45%;
  justify-content: center;
}
.div-imagen{
  height: 100%;
  justify-self: center;
  align-self: center;
}
.imagen{
  height: 100%;
}

.div-palabra{
  display: flex;
  flex-direction: column;
  height: 18%;
  align-items: center;
  justify-content: flex-end;
}
.intentos-finjuego{
  display: flex;
  height: 30% ;
  font-size: 20px;
  margin:10px auto;
  justify-content: center;
  align-items: center;
  color: #0A3871;  
}
.parrafo-palabra{
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0A3871;
  text-transform: uppercase;
  height: 40%;
  margin:5px auto;
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 12px;
}
.parrafo-palabra span{
  display: flex;
  margin:0px 10px;
  width: 20px;
  justify-content: center;
  box-sizing:content-box;
  
}
.span-pista{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30%;
  font-size: 18px;
  font-style: italic;
  font-weight: 200;
  font-size: 16px;
}

.div-pista-botones{
  display: flex;
  flex-direction: column;
  width:100%;
  height: 18%;
  justify-content: space-evenly;
}
.intentos-text{
  font-family: "Inter";
  font-weight: 300;
}
.botones-juego{
  display: flex;
  height: 60%;
  align-items: center;
  justify-content: space-between;
}
.btn2{
  width: 30%;
  height: 100%;
  display: flex;
  border-radius: 15px; 
  font-weight: 200;
  justify-content: center;
  align-items: center;
  font-size: 22px;
}

.nuevo-juego, .btn-agregar-jugar{
  background: #0A3871;
  border-style: none;
  border-color: #0A3871;
  color: #f3f5fc;
}
.nuevo-juego:active, .btn-agregar-jugar:active{
  background-color: #84a8d8;
  border-color: #84a8d8;
}
.btn-pista, .btn-cancelar{
  background: #f3f5fc;
  color: #0A3871;
  border:2px solid #0A3871;
}
.btn-pista:active, .btn-cancelar:active{
  border:2px solid #84a8d8;
  color: #84a8d8;
}
.btn-pista:disabled, .btn-cancelar:disabled{
  color: #84a8d8;
  border:2px solid #84a8d8;
}
.btn-agregar-jugar:disabled{
  background-color: #84a8d8;
}
.desistir{
  background-color: #0A3871;
  color: #f3f5fc;
  border:none;
}
.desistir:active{
  background-color:#84a8d8 ;
  color: #f3f5fc;
  border:none;
}

.div-abecedario{
  display: flex;
  align-items: center;
  justify-items: center;
  width: 100%;
}
.letras-abecedario{
  display: grid;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-items: center;
  padding: 5px;
  grid-template-columns: repeat(13, minmax(35px, 1fr));
  grid-gap: 2% 2%;
  grid-template-rows: 1fr 1fr;
}
#btn-letra{
  width: 40px;
  height: 40px;
  border: none;
  background-color: #f3f5fc;
  border-radius: 5px;
  color: #0A3871;
  font-size: 25px;
  cursor: pointer;
}
#btn-letra:disabled{
  color:#84a8d8
}