#pantalla-inicio {}
#pantalla-inicio .col-span-1 {
    background-color: #e0f2ff;
}
#pantalla-inicio .col-span-2 {
    background-color: #00376e;
}
#pantalla-inicio button {
    background-color: #00264b;
    border-color: #00b4b7;
    color: #fdc300;
    display: block;
}
#pantalla-listado {
    display: none;
}
#pantalla-listado .col-span-3.uppercase {
    background-color: #00284f;
    color: #ffc500;
}
#pantalla-listado .col-span-1.uppercase {
    background-color: #ffdf8f;
    color: #00376e;
}
#pantalla-listado .col-span-3 {
    background-color: #e0f2ff;
    color: #00284f;
}
#pantalla-listado .col-span-1 {
    background-color: #f9f8c7;
    color: #00376e;
}
#pantalla-juego {
    display: none;
}
#pantalla-juego > .grid > .col-span-2 {
    background-color: #00284f;
    color: #ffc500;
}
#pantalla-juego > .grid > .col-span-2 h2 {
    color: #ffc500;
}
#pantalla-juego > .grid > .col-span-2 button {
    background-color: #00264b;
    border-color: #00b4b7;
    color: #fdc300;
}
#pantalla-juego > .grid > .col-span-2 span {
    color: #ebee06;
}
#pantalla-juego .drop-efectos {
    background-color: #cae9f9;
    color: #00376e;
}
#pantalla-juego .drop-consecuencias {
    background-color: #fce3e3;
    color: #00376e;
}
#pantalla-juego .drag-efectos {
    background-color: #ffdf8f;
    color: #00376e;
}
#pantalla-juego .drag-consecuencias {
    background-color: #ffdf8f;
    color: #00376e;
}
#pantalla-juego #efectos,
#pantalla-juego #consecuencias {
    background-color: #fffee3;
    border-color: #ffdf8f;
}
#pantalla-juego .caja {
    margin-bottom: 56px;
}
#pantalla-juego #caja1,
#pantalla-juego #caja2 {
    background-color: #e0f2ff;
    border-color: #9dd7fc;
}
#pantalla-juego #caja1.hover,
#pantalla-juego #caja2.hover {
    background-color: #e5d7f2 !important;
}
#pantalla-juego #caja3,
#pantalla-juego #caja4 {
    background-color: #fff3f3;
    border-color: #fccaca;
}
#pantalla-juego #caja3.hover,
#pantalla-juego #caja4.hover {
    background-color: #e5d7f2 !important;
}




.placeholder {
        background-color: #F2F2F2;
        outline: 1px solid #333;
        width: 106px;
        height: 165px;
        transition: 1s;
    }
.placeholder.hover {
    background-color: orange;
}
.frase {
        width: 106px;
        height: 20px;
        background-size: cover;
        margin: 10px;
}
.arrastrable {
    padding: 5px 30px;
}
.arrastrable:hover{
    background-color: rgb(225, 140, 29);
}
.efecto,
.consecuencia {
    background-color: #035b8c;
    color: #ffffff;
}
.sobre {
    background-color: bisque;
}
.item-drag {
    background-color: rgb(198, 225, 43);
   /* border: solid 2px rgb(223, 24, 127); */
}
.item-dragstart {
    background-color: rgb(254, 111, 111);
    /*border: double 1px rgb(139, 225, 102);
    display: block;
    opacity: 1;*/
}
.item-dragenter {
    /*background-color: #436991;*/
}
.mostrar .acierto {
    color: #000;
    font-weight: 700;
    background-color: rgb(161 255 187);
}
.mostrar .errado {
    color: #000;
    font-weight: 700;
    background-color: rgb(254, 111, 111);
}
#efectos .efecto,
#consecuencias .consecuencia {
    width: 98%;
    float: left;
    /* height: 65px;*/
    display: flex;
    align-items: center;
    line-height: 1.3;
}
#efectos :nth-child(-n + 5).efecto{
    /*float: left;*/
}