:root {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    --font-size: 16px;
    --foreground: #0a0a0a;
    --accent-foreground: #030213;

    --color-primary: rgb(240, 177, 0);
    --color-green-500: rgb(0, 201, 80);
    --color-red-500: rgb(251, 44, 54);
    --color-yellow-500: rgb(240, 177, 0);
    --color-yellow-600: rgb(208, 135, 0);
    --color-slate-300: rgb(202, 213, 226);
    --color-slate-400: rgb(144, 161, 185);
    --color-slate-500: rgb(98, 116, 142);
    --color-slate-700: rgb(49, 65, 88);
    --color-slate-800: rgb(29, 41, 61);
    --color-slate-900: rgb(15, 23, 43);
    --color-slate-950: rgb(2, 6, 24);
    --background-content: rgb(15, 23, 43);
    --background: rgb(2, 6, 24);
    --card-foreground: rgb(10, 10, 10);
}
body {
    background-color: var(--background);
    color: var(--color-slate-400);
}
/* Margem adicionada para o elemento não ficar escondido atrás da navbar, que tem posição fixa */
main {
    margin-top: 80px;
}
.py-7 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.fs-7 {
    font-size: 0.75rem;
}
/**********************************************************************************************************************/
/***                                                   Nav styles                                                   ***/
/**********************************************************************************************************************/
nav {
    background-color: var(--background-content) !important;
    border-bottom: 1px solid var(--color-slate-800);
}
nav * {
    color: white !important;
}
.navbar-brand {
    font-size: 1.5rem;
}
.navbar-brand em {
    color: var(--color-primary) !important;
    font-style: normal;
}
.nav-link.active {
    color: var(--color-primary) !important;
}
.nav-link:hover {
    color: var(--color-primary) !important;
}
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
    border-color: white !important;
    border: none;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.btn-login {
    color: var(--color-slate-900) !important;
    background-color: var(--color-primary);
    font-size: 14px;

    &:hover {
        background-color: var(--color-yellow-600) !important;
    }
    & .bi-person {
        color: var(--color-slate-900) !important;
    }
}
#navbarToggler {
    & ul {
        @media (max-width: 991px) {
            border-top: 1px solid var(--color-slate-800);
            border-bottom: 1px solid var(--color-slate-800);
        }
    }
}
.nav-toggler {
    color: #fff !important;
}
/**********************************************************************************************************************/

/**********************************************************************************************************************/
/***                                               Page header styles                                               ***/
/**********************************************************************************************************************/
#page-header {
    background-color: var(--background-content);
    & h1 {
        font-size: 3rem;

        @media (max-width: 991px) {
            font-size: 2.25rem;
        }
    }
}
/**********************************************************************************************************************/

/**********************************************************************************************************************/
/***                                                 Footer styles                                                  ***/
/**********************************************************************************************************************/
footer {
    background-color: var(--background-content);
    border: 1px solid var(--color-slate-800);
    color: var(--color-slate-400);
    margin-top: 80px;
    & h4 {
        font-size: 1rem;
    }

    & ul {
        list-style: none;
    }
}
.footer-text {
    color: var(--color-slate-400);
}
.footer-link {
    text-decoration: none;
    text-transform: none;
    color: inherit;

    & .bi {
        font-size: 1.25rem;
    }

    &:hover {
        color: var(--color-yellow-500);
    }
}
.copyright {
    border-top: 1px solid var(--color-slate-800);
    margin-top: 32px;
    padding-top: 32px;
}
/**********************************************************************************************************************/