html {
    overflow-y: scroll;
    overflow-x: hidden;
}


body {
    background-color: rgb(0, 0, 0);
}

.container {
    position: relative;
    max-height: fit-content;
    max-width: fit-content;
    padding: .5rem;
    margin-top: 2%;
    background-color: rgb(0, 0, 0);
}


.slider2,
.slider3,
.slider4,
.slider5 {
    display: none
}


.tituloPresentacion {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/*TODO: Coloque el fondo de la pantalla para que quedara uniforme con la anteriores entregas*/
.fondo {
    width: 100vw;
    height: 100vh;
    background-image: url(../assets/img/background.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
}

.titulo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 1rem;
    padding: 2rem;
    color: #FFF;
}

.subtitulo {
    color: #EB8170;
}

.responsive {
    width: 80%;
    height: auto
}

.galaxia {
    width: 65vw;
    height: auto;
    margin: 26px auto;
}

.btn-primario {
    background-color: #9176AB;
    border-bottom: .5rem solid #4E3C64;
    width: 150px;
    height: 3rem;
    vertical-align: 50%;
    padding-left: .8rem;
    padding-right: .8rem;
    padding-top: .2;
    padding-bottom: .8;
    border-radius: 10%;
    font-family: 'Calibri';
    font-size: xx-large;
    cursor: pointer
}

.btn-primario:hover {
    transform: scale(1.1, 1.1);
    transition: transform 0.2s ease-in-out;
}

.btn-primario:not(:hover) {
    transform: scale(1, 1);
    transition: transform 0.2s ease-in-out;
}


.btn-secundario:hover {
    transform: scale(1.1, 1.1);
    transition: transform 0.2s ease-in-out;
}

.btn-secundario:not(:hover) {
    transform: scale(1, 1);
    transition: transform 0.2s ease-in-out;
}



.btn-secundario {
    background-color: #9176AB;
    border-bottom: .5rem solid #4E3C64;
    width: 150px;
    height: 3rem;
    padding-left: .8rem;
    padding-right: .8rem;
    padding-top: .2;
    border-radius: 10%;
    font-family: 'Calibri', cursive;
    font-size: xx-large;
    cursor: pointer
}

.introduccion {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: column;
    background-color: white;
    border: 0.5rem solid #EB8170;
    border-radius: 3vh;

}

.introduccion2 {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: column;
    background-color: white;
    border: 0.5rem solid #EB8170;
    border-radius: 3vh;

}

.contenedor-texto {
    position: absolute;
    /* Con este truquito puedes center los elementos siempreeeeeeeee al centro de la ventana*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
}

.fondo-titulo {
    position: absolute;
    top: 2%;
    left: 10%;
    right: 10%;
}

.texto-titulo {
    position: absolute;
    top: 20%;
    left: 10%;
    right: 10%;
    color: #FFCB00;
    text-shadow: 3px 3px 3px white;
}

.text-justify {
    text-align: justify;
    font-family: 'Trebuchet MS', sans-serif;
}

.boton-inferior {
    background-color: #9176AB;
    border-bottom: .5rem solid #4E3C64;
    width: 12rem;
    height: 3rem;
    padding-left: .8rem;
    padding-right: .8rem;
    padding-top: .2;
    border-radius: 10%;
    font-family: 'Calibri', cursive;
    font-size: 1.5em;
    cursor: pointer
}

.espacio {
    border: 2px solid black;
    background-color: black;
}

.lineatiempo {
    margin-top: 45vh
}

video {
    width: 40vw;
    margin: 0px auto;
    height: fit-content;
}


@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    /* CSS */

    .btn-primario,
    .btn-secundario {
        font-size: 1.6em;
    }

    .introduccion div p {
        font-size: 0.8em
    }

    .introduccion2 div p {
        font-size: 0.8em
    }

    .introduccion {
        width: 90vw !important;
        flex-direction: column;
    }

    .introduccion2 {
        width: 90vw !important;
        flex-direction: column;
    }

    .contenedor-texto {
        transform: translate(-50%, -10%);
    }
}


@media (min-width: 481px) and (max-width: 767px) {

    /* CSS */
    .btn-primario,
    .btn-secundario {
        font-size: 1.6em;
    }

    .introduccion div p {
        font-size: 0.8em
    }

    .introduccion2 div p {
        font-size: 0.8em
    }

    .introduccion {
        width: 90vw !important;
        flex-direction: row;
    }

    .introduccion2 {
        width: 90vw !important;
        flex-direction: column;
    }

    .contenedor-texto {
        transform: translate(-50%, -9%);
    }
}


@media only screen and (max-width: 600px) {

    .titulo {
        transform: translate(-50%, -50%);
    }

    .introduccion {
        width: 90vw;
        font-size: 0.9em
    }

    .texto-titulo {
        font-size: 1em
    }

    .responsive {
        width: 70%;
        height: auto
    }

    video {
        width: 90vw;
        margin: 0px auto;
    }

}