* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-size: var(--small-font-size);
    font-family: primary_font;
    color: var(--trinary-color);
}

@font-face {
    font-family: primary_font;
    src: url(../fonts/Comfortaa/Comfortaa-VariableFont_wght.ttf);
}

:root {

    /* FONTS VARIABLES */

    --huge-font-size: 4vw;

    --big-font-size: 3vw;

    --medium-font-size: 2vw;

    --intermediate-font-size: 1.5vw;

    --small-font-size: .9vw;

    --tiny-font-size: .7vw;

    /* COLORS VARIABLES */

    --primary-color: #0B1020;

    --secondary-color: #8B5CF6;

    --trinary-color: #F8FAFC;

    --surface-color: #121A2F;

    --muted-color: #94A3B8;

}

@media (max-width:1443px) {

    :root {

        --huge-font-size: 5vw;

        --big-font-size: 4vw;

        --medium-font-size: 3vw;

        --intermediate-font-size: 2.5vw;

        --small-font-size: 1.2vw;

        --tiny-font-size: 1vw;
    }   

}

@media (max-width:1025px) {

    :root {

        --huge-font-size: 6vw;

        --big-font-size: 5vw;

        --medium-font-size: 4vw;

        --intermediate-font-size: 3.5vw;

        --small-font-size: 1.6vw;

        --tiny-font-size: 1.3vw;
    }   

}

@media (max-width:768px) {

    :root {

        --huge-font-size: 7vw;

        --big-font-size: 6vw;

        --medium-font-size: 5vw;

        --intermediate-font-size: 4.5vw;

        --small-font-size: 2.3vw;

        --tiny-font-size: 1.7vw;
    }   

}

@media (max-width:500px) {

    :root {

        --huge-font-size: 8vw;

        --big-font-size: 7vw;

        --medium-font-size: 6vw;

        --intermediate-font-size: 5.5vw;

        --small-font-size: 3vw;

        --tiny-font-size: 2.3vw;
    }   

}

p {
    line-height: clamp(2.5rem, 2.4vw + 1.6rem, 2rem);
}

html {
    scroll-behavior: smooth;
}




/* ======================================= */
/* =================================== NAV */
/* ======================================= */




nav {
    width: 100%;
    height: auto;
    background-color: rgba(255, 255, 255, 0);
    position: fixed;
    top: 0px;
    left: 0px;
    padding: 20px 15%;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

@media (max-width:1443px) {
    nav {
        padding: 20px 10%;
    }
}

@media (max-width:1025px) {
    nav {
        padding: 20px 5%;
    }
}

nav > a.logo {
    width: auto;
    height: auto;
}

nav > a.logo img {
    width: 200px;
    height: auto;
    object-fit: cover;
}



/* ======================================= */
/* =================================== NAV */
/* ======================================= */




#particles-js {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}