/*
Auther: Kaden Reece Hazelton (PythonKing)
Date: 02/25/2026
*/
body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: fit-content;
}
@keyframes hero_bg_scroll {
    0% {
        background-position: 0px center;
    }
    100% {
        background-position: -3238px center;
    }
}
header {
    width: 100%;
    height: 8rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    & ul {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        list-style: none;
    }
    & li {
        width: fit-content;
        height: fit-content;
        margin-left: 2ch;
        margin-right: 2ch;
    }
    & h1 {
        margin: 0;
        padding: 0;
        font-size: 2.5rem;
        text-align: center;
    }
    & h2 {
        margin: 0;
        padding: 0;
        font-size: 1.5rem;
        text-align: center;
    }
    & img {
        margin: 0;
        padding: 0;
        width: auto;
        height: 6rem;
    }
}
main {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    & .banner {
        margin: 0;
        padding: 0;
        width: 100%;
        height: fit-content;
        text-align: center;
        align-content: center;
        padding: 0.5ch 0.0ch 0.5ch 0.0ch;
    }
    & h1.banner {
        font-size: 2rem;
        text-decoration: none;
    }
    & h2.banner {
        font-size: 1.5rem;
        text-decoration: none;
    }
    & .hero {
        display: flex;
        flex-direction: row;
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        min-height: 30rem;
        background: url("../hero.avif") repeat-x black;
        will-change: background-position;
        animation: 45s linear 0s infinite normal none running hero_bg_scroll;
        & a {
            width: fit-content;
            height: fit-content;
            font-size: 1.6rem;
            padding: 0.5ch;
            position: absolute;
            top: 1rem;
            right: 1rem;
        }
        & form {
            max-width: 28rem;
            max-height: 28rem;
            display: flex;
            flex-direction: column;
            position: relative;
            align-items: center;
            top: 0.5rem;
            left: 2ch;
            & button {
                width: 8ch;
                height: fit-content;
                margin: 0.2rem;
            }
            & fieldset {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            & label {
                font-size: 1.5rem;
                margin: 0.2rem;
                padding: 0px;
            }
            & legend {
                width: 100%;
                text-align: center;
                font-size: 2rem;
                margin: 0.2rem;
                padding: 0px;
            }
            & input, & textarea {
                width: 100%;
                resize: none;
                font-size: 1rem;
                margin: 0.2rem;
                padding: 0px;
            }
        }
    }
    & p {
        margin-left: 2ch;
        margin-right: 2ch;
    }
    & .clist {
        margin: 0;
        padding: 0;
        width: fit-content;
        height: fit-content;
        align-self: center;
        & li {
                list-style: circle inside;
        }
    }
}
footer {
    margin: 0;
    float: none;
    display: flex;
    justify-content: center;
    padding: 0;
}