@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root{
    --color-principal: #ff8000;
    --color-principal-seleccion: rgba(255, 128, 0, 0.302);
    --color-gris-propio: rgb(176, 176, 176);
    --color-gris-apagado: #3e3e3e;
    --color-oscuro: #1b1b1b;
    --color-fondo: #0c0c0c;

    --color-principal-difuminado: rgba(255,128,0, 0.5);
    --color-gris-apagado-difuminado: rgba(62, 62, 62, 0.5);
    --color-fondo-difuminado: rgb(12, 12, 12, 0.5);
}

::selection{
    background-color: var(--color-principal-seleccion);
}

* {
    padding: 0;
    margin: 0;

    font-family: "Inter", "sans-serif";
}

body{
    width: 100%;
    height: 100vh;
}

.etiqueta-texto{
    font-size: 1.5vh;

    text-transform: uppercase;
    letter-spacing: 0.5vh;
    color: var(--color-principal);
}

.etiqueta-texto-gris{
    font-size: 1.5vh;

    text-transform: uppercase;
    letter-spacing: 0.5vh;
    color: var(--color-gris-propio);
}

.titulo{
    color: white;
    font-size: 5vh;
    font-weight: bold;
}

.titulo-2{
    color: white;
    font-size: 2.5vh;
    font-weight: bold;
}

.titulo-3{
    color: white;
    font-size: 1.75vh;
    font-weight: bold;
}

.texto-difuminado{
    text-align: justify;
    color: var(--color-gris-propio);
}

/* Aniamciones de la página web */

.elemento-animacion{
    opacity: 0;
    transform: translateY(30px);
    transition: 
        opacity 0.7s ease-out,
        transform 0.7s ease-out;
}

.elemento-animacion.visible{
    opacity: 1;
    transform: translateY(0);
}

.elemento-animacion.delay-1{
    transition-delay: 0.1s;
}

.elemento-animacion.delay-2{
    transition-delay: 0.2s;
}

.elemento-animacion.delay-3{
    transition-delay: 0.3s;
}

.elemento-animacion.delay-4{
    transition-delay: 0.4s;
}

.elemento-animacion.delay-5{
    transition-delay: 0.5s;
}

.elemento-animacion.delay-6{
    transition-delay: 0.6s;
}

/* ============================================= */
/* RESPONSIVE - TABLET Y MÓVIL                    */
/* ============================================= */
 
/* Tablet */
@media (max-width: 1024px){
    html{
        font-size: 90%;
    }
}
 
/* Móvil */
@media (max-width: 600px){
    html{
        font-size: 85%;
    }
 
    body{
        height: auto;
        min-height: 100vh;
    }
}