/* GENERAL STYLE */
*{
    margin: 0;
    padding: 0;
    scroll-padding-top: 4rem;
}

/* Variables globales para colores y tipografía base */
:root {
    --bg-color: #000; 
    --font-color: #fff; 
    --secondary-bg-color: #ff4900;
/* Fuente */
    --font: "Inter", "Segoe UI", Arial, sans-serif;
}

/* Contenedor principal del contenido visual */
body {
    /* Color de fondo contenido en la variable --bg-color */
    background-color: var(--bg-color);
    /* Fuente principal usada indicada en variable --font */
    font-family: var(--font);
    /* Color del texto o fuente en la variable --font-color */
    color: var(--font-color);
    /* Hace al body ocupar el 100% de la altura maxima del navegador */
    min-height: 100vh;
    width: 100%;
    overflow: hidden; /* Ocultar scroll inicial hasta que la pantalla de bienvenida se cierre */
}

/* Contenedor principal del proyecto, organiza y limita contenido dentro de la pagina web */
.container {
    /* Espacio interno entre el borde y su contenido, con cuatro valores */
    padding: 0rem 12rem 0 12rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Media utilizada para cambiar la pantalla si los px bajan de 992 */
@media screen and (max-width: 992px) {
    .container {
        padding: 0 2rem;
    }
}
/* Custom scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--secondary-bg-color) #111;
}

::-webkit-scrollbar {
    width: 0.65rem;
    height: 0.65rem;
}

::-webkit-scrollbar-track {
    background: #111;
}

::-webkit-scrollbar-thumb {
    border: 2px solid #111;
    border-radius: 999px;
    background: var(--secondary-bg-color);
}

::-webkit-scrollbar-thumb:hover {
    background: #ff6a2a;
}


/* Mobile polish */
@media screen and (max-width: 576px) {
    .container {
        padding: 0 1rem;
    }

    h1 {
        line-height: 1.08;
    }
}