body {
                font-family: 'EB Garamond', serif;
                margin: 0px;
                background-color: #071429;
                background-size: 300px;
                color: #946d3d;
                background-image: url('charspagebackground.jpg');
            }

            * {
                box-sizing: border-box;
            }
            
a {
  color: #335c91;
  text-decoration: none;
}

            /* below this line is CSS for the layout */

            /* this is a CSS comment
    to uncomment a line of CSS, remove the * and the /
    before and after the text */


            /* the "container" is what wraps your entire website */
            /* if you want something (like the header) to be Wider than
    the other elements, you will need to move that div outside
    of the container */
            #container {
                max-width: 1080px;
                /* this is the width of your layout! */
                /* if you change the above value, scroll to the bottom
      and change the media query according to the comment! */
                margin: 0 auto;
                /* this centers the entire page */
            }

            #header {
                width: 100%;
                background-color: #335c91;
                /* header color here! */
                height: 50px;
                margin: 10px 0px;
                padding: 5px;
                border: 3px double #946d3d;
            }
            
            #banner {
                width: 100%;
                height: 100%;
                border: 1px solid #946d3d;
                font-family: Amarante;
                font-size: 20px;
                color: #946d3d;
                padding: 5px;
                background-color: #1a315e;
            }
            
            #flex {
                display: flex;
            }

            /* this colors BOTH sidebars
    if you want to style them separately,
    create styles for #leftSidebar and #rightSidebar */
            aside {
                height: 700px;
                background-color: #1a315e;
                font-family: 'Amarante';
                border: 3px double #946d3d;
                width: 200px;
                padding: 10px;
                font-size: smaller;
                /* this makes the sidebar text slightly smaller */
            }


            /* this is the color of the main content area,
    between the sidebars! */
            main {
                height: 700px;
                overflow-y: auto;
                background-color: #071429;
                border: 3px double #946d3d;
                flex: 1;
                padding: 5px;
            }

            footer {
                background-color: #1a315e;
                border: 3px double #946d3d;
                width: 100%;
                height: 50px;
                padding: 10px;
                text-align: center;
            }

            h1,
            h2,
            h3 {
                color: #946d3d;
                font-family: 'Amarante';
            }

            h1 {
                font-size: 25px;
            }

            strong {
                /* this styles bold text */
                color: #946d3d;
            }

            /* this is just a cool box, it's the darker colored one */
            .box {
                background-color: #335c91;
                border: 3px double #946d3d;
                padding: 5px;
            }
            
            .navbutton {
                display: block;
                width: 100%;
                background-color: #335c91;
                color: #946d3d;
                font-size: 15px;
                font-family: 'Amarante';
                padding: 5px;
                margin-bottom: 10px;
                border: 1px #946d3d solid;
                text-align: center;
                text-decoration: none;
            }
            
            .navbutton:hover {
                background-color: #946d3d;
                color: #335c91;
            }
              src: url(/fonts/RivannaNF.otf);
            }