@font-face {
    font-family: 'Roboto Italic';
    src: url('static/fonts/Roboto-Italic-VariableFont_wdth\,wght.ttf'), format('wght.ttf');
}

@font-face {
    font-family: 'Roboto';
    src: url('static/fonts/Roboto-VariableFont_wdth\,wght.ttf'), format('wght.ttf');
}

:root {
    --ella-green: #1a4d2e;
    --ella-yellow: #ffcc00;
    --ella-brown: #8d7b68;
    --ella-light-brown: #f4f1ee;
    --btn-primary: brown;
}

body {
    font-family: 'Roboto', sans-serif;
    color: #333;
}


.brand-name {
    font-family: "Rubik Maze", system-ui;
    font-weight: 400;

}

.yellow-text {
    color: var(--ella-yellow) !important;
}

.green-text {
    color: var(--ella-green) !important;
}



@media screen and (max-width: 768px) {
    .brand-name {
        font-family: "Rubik Maze", system-ui;
        font-weight: 400;
        font-size: 1.5rem;
    }

    .navbar {
        text-align: center !important;
    }
}

/* Navbar Styling */
.active {
    color: white !important;
    font-family: 'Roboto Italic', sans-serif;
    font-size: 1rem;
    text-decoration-line: underline;
    text-underline-offset: 10px;
    text-decoration-color: var(--ella-yellow);
    text-decoration-thickness: 4px;
    text-decoration-style: solid;
}

.navbar {
    background-color: var(--ella-green);
}

.nav-link {
    color: white !important;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.nav-link :active {
    color: white !important;
}

.nav-link:hover {
    color: var(--ella-yellow) !important;
    font-family: 'Roboto Italic', sans-serif;
    font-size: 1rem;
    text-decoration-line: underline;
    text-underline-offset: 10px;
    text-decoration-color: var(--ella-yellow);
    text-decoration-thickness: 4px;
    text-decoration-style: solid;
    transition: all 0.7s ease-in-out;


}

.btn-portal {
    background-color: var(--ella-yellow);
    color: var(--ella-green);
    font-family: 'Roboto Italic', sans-serif;
    font-weight: bold;
    border-radius: 20px;
    padding: 5px 20px;
}


.brd-4 {
    border-radius: 0.4rem;
}

.btn-primary {
    background-color: var(--ella-yellow);
    color: var(--ella-green);
    border: none;
    padding: 12px 30px;
    font-weight: bold;
}

.btn-primary:hover {
    background-color: var(--ella-brown);
    color: white;
    border: none;
    padding: 12px 30px;
    font-weight: bold;
}

.btn-primary:active {
    background-color: var(--ella-brown);
    color: white;
    border: none;
    padding: 12px 30px;
    font-weight: bold;
}

.btn-primary:focus {
    background-color: var(--ella-brown);
    color: white;
    border: none;
    padding: 12px 30px;
    font-weight: bold;
}