/* Definición de variables de color */
:root {
    --azul-rey: #013473; /* Color predominante */
    --verde: #218341; /* Color para botones */
    --rojo: #E83417; /* Color resaltante */
    --hueso: #F9F9F9; /* Color de fondo */
    --blanco: #FFFFFF; /* Color de letras */
    --morado: #EE82EE; /* Color para áreas específicas */
    --negro: #000000; /* Color para texto */
    --gris: #808080;
    --talasofobia: #0C0D23; /*color base para los platillos menu*/
}


.familia {
    color: var(--azul-rey);
    text-align: center;
}

/* Estilo para la imagen chica */
.imagen-chica {
    width: 50%; /* Ancho del video */
    height: 100%; /* Ocupa toda la altura del contenedor padre */
    overflow: hidden; /* Oculta cualquier contenido que sobresalga */
    display: flex;
    justify-content: center;
}

.scitech{
    text-align: center;
}

.scitech h1{
    color: var(--negro);
}

.text-content p{
    font-weight: bold;
}

@media(min-width: 1920px){
    .sport-content{
        border: solid 2.5rem var(--azul-rey);
    }
    
    .text-content p{
        top: 0rem;
    }
    
    .familia {
        font-size: 5rem;
    }
    
    .video-grande{
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: auto;
        margin-bottom: 10rem;
    }
    
    .scitech{
        margin-bottom: 10rem;
    }
    
    .scitech h1{
        font-size: 7rem;
    }
}

@media(min-width: 1200px) and (max-width: 1919px){
    .sport-content{
        border: solid 2.5rem var(--azul-rey);
    }
    
    .text-content p{
        top: 3.5rem;
    }
    
    .familia {
        font-size: 5rem;
    }
    
    .video-grande{
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: auto;
        margin-bottom: 10rem;
    }
    
    .scitech{
        margin-bottom: 10rem;
    }
    
    .scitech h1{
        font-size: 5rem;
    }
}

@media(min-width: 900px) and (max-width: 1199px){
    .sport-content{
        border: solid 2.5rem var(--azul-rey);
    }

    .video-chico{
        margin-top: 3.5rem;
    }
    
    .text-content p{
        top: 1rem;
    }
    
    .familia {
        font-size: 5rem;
    }
    
    .video-grande{
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: auto;
        margin-bottom: 10rem;
    }
    
    .scitech{
        margin-bottom: 10rem;
    }
    
    .scitech h1{
        font-size: 4rem;
    }
}

@media(min-width: 600px) and (max-width: 899px){
    .sport-content{
        border: solid 2.5rem var(--azul-rey);
    }

    .video-chico{
        margin-top: 0rem;
    }

    .text-content{
        bottom: 3rem;
    }
    
    .text-content p{
        top: 0rem;
        font-size: 3rem;
    }
    
    .familia {
        font-size: 5rem;
    }
    
    .video-grande{
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: auto;
        margin-bottom: 10rem;
    }
    
    .scitech{
        margin-bottom: 10rem;
    }
    
    .scitech h1{
        font-size: 4rem;
    }
}

@media(min-width: 320px) and (max-width: 599px){
    .sport-content{
        border: solid 1.5rem var(--azul-rey);
        margin-top: 5.6%;
        margin-bottom: 0%;
        height: 47rem;
    }
    
    /* Estilo para la imagen chica */
    .imagen-chica {
        width: 100%; /* Ancho del video */
        height: 100%; /* Ocupa toda la altura del contenedor padre */
        overflow: hidden; /* Oculta cualquier contenido que sobresalga */
        display: flex;
        justify-content: center;
    }
    /* Estilo para la imagen chica celular */
    .imagen-chica img{
        width: 100%; /* Ancho del video */
        height: 100%; /* Ocupa toda la altura del contenedor padre */
        overflow: hidden; /* Oculta cualquier contenido que sobresalga */
        display: flex;
        justify-content: center;
    }

    .video-chico{
        margin-top: 2rem;
    }

    .text-content{
        height: 50%;
        bottom: 0rem;
    }
    
    .text-content p{
        top: 0rem;
        font-size: 1.5rem;
        left: 0%;
        width: 100%;
    }
    
    .familia {
        font-size: 3rem;
    }
    
    .video-grande{
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: auto;
        margin-bottom: 0%;
    }
    
    .scitech{
        margin-bottom: 5rem;
    }
    
    .scitech h1{
        font-size: 160%;
        font-family: monaco;
    }
}