/* Google font imports */
@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* CSS Variables */

:root {
    --primary-color: #228b22; /* Forest Green */
    --secondary-color: #186118; /* Light Green */
    --accent-color: #f2f0ef; /* Off-white */
    --primary-font: "Bagel Fat One", system-ui;
    --secondary-font: "Roboto", sans-serif;
}

/* General styles */

body {
    background-color: var(--accent-color);
    color: black;
    font-family: var(--secondary-font);
}

h1,
h2 {
    font-family: var(--primary-font);
}

/* Navbar styles */

#navbar {
    background-color: var(--secondary-color);
}

.navTitle {
    color: var(--accent-color);
}

#navbar button {
    min-height: 50px;
    font-size: 2em;
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.navLogo {
    height: 50px
}

.nav-link {
    color: var(--accent-color);
    opacity: .5;
}

/* Highlights the text of the current page the user is on. */
.navbar-nav .nav-link.active {
    opacity: 1;
    color: var(--accent-color);
}

/* Footer styles */

#footer {
    color: var(--accent-color);
    background-color: var(--secondary-color);
    min-height: 50px;
}

/* Working in progress styles */

.spinner-border {
    height: 5rem;
    width: 5rem;
    border-width: .5em;
    --bs-spinner-animation-speed: 1.5s;
}

/* Small devices (mobile phone, 576px and below) */
@media screen and (max-width: 576px) {
    
}

/* Medium devices (tablets, 768px and below) */

@media screen and (max-width: 768px) {

}

/* Large devices (992px and below) */

@media screen and (max-width: 991px) {
    .headerTitle {
        display: none;
    }
}

/* Desktops (993px and above) */
@media screen and (min-width: 992px) {
    .navTitle {
        display: none;
    }
}