:root {
  --dark-blue: #0B1734;
  --orange: #EF611F;
  --white: #ffffff;
  --green: #6ABE44;
}
  
@font-face {
  font-family: 'Cheese';
  src: url('../assets/cheese.ttf') format('truetype');
}

@font-face {
  font-family: 'Darumadrop One';
  src: url('https://fonts.googleapis.com/css2?family=Darumadrop+One&display=swap');
}

body{
  background-color: var(--dark-blue);
}



.container, .container2 {
  width: 100%;
  max-width: 649px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-content: center;
}

.container {
  display: flex;
  font-size:0.8rem;
  max-width:574px;
  background-image: url("../assets/pizarrajuego-09.png");
  background-position: center center;
  background-size: cover;
}

.container2 {
  display: grid;
    place-items: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

#littlecharacter{
  margin:auto;
  width:100%;
  object-fit: cover;
}

#word_scramble_game{
  width: 1024px;
  min-height:400px;
  border: var(--dark-blue) 3px solid;
  margin: auto;
  padding:0px;
  display: flex;
  background-image: url("");
  background-repeat: no-repeat;
  background-position: center center;
  background-size:contain;
  flex-direction: column;
  align-items: center;
  position: relative;
  background-color: #fca12b;
}
@media screen and (min-width: 1024px) {
  #word_scramble_game {
      display: flex;
      flex-direction: row;
      align-items: center;
  }

  #trivia_game{
    width: 100%;
    max-width: 1000px;
  }
  .container {
      max-width: 574px;
  }
  .container2 {
      max-width: 450px;
  }
  .container2 img{
      max-width:100
  }
}

@media screen and (min-width:1024px){
  #word_scramble_game {
    width:90%;
}
}
@media screen and (min-width: 631px)and (max-width: 1023px) {
  .container {
      width: 100%;
      flex-direction: column;
      max-width:574px;
  }
  #word_scramble_game {
      width:90%;
  }
  #trivia_game {
    width:90%;
  }
}

@media screen and (min-width: 0px) and (max-width: 630px) {
  .container {
      flex-direction: column;
  }
  #word_scramble_game {
      width:90%;
      background-size:500px auto;
  }
  #trivia_game {
    width:90%;
  }
}


#trivia_game{
  background-image: url("../assets/ponapruebatusaber-01.png");
  background-size: cover;
  
  aspect-ratio: 10 / 7; 
  height: auto;
}



#word_scramble_game div{
  padding:0px;
}

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

.container2 img{
  width:450px;
  height:330px;
}
  

  
  .container h2{
      font-family: Cheese;
      letter-spacing: 1px;
      line-height: 10px;
      font-size: 1.1rem;
      margin-top:20px;
      margin-bottom:10px;
      font-weight: 500;
      text-align: left;
      color: var(--dark-blue);
      margin-left:50px;
  }
  
  #box-text{
      text-align: center;
  }
  


.startBtn{
  width: 150px;
  cursor: pointer;
}

.startBtn_ordena{
  position: absolute;
  top: 70%;
  left: 70%;
  transform: translate(-75%, -50%);
}
.startBtn:hover{
      width:180px;
}

.container{
  position: relative
}
.content{
  width:80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}
  
  .content .word{
      user-select: none;
      font-size: 1.6rem;
      font-weight: 500;
      max-width:490px;
      text-align: center;
      text-shadow:
      -2px -2px 0 white,
      2px -2px 0 white,
      -2px 2px 0 white,
      2px 2px 0 white;
      letter-spacing: 20px;
      margin-right: -1.3em;
      margin-top:0;
      margin-bottom:0;
      word-break: break-all;
      text-transform: uppercase;
  }
  

  .details{
      margin-top:20px;
      margin-bottom:20px;
  }
  .details p{
      font-size: 1.1rem;
  }
  .details p b{
      font-weight: 500;
      font-weight:800;
  }

  .content input{
      height: 50px;
      border: none;
      outline: 3px solid var(--dark-blue) ;
      padding: 0 1rem;
      font-size: 1.1rem;
      border-radius: 5px;
      font-family: "Darumadrop One";
  }
  
  .content input:focus{
      box-shadow: 0px 2px 4px rgba(0,0,0,0.08);
  }
  .content input::placeholder{
      color: #aaa;
  }
  .content input:focus::placeholder{
      color: #bfbfbf;
  }
  .content .buttons{
      display: flex;
      justify-content: space-between;
      max-width:210px; 
  }
  .buttons button{
      border: none;
      outline: none;
      cursor: pointer;
      width: 45%;
      height:50px;
      font-size: 17px;
      border-radius: 5px;
      transition: all 0.3s ease;
  }
  
  .buttons button:active{
      transform: scale(0.97);
  }
  .buttons .refresh-word{
      background: #6c757d00;
  }
  .buttons .refresh-word:hover{
      background: #6ABE44;
  }
  .buttons .check-word{
      background: #0B1734;
      color: #fff;
  }
  .buttons .check-word:hover{
      background: #162444;
  }