:root {
                --header-image: url('https://joannsour.org/style/logo.png');
                --body-bg-image: url('https://joannsour.org/style/bg.gif');

                /* colors */
                --content: #43256E;
            }

            body {
                font-family: 'Verdana', sans-serif;
                margin: 1;
                background-color: #001a00;
                background-size: 1500px;
                color: #fceaff;
                background-image: var(--body-bg-image);
                background-attachment: fixed;
            }

            * {
                box-sizing: border-box;
            }

            a, a:link, a:visited, a:hover, a:active {
            color: #b98b00;
            text-decoration: none;
            background-color: #333333;
            }

            #container {
                max-width: 1000px;
                margin: 0 auto;
                /* this centers the entire page */
            }

            #container a {
                color: #b98b00;
                font-weight: bold;
            }

            #header {
                width: 100%;
                background-color: #b98b00;
                height: 250px;
                background-image: var(--header-image);
                background-repeat: no-repeat;
                background-position: center;
                background-size: 60%;
                border-style: solid;
                border-color: #333333;
                border-width: 3px;
                border-radius: 25px;
                margin-top: 25px;
                margin-bottom: 25px;
            }

            #navbar {
                height: 60px;
                background-color: #002400;
                border-style: solid;
                border-color: #333333;
                border-width: 3px;
                border-radius: 15px;
                width: 100%;
            }

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

            #flex {
                display: flex;
            }

            main {
                background-color: #00fd00;
                color: #000000;
                padding: 20px;
                flex: 1;
                order: 2;
                border-style: solid;
                border-color: #333333;
                border-width: 3px;
                border-radius: 25px;
                width: 100%;
                margin-top: 25px;
                margin-bottom: 25px;
            }

            footer {
                background-color: #002400;
                width: 100%;
                height: 85px;
                text-align: center;
                padding: 10px;
                border-style: solid;
                border-color: #333333;
                border-width: 3px;
                border-radius: 20px;
            }

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

            h1 {
                font-size: 25px;
            }
            
            h2 {
                font-size: 35px;
            }
            
            h3 {
                font-size: 50px;
            }

            strong {
                color: #333333;
            }

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

                aside {
                    width: 100%;
                }

                main {
                    order: 1;
                }

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