/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Koulen&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Khand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Krub&display=swap');

:root {
    --light-cream: #FFF9F4;
    --light-brown: #473737;
    --light-blue: #406768;
    --light-light-blue: #6FA9BB;
    --light-green: #869658;
    --light-black: #272421;
    --light-cadet: #25344f;
    --light-pewter: #4c5c7a;
    --light-beige: #F2E7DD;
    font-size: 16px;
    font-family: "Krub", "Roboto", "Segoe UI", sans-serif;
    color: var(--light-black);
}


/* High Contrast Mode */
.high-contrast {
    --light-cream: #FFFFFF;
    --light-brown: #000000;
    --light-blue: #121212;
    --light-light-blue: #121212;
    --light-green: #000080;
    --light-black: #000;
    --light-cadet: #000;
    --light-pewter: #fff;
    --light-beige: #fff;

    font-family: "Arial Black", sans-serif;
    font-size: 20px;
    color: #FFFFFF !important;
    background-color: #000000 !important;
}

.high-contrast #ghibli-form {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border: 1px solid #FFFFFF !important;
}

.high-contrast summary,
.high-contrast aside,
.high-contrast .movie-container {
    background-color: #000000 !important;
    color: #FFFFFF !important;
}

.high-contrast body {
    background: #000000 !important;
    color: #FFFFFF !important;
    text-transform: uppercase !important;
}

.high-contrast button {
    text-transform: uppercase !important;
}

.high-contrast a,
.high-contrast h3 {
    color: #FFFF00 !important;
    text-decoration: underline !important;
}

.high-contrast button,
.high-contrast .ghibli-btn {
    background: #FFFF00 !important;
    color: #000000 !important;
    border: 3px solid #FFFFFF !important;
}

.high-contrast .navbar-logo,
.high-contrast .footer-logo {
    filter: invert(1);
}


.contrast-toggle {
    position: fixed;
    bottom: 7rem;
    right: 20px;
    z-index: 10000;
    padding: 10px 15px;
    background-color: var(--light-green);
    color: var(--light-cream);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Koulen', sans-serif;
    font-size: 1.1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.contrast-toggle:hover {
    background-color: var(--light-blue);
}