* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Courier New', Courier, monospace;
}

/*Reiniciamos estilos*/

body {
    background-image: url("../img/capitolio.jpg");
    background-size: cover;
}

#menu {
    /*Confecciona el aspecto del menú*/
    border: 4px solid #fff;
    box-shadow: #fff 0px 0px 15px;
    width: 20%;
    padding: 20px;
    position: absolute;
    top: 25%;
    left: 5%;

}

#menu nav ul li p {
    /*Da formato al texto del menú*/
    color: #fff;
    line-height: 1.5em;
    cursor: pointer;

}

#menu nav ul li p:hover {
    /*Efecto hover cuando se pasa el ratón por un elemento del menú*/
    color: #e35801;
    text-shadow: 0px 0px 15px #ffff;
}

.menuCerrado {
    /*Posición del menú cuando está cerrado*/
    transform: translateX(-270px);
}

.menuAbierto {
    /*Posición del menú cuando está abierto*/
    transform: translateX(0px);
}

#imagenPJ {
    /*Posición de las imágenes de los personajes*/

    position: absolute;
    top: 2%;
    left: 65%;
    width: 30%;
}

.divPJ {
    /*Posición del div del personaje cerrado*/
    transform: translateY(-1500px);
}

.divPJAbierto {
    /*Posición del div del personaje abierto*/
    transform: translateY(0px);
}

img {
    /*Tamaño global de las imágenes*/
    width: 50%;

}

#pm {
    /*Tamaño de la imagen de Peeta*/
    width: 36%;
}

#gh {
    /*Tamaño de la imagen de Gale*/
    width: 36%;
}

#textoPJ {
    /*Configuraciónd el div del texto de los personajes*/
    border: 2px solid #fff;
    width: 35%;
    color: #fff;
    text-align: justify;
    position: absolute;
    left: 25%;
    top: 2%;
    padding: 10px;
}

#nombre {
    /*Configuración del div del nombre de los personajes*/
    font-family: 'Courier New', Courier, monospace;
    color: #ff0000;
    font-size: 35pt;
    transform: rotate(-90deg);
    /*Rota el texto verticalmente de abajo a arriba*/
    position: absolute;
    top: 250px;
    left: 0%;
}

/*Aquí están los estilos para la animación de máquina de escribir*/
#textoKatniss {
    overflow: hidden;
    border-right: .15em solid orange;
    /* cursor de máquina de escribir */
    white-space: nowrap;
    /* Evita que el texto se divida en varias líneas */
    letter-spacing: .15em;
    /* Espacio entre letras */
    animation: escribir 3.5s steps(40, end), parpadeo-cursor .75s step-end infinite;
}

@keyframes escribir {

    /*'escribir' es el nombre de la animación*/
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes parpadeo-cursor {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: orange;
    }
}

#textoPeeta {
    overflow: hidden;
    border-right: .15em solid orange;
    /* cursor de máquina de escribir */
    white-space: nowrap;
    /* Evita que el texto se divida en varias líneas */
    letter-spacing: .15em;
    /* Espacio entre letras */
    animation: escribir 3.5s steps(40, end), parpadeo-cursor .75s step-end infinite;
}

@keyframes escribir {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes parpadeo-cursor {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: orange;
    }
}

#textoHaymitch {
    overflow: hidden;
    border-right: .15em solid orange;
    /* cursor de máquina de escribir */
    white-space: nowrap;
    /* Evita que el texto se divida en varias líneas */
    letter-spacing: .15em;
    /* Espacio entre letras */
    animation: escribir 3.5s steps(40, end), parpadeo-cursor .75s step-end infinite;
}

@keyframes escribir {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes parpadeo-cursor {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: orange;
    }
}

#textoGale {
    overflow: hidden;
    border-right: .15em solid orange;
    /* cursor de máquina de escribir */
    white-space: nowrap;
    /* Evita que el texto se divida en varias líneas */
    letter-spacing: .15em;
    /* Espacio entre letras */
    animation: escribir 3.5s steps(40, end), parpadeo-cursor .75s step-end infinite;
}

@keyframes escribir {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes parpadeo-cursor {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: orange;
    }
}

#textoSnow {
    overflow: hidden;
    border-right: .15em solid orange;
    /* cursor de máquina de escribir */
    white-space: nowrap;
    /* Evita que el texto se divida en varias líneas */
    letter-spacing: .15em;
    /* Espacio entre letras */
    animation: escribir 3.5s steps(40, end), parpadeo-cursor .75s step-end infinite;
}

@keyframes escribir {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes parpadeo-cursor {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: orange;
    }
}

/*Menú sinopsis*/

#menuSinopsis {
    /*Configuración del menuSinopsis*/

    border: 2px solid #fff;
    box-shadow: #fff 0px 0px 15px;
    width: 10%;
    transform: perspective(1px) rotateX(1deg);
    /*Aspecto del div del menúSinopsis*/
    position: absolute;
    top: 594px;
    left: 2%;

}

#menuSinopsis p {
    /*Configuración del texto dentro de sinopsis*/
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    cursor: pointer;
    /*Esto se aplica para dar aspecto de botón*/
}

#menuSinopsis p:hover {
    /*Efecto del texto al pasar sobre él*/
    color: #e35801;
    text-shadow: 0px 0px 15px #ffff;
}

#sinopsis {
    /*Configuración del div que contiene la sinopsis*/
    width: 35%;
    border: 2px solid #fff;
    box-shadow: #fff 0px 0px 15px;
    padding: 10px;
}

.sinopsis {
    /*Posición del div de sinopsis cuando está cerrado*/
    transform: translateY(-1500px);
}

#sinopsis p {
    /*Configuración del texto de sinopsis*/
    color: #fff;
    text-align: justify;

}

.mostrarSinopsis {
    /*Posición del div sinopsis cuando está abierto*/
    margin: 0 auto;
    margin-top: 5%;
    transform: translateY(0px);
}

.informacionCerrado {
    /*Posición del div información cuando está cerrado*/
    transform: translateY(-1500px);

}