/* 
PLAETA DE COLORES
Lila oscuro #210F37 
Lila claro #4F1C51
Carne oscuro #A55B4B
Carne claro #DCA06D
*/

html{/* para que el desplazamiento sea suave */
    scroll-behavior: smooth;
}

body{
    background-color: #210F37;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:5vh;
    margin: 0;
    position: relative;

    & header{
        width: 100%;

        & #titprinc{
            margin: 0;
            background-color: #160a25;
            font-family: Arial, Helvetica, Montserrat, sans-serif;
            width: 100vw;
            color: beige;
            font-size: 50px;
            text-align: center;
            padding-top: 40px;
            padding-bottom: 40px;
        }

        & #hamburguesa{
            position: fixed;
            left: 20px;
            top: 20px;
            z-index:1;
            height: 30px;
            width: 30px;
            cursor: pointer;

            background-image: url(/img/menu.png);
            background-position: center;
            background-size:contain;
            background-repeat: no-repeat;
        }
    
        & #contenido{
            z-index: 2;
            position: fixed;
            top: 0;
            left: 0;
            background-color: #160a25;
            box-shadow: 0px 1px 20px 0px black;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            width: 0; /* Hay que alargarlo hasta 20vw */
            overflow: hidden;
            transition: 0.5s;
            
            & #lista{
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;
                gap:20px;
                height: 100%;
                width: 100%;
    
                list-style: none;
                font-family: Arial, Helvetica, Montserrat, sans-serif;
    
                & h3{
                    margin-top: 40px;
                    color: beige;
                    font-size: 20px
                }
    
                & a{
                    font-size: 18px;
                    color:beige;

                    &:hover{
                        color:#DCA06D;
                    }
                }
    
                a:link, a:visited{
                    text-decoration: none;
                }
            }
        }
    }

    & main{
        width: 100%;

        & .ejercicio{
            z-index: 1;
            position: relative;
            display: flex;
            height: 80vh;
            width: 80vw;
            margin: 50px auto;
            border-radius: 10px;
            text-align: center;
            transition: 0.5s;
            overflow: hidden;
            background-color: white;

            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;

            & h1{
                position: absolute;
                bottom: -55px;

                display: flex;
                align-items: center;
                justify-content: center;
                
                height: 35%;
                width: 100%;

                background-color: #00000099;

                color: beige;
                font-size: 50px;
                font-family: Arial, Helvetica, Montserrat, sans-serif;
            }

            & .js{
                position: absolute;
                top: 10px;
                left: 10px;
                font-size: 40px;
                color: black;
                background-color: #f7d800;
                font-family: Arial, Helvetica, sans-serif;
                border-radius: 10px;
                width: 70px;
                height: 70px;
                display: flex;
                align-items: flex-end;
                justify-content: flex-end;
                font-weight: 600;
            }

            &:hover{
                transform: scale(1.05);
            }

            &:link, &:visited{
                text-decoration: none;
            }
        }

        & #ejercicio1{
            background-image: url(/img/sintaxis_basica.png);
        }

        & #ejercicio2{
            background-image: url(/img/Estructuras_de_control_basicas.png);
        }

        & #ejercicio3{
            background-image: url(/img/funciones.png);
        }

        & #ejercicio4{
            background-image: url(/img/strings_numbers.png);
        }

        & #ejercicio5{
            background-image: url(/img/arrays.png);
        }

        & #ejercicio6{
            background-image: url(/img/arrays_extra.png);
        }

        & #ejercicio7{
            background-image: url(/img/estilos_eventos.png);
        }

        & #ejercicio8{
            background-image: url(/img/estilos_eventos_extra.png);
        }

        & #ejercicio9{
            background-image: url();
        }

        & #ejercicio10{
            background-image: url();
        }

        & #ejercicio11{
            background-image: url();
        }

        & #ejercicio12{
            background-image: url();
        }

        & #ejercicio13{
            background-image: url();
        }

        & #ejercicio14{
            background-image: url();
        }

        & #ejercicio15{
            background-image: url();
        }
    }
}