:root{
  --main-bg-color: #e5b2ff;
  --main-bg-color-dark: #8e6f9e;
}

#page-content {
    max-width:800px;
    margin:auto;
}

/* Centrar contenido al centro */
.container-fluid {
    min-height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#intro .titulo,
#intro .descripccion, 
#intro_acertijo{
    text-align: center;
} 

/* Botón desenvolver regalo */
.button_div{
    position:relative;
    display:inline-block;
    margin:20px;
  }
  .button_div button:hover{
    background-color:var(--main-bg-color);
  }  
  .button_div button{
    color:white;
    margin:auto;
    font-weight:bold;
    font-size:20px;
    text-align: center;
    text-decoration:none;
    background-color:var(--main-bg-color);
    display:block;
    position:relative;
    padding:20px 40px;
    border:none;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    text-shadow: 0px 1px 0px #000;
    filter: dropshadow(color=#000, offx=0px, offy=1px);
    
    -webkit-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 var(--main-bg-color-dark);
    -moz-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 var(--main-bg-color-dark);
    box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 var(--main-bg-color-dark);
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }
  
  .button_div button:active{
    top:10px;
    background-color:var(--main-bg-color-dark);
    
    -webkit-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
    -moz-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3pxpx 0 #915100;
    box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
  }
  

/* Texto acertijo */
#letra2, 
#letra5,
#letra7,
#letra13
{
    margin-right:20px;    
}

.letra_acertijo {
  display: none;
  border:none;
  font-size: 50px;
  border-bottom:1px solid lightgray;
  width: calc((100% - (4 * 30px)) / 17);
  height:50px;
  padding:0px;
  text-align:center;
}


.wrapper_input_acertijo{
  padding:0px;
  margin:auto;
  display: flex;
}

#contenido_acertijo {
  min-height:280px;
}

#contenido_acertijo p{
  margin-bottom:5px;
  text-align:center;
  font-weight: bold;
}

#intro_seleccion {
  text-align:center;
  max-width:400px;
}

#enhorabuea_seleccion{
  font-weight:bold;
}

.intro_seleccion{
  margin-bottom:5px;
}

.imagen_seleccion{
  border:none;
  padding:0px;
  width:100%;
  margin:auto;
  height:220px;
}

.imagen_seleccion img{
  display:block;
  width:100%;
  max-height:220px;
  border-radius: 7px;
  height:100%;
}


.titulo_seleccion {
  text-align:center;
  font-weight:bold;
  font-size:20px;
}

.titulo_opcion{
  text-align:center;
}

.barra_progreso {
  margin: 20px 0px;
  height: 12px;
  padding: 0px;
  display: flex;
}

.titulo_resultado_regalo2 {
  font-weight:bold;
  color:black;
}

#resultado_seleccion_regalo2 a{
  text-decoration:none;
}

#resultado_seleccion2{
  text-align:center;
}

.texto_resultado_regalo2 {
  max-width:670px;
  margin:auto;
  margin-bottom:5px;
}

#siguiente_regalo {
  opacity: 0;
  background:var(--main-bg-color);
  margin:20px 0px;
  border:0px;
  padding:10px 0px;
  border-radius:7px;
}

#descubrir_segundo_regalo {
  border:none;
  margin:20px 0px;
  padding:10px 0px;
  color:black;
  border-radius:7px;
  background:var(--main-bg-color);
  font-weight:bold;
}

#mensaje_ordenador {
  width:100%;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items: center;
}

#mensaje_ordenador h1{
  max-width:80%;
  text-align:center;
  margin-bottom:10%
}