/* Contenedor de la sopa de letras */

#contenedor {
    border: 1px solid rgb(0, 17, 255);
   padding: 10px;
    float: left;
    margin: 15px 50px
}

#contenedor div {
    width: 100%;
    margin: 0 auto;
}

/* Estilo para cada cuadrado de la sopa de letras */

#contenedor .letra {
    height: 30px;
    width: 30px;
    text-transform: uppercase;
    background-color: white;
    border: 0;
    font: 1em sans-serif;
}

/* Colores cuando se selecciona un cuadrado */

#contenedor .selected {
    background-color: rgb(8, 179, 2);
}

#contenedor:hover .selected:hover {
    background-color: rgb(145, 255, 0);
    font-weight: bold;
}

#contenedor>div>button:hover {
    background-color: rgb(145, 255, 0);
    font-weight: bold;
}

/* Indica que la letra es parte de una palabra que se ha encontrado */

#contenedor .found {
    background-color: #c0c0c0;
    color: white;
    border: 1px solid black;
    font-weight: bold;
    text-shadow: 0px 2px 3px #000;
}

#contenedor .found:hover {
    background-color: rgb(145, 255, 0);
    font-weight: bold;
}

/* Colores de palabras no encontradas cuando se pulsa el botón Resolver sopa de letras*/

#contenedor .solved {
    background-color: blue;
    color: white;
}

/* Cambio de color de fondo cuando se encuentras todas las palabras*/

#contenedor .complete {
    background-color: green;
}

/**
* Estilos para la lista de palabras
*/

#palabras-sopadeletras {
    /*padding-top: 20px;*/
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
    width: 300px;
    color: white;
}

#palabras-sopadeletras ul {
    list-style-type: none;
}

#palabras-sopadeletras li {
    padding: 3px 0;
    font: 1em sans-serif;
}

/*Indica que la palabra ha sido encontrada en la lista */

#palabras-sopadeletras .palabraEncontrada {
    text-decoration: line-through;
    color: rgb(255, 0, 0);
}

/**
*  Estilos para el botón
*/

#BTNrefresh {
    /*position: absolute;*/
    /*bottom: 0em;*/
}

#BTNresolver {
    /*bottom: 3em;*/
    /*position: absolute;*/
}

/* Título */

.titulo {
    
    padding: 10px;
    border: none;
    font: normal 48px/normal "Warnes", Helvetica, sans-serif;
    color: rgba(255, 255, 255, 1);
    text-decoration: normal;
    text-align: center;
    -o-text-overflow: clip;
    text-overflow: clip;
    white-space: pre;
     -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    /*position: absolute;*/
    top: 1em;
    background: rgba(0,0,0,0.5);
}

.titulo:hover {
    text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #00ffff, 0 0 70px #00ffff, 0 0 80px #00ffff, 0 0 100px #00ffff;
}