/* these are variables */

    :root {
        --header-image: url('assets/sonicotest.png');
        --body-bg-image: url('assets/test.png');

        /* colors */
        --content: #fcdbec;
    }

    /* the actual stuff */

    .content {
        flex-grow: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    body {
        font-family: 'craft', sans-serif;
        font-size: medium;
        margin: 0;
        background-color: #08031A;
        background-size: 65px;
        color: #fceaff;
        background-image: var(--body-bg-image);
    }

    * {
        box-sizing: border-box;
    }

    header {
        max-width: 900px;
        margin: 10px auto;
    }

    aside {
        background-color: #dba1b600;
        width: 200px;
        padding: 0px;
        font-size: smaller;
        flex-shrink: 0;
        padding: 0px;
    }

    main {
        background-color: #d19aae00;
        padding: 0px;
        flex-grow: 1;
        max-width: 900px;
        align-items: flex-start;
        display: flex;
        margin: 10px auto;
        gap: 10px;
    }

    footer {
        background-color: #dba1b6;
        /* background color for footer */
        width: 100%;
        height: 50px;
        padding: 10px;
        text-align: center;
        max-width: 900px;
        margin: 10px auto;
    }

    /* links */
    #header {
        width: 900px;
        margin: 0 auto;
        height: 500px;
        background-image: var(--header-image);
        background-position: center;
    }

    /* navigation section!! */
    #marquee {
        height: 45px;
        background-color: #fcd8ea;
        background-image: var();
        width: 100%;
    }

    #navbar {
        height: 50px;
        background-color: #c28ea1;
        width: 100%;
        max-width: 900px;
        margin: 10px auto;
    }

    #navbar ul {
        display: flex;
        padding: 0;
        margin: 0;
        list-style-type: none;
        justify-content: space-evenly;
    }

    #navbar li {
        padding-top: 10px;
    }

    /* navigation links*/
    #navbar li a {
        color: #f3eff3;
        /* navbar text color */
        font-weight: 800;
        text-decoration: none;
        /* this removes the underline */
    }

    /* navigation link when a link is hovered over */
    #navbar li a:hover {
        color: #4f0a2c;
        text-decoration: underline;
    }

    /* text */
    @font-face {
        font-family: "craft";
        src: url("./fonts/craft.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    h1,
    h2,
    h3 {
        color: #fbf5fb;
    }

    h1 {
        font-size: 25px;
    }

    strong {
        /* this styles bold text */
        color: #fbf5fb;
    }

    /* boxes */
    .statusbox {
        background-color: #c76f8f;
        border: 1px solid #fbf5fb;
        padding: 10px;
    }

    .updatesbox {
        background-color: #7bc76f;
        border: 1px solid #fbf5fb;
        padding: 10px;
    }

    .welcomebox {
        background-color: #dba1b6;
        border: 1px solid #fbf5fb;
        padding: 10px;
    }

    .box {
        background-color: #8f6d7a;
        border: 1px solid #fbf5fb;
        padding: 10px;
    }

    /* topbar */

    #topbar {
        max-width: 900px;
        margin: 10px auto;
        position: sticky;
        top: 0px;
        width: 100%;
        height: 30px;
        padding: 10px;
        font-size: smaller;
        background-color: #dba1b6;
    }


    /* MEDIA QUERY */

    @media only screen and (max-width: 800px) {
        #flex {
            flex-wrap: wrap;
        }

        #navbar ul {
            flex-wrap: wrap;
        }
    }