:root {
    --main-color: 204, 0, 58;
    --white: 255, 255, 255;
    --black: 0, 0, 0;

    --bg-light: 13, 14, 17;
    --bg-dark: 11, 12, 15;

    /* [MEDIA] */
    --navigation-icon-home: url(/img/Icons/Home.svg);
    --navigation-icon-rules: url(/img/Icons/Rules.svg);
    --navigation-icon-factionrules: url(/img/Icons/FactionRules.svg);
    --navigation-icon-codeoflaw: url(/img/Icons/book.svg);
    --navigation-icon-discord: url(/img/Icons/Discord.svg);
    /* [MEDIA] */
}

@font-face {
    font-family: "Sora-Light";
    src: url('/fonts/Sora-Light.ttf')  format('truetype');
}

@font-face {
    font-family: "Sora-SemiBold";
    src: url('/fonts/Sora-SemiBold.ttf')  format('truetype');
}

@font-face {
    font-family: "Sora-Bold";
    src: url('/fonts/Sora-Bold.ttf')  format('truetype');
}

@media (max-width: 900px) {
    #home_page,
    #rules_page {
        max-width: 100%;
    }

    .navigation_content {
        flex-direction: column;
        gap: 1.5rem;
    }

    .nav_item .label {
        font-size: 1.3rem;
    }
}

@media (max-width: 1024px) {
    #home_page,
    #rules_page {
        max-width: 90%;
    }
}