:root {
    --section-title: clamp(1rem, 1.2rem + 1vh, 2.5rem);
    --h2-title: clamp(0.8rem, 1rem + 0.8vh, 2rem);
    --p-title: clamp(0.8rem, 0.8rem + 0.5vh, 1.5rem);
}

/*==========================================================
        # BREAKPOINTS (referencia)
    No se pueden usar var() dentro de @media, así que estos
    valores quedan documentados aquí y se replican tal cual
    en los bloques @media de cada archivo CSS.

    Desktop pequeño : max-width: 1200px
    Tablet          : max-width: 1024px
    Móvil           : max-width: 600px
==========================================================*/

@font-face {
    font-family: "body-font";
    src: url("../../resources/fonts/Montserrat-Light.otf");
}
html {
    scrollbar-color: gray #ffffff00;
}

body {
    border: none;
    margin: 0 auto;
    font-family: "body-font";
    background-color: #0f0f0f;
    color: white;
    width: 100%;
    max-width: 2700px;
}