/* 

bass.css
This file contains shared styles for all pages for 
stuff such as colors, fonts, and navbar

Author: Luke Wulf
Date: August 16, 2024

*/

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Text:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&family=Black+Ops+One&display=swap');

:root {
    --color-background: #1a1a1a;
    --color-text: #f3f3f3;
    --color-text-dark: #e0e0e0;
    --color-primary: #51bd0e;
    --color-primary-light: #84ed43;
    --color-primary-dark: #3b8f07;
    --color-secondary: #934B00;
    --color-secondary-light: #b46108;
    --color-secondary-dark: #5f2c00;
    --color-accent: #d296f8;
    --header-font: "Allerta Stencil", sans-serif;
    --body-font: 'Noto Sans', sans-serif;
}

html {
    font-size: 16px;
    font-family: var(--body-font);
    background-color: var(--color-background);
    color: var(--color-text);
}

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

body > *:not(footer) {
    flex-grow: 1;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--header-font);
}

a {
    text-decoration: none;
    color: inherit;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

nav ul {
    display: flex;
    list-style: none;
    background-color: var(--color-background);
}

nav ul section {
    display: flex;
    width: 100%;
}

nav ul section li a {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 60px;
    align-items: center;
    padding: 1rem 1.5rem;
    color: var(--color-text);
    font-size: 1.4rem;
    font-family: var(--header-font);
    font-weight: 700;
    transition: background-color 0.4s, font-size 0.25s;
}

nav ul img {
    max-height: 60px;
    padding: 0.65rem;
}

nav ul li a:hover {
    background-color: var(--color-primary);
    font-size: 1.6rem;
}

/* Responsive styles for mobile view */
@media (max-width: 800px) {

    nav ul {
        flex-direction: column;
    }

    nav ul section {
        flex-direction: column;
    }

    nav ul section li {
        height: 0px;
        overflow: hidden;
        transition: height 0.4s ease-in-out; /* Smooth transition for sliding */
    }

    nav ul section li a {
        font-size: 1.2rem;
    }

    nav ul img {
        align-self: center;
        cursor: pointer;
        max-height: 60px;
        max-width: 60px;
    }
}

footer {
    background-color: var(--color-background);
    color: var(--color-background);
    padding: 2rem;
    text-align: center;
}

footer p {
    color: var(--color-text);
    font-size: 1.2rem;
}

#fader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    pointer-events: none;
    background-color: var(--color-background);
    animation-duration: 300ms;
    animation-timing-function: ease-in-out;
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

#fader.fade-out {
    opacity: 0;
    animation-name: fadeOut;
}

#fader.fade-in {
    opacity: 1;
    animation-name: fadeIn;
}