:root {
                /* These variables exist so you can make quick and simple style changes without much CSS knowledge */

                /* applies to all areas */
                --font-family: Times;
                --font-size: 14px;
                --line-height: 1.3em;
                --font-color: white;
                --link-color: white;
                --link-text-decoration: none;

                /* main content (between sidebars) */
                --content-padding: 25px;
                --content-bg-color: #FF69B4;

                /* header */
                --header-height: 140px;
                --header-background: none;
                --header-margin-bottom: 10px
                --header-margin-top:10px;

                /* sidebar */
                --sidebar-margin: 10px;
                --sidebar-padding: 5px;
                --sidebar-width: 20%;
                --sidebar-bg-color: #FF69B4;

                /* footer */
                --footer-height: 50px;
                --footer-bg-color: #EE72CB;

                /* navbar */
                --navitems-alignment: center;
                --space-between-navitems: 20px;
                --navbar-margin-bottom: 10px;
                --nav-bg-color: #EE72CB;

                /* container */
                --container-width: 1600px;
                

                /* controls the gap between the content and the footer */
                --row-gap: 5px;

                /* To add scrollbars to your sidebars, just make the height a px value and change overflow to 'auto' */

                --sidebar-height: 100%;
                --sidebar-overflow: no;
                --background-color: #3DA2B7;
            }

              @font-face {
                font-family: Astloch;
                src: url(/Astloch-Regular.ttf);
              }

            html,
            body {
                margin: 0;
                padding: 0;
                background: url('/starbg.png');
                font-family: var(--font-family);
                font-size: var(--font-size);
                color: var(--font-color);
                cursor:url('/favicon.ico');
            }

            body a {
                color: var(--link-color);
                font-weight: bold;
                text-decoration: var(--link-text-decoration);
            }

            #main-container {
                max-width: var(--container-width);
                margin: 0 auto;
            }

            .flex {
                display: flex;
                margin-bottom: var(--row-gap);
            }

            .content-wrap {
                margin-top: var(--content-margin-top);
            }

            #content-container {
                width: 65%;
                margin-bottom: var(--row-gap);
                background-color:none;
                color:white;
                padding: var(--sidebar-padding);
            }
            
            #content-container2 {
                width: 65%;
                margin-bottom: var(--row-gap);
                background-color:none;
                color:white;
                padding: 5px 5px 25px;
            }
            
            .center {
                display: block;
                margin-left: auto;
                margin-right: auto;
            }
            
            .flip {
                -webkit-transform: scaleX(-1);
                transform:scaleX(-1);
            }

            #left-sidebar {
                font-family: Times;
                width: 160px;
                margin-left: 10%;
                margin-bottom: var(--row-gap);
                height: var(--sidebar-height);
                overflow: var(--sidebar-overflow);
                padding: var(--sidebar-padding);
                text-align: center;
                color:white;
                border-style: double;
                border-radius: 20px;
                border-width: 4px;
                border-color: white;
            }

            #left-middle-sidebar {
                width: var(--sidebar-width);
                margin-bottom: var(--row-gap);
                height: var(--sidebar-height);
                overflow: var(--sidebar-overflow);
                background-color: none;
                text-align: center;
            }

            #header-contained {
                height: var(--header-height);
                margin-bottom: var(--header-margin-bottom);
                margin-top: var(--header-margin-top);
                background-image: var(--header-background);
                background-position: center center;
                font-family: Astloch;
                font-size:7vw;
            }

            #footer {
                height: var(--footer-height);
                text-align: center;
                color: var(--font-color);
                background-color:none;
                margin-top: 25px;
                margin-left: auto;
                margin-right: auto;
            }

            #header-full {
                display: none;
                height: var(--header-height);
                margin-top: var(--header-margin-top);
                margin-bottom: var(--header-margin-bottom);
                background-image: var(--header-background);
                background-position: center center;
                font-family: Astloch;
                font-size:7vw;
            }

            #navbar-contained {
                margin-bottom: var(--row-gap)
            }

            #navbar-full {
                display: none;
            }

            .nav {
                margin-left: 0;
                text-align: var(--navitems-alignment);
                margin-top: 0;
                margin-bottom: var(--navbar-margin-bottom);
                padding-top: 1em;
                padding-bottom: 1em;
                background-color: var(--nav-bg-color);
            }

            .nav li {
                display: inline-block;
                padding-right: var(--space-between-navitems);
            }

            .wrapper {
                padding: var(--content-padding);
                padding-top: var(--sidebar-padding);
            }

            .sidebar-wrapper {
                height: var(--sidebar-height);
                overflow: var(--sidebar-overflow);
            }

            .footer-wrapper {
                padding: 5px;
            }
            
            h1 {
                font-size:3vw;
                font-family: Astloch;
            }
            
.flex-container {
  display: flex;
  flex-direction: row;
  width:800px;
  margin-left: auto;
  margin-right: auto;
}

.flex-container > div {
    margin-left: auto;
    margin-right: auto;
}


            /* To keep your site RESPONSIVE, make sure this variable matches the width for --container-width UNLESS --container-width is 100% - if it's 100%, you'll need to manually input a breakpoint. */
            @media only screen and (max-width: 800px) {
                .flex {
                    flex-wrap: wrap;
                }

                #left-sidebar {
                    width: 100%;
                    display: block;
                    order: 2;
                    margin-right: 0%;
                    margin-left: 0%;
                    margin-bottom: 10px;
                }

                #right-sidebar {
                    width: 100%;
                    display: block;
                    order: 3;
                    margin-left: 0;
                }

                #content-container {
                    width: 100%;
                    display: block;
                    order: 1;
                    margin-bottom: 10px;
                }
                
                
                #content-container2 {
                    width: 100%;
                    display: block;
                    order: 1;
                    margin-bottom: 10px;
                }
                
                #footer {
                    width: 100%;
                    display: flex;
                    order: 1;
                    margin-bottom: 10px;
                }

            }