:root {
    /* COLORS */
    --background-primary: oklch(15.434% 0.00002 271.152);
    --background-secondary: #0e1012;
    --button-background: oklch(0.1624 0.0788 307.52);
    --text-primary: oklch(1 0 0);
    --text-secondaary: oklch(1 0 0);
    --accent-primary: oklch(0.6652 0.1967 353.05);
    --accent-secondary: oklch(0.4169 0.1479 325.25);
    --nav-primary: oklch(15.434% 0.00002 271.152 / 0.151);

    --button-primary: #41414170;
    --border-primary: oklch(0.3012 0 0);
    --button-hover-primary: #2525254f;

    /* FONTS */
    --ff-base: "Inter", sans-serif;
    --ff-heading: "Roslindale Condensed", serif;

    /* FONT WEIGHTS*/
    --fw-regular: 400;
    --fw-semi-bold: 600;
    --fw-bold: 800;

    /* RADII */
    --radius-button: 16px;
    --radius-pill: 100px;


    /* BUTTONS */

}

@media (max-width: 1710px) {
    .hero-section .video-container {
        width: 100%;
    }

    .hero-section .content .title {
        font-size: 8rem;
    }
}

@media (max-width: 1000px) {
    .navbar {
        opacity: 0;
        pointer-events: none;
        z-index: -999;
    }

    .mobile-navbar {
        opacity: 1;
        pointer-events: all;
        z-index: 998;
    }

    .dropdown {
        width: calc(100% - 150px);
        top: 90px;
        border-radius: 24px;
        padding: 60px 0px;
    }

    .dropdown li {
        padding: 10px 20px;
        border-radius: 12px;

        transition: background 300ms;
    }

    .dropdown li:hover {
        background: var(--button-hover-primary);
    }
}

@media (max-width: 400px) {

    .dropdown {
        width: calc(100% - 80px);
        top: 80px;
    }

    .hero-section {
        position: relative;
        width: 100%;
        height: 100vh;
        align-items: center;
        justify-content: center;
        top: 20px;
    }

    .hero-section .video-container {
        width: 55%;
        border-radius: 24px;
    }

    .hero-section .content {
        gap: 40px;
    }

    .hero-section .content .title {
        font-size: 2.5rem;
    }

    .button {
        border-radius: var(--radius-button);
    }
}