: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%;
                height: 250px;
                background-image: var(--header-image);
                background-repeat: no-repeat;
                background-position: center;
                background-size: 60%;
                margin-top: 25px;
                margin-bottom: 25px;
            }

            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;
            }

            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;
                }
            }