:root {
                --header-image: url('/photos/1e88867648daf3e05353612d9a2cb901.png');
                --body-bg-image: url('');

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

           @font-face {
                font-family: Pixel Operator;
                src: url('/fonts/PixelOperator.ttf');
            }

            @font-face {
                font-family: Pixel Operator;
                src: url('/fonts/PixelOperator-Bold.ttf');
                font-weight: bold;
            }

            body {
                font-family: 'Pixel Operator', sans-serif;
                margin: 0;
                background-color: #000000;
                background-size: 500px;
                color: #E8E0D6;
                background-image: var(--body-bg-image);
            }

            * {
                box-sizing: border-box;
            }
            
            a:hover {
              text-decoration:none;
            }

           

            .site-frame {
                max-width: 980px;
                width: min(100%, 980px);
                margin: 20px auto;
                padding: 14px;
                border: 2px solid #A03C2C;
            }

            #container {
                max-width: 900px;
                margin: 0 auto;
            }

           
            #container a {
                color: #A03C2C;
                font-weight: bold;
                text-decoration: none;
            }
            
            #container a:hover {
                color: #FFFF00;
                font-weight: bold;
                text-decoration: none;
            }
            

            #header {
                width: 100%;
                background-color: #000000;
                /* header color here! */
                height: 150px;
                /* this is only for a background image! */
                /* if you want to put images IN the header, 
      you can add them directly to the <div id="header"></div> element! */
                background-image: var(--header-image);
                background-size: 100%;
                 background-repeat: no-repeat;
            }

            /* navigation section!! */
            #navbar {
                height: 60px;
                background-color: #12100E;
                outline:solid;
                outline-color: #A03C2C;
                /* navbar color */
                width: 100%;
            }

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

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

            /* navigation links*/
            #navbar li a {
                color: #A03C2C;
                font-weight: 800;
                text-decoration: none;
                outline:solid;
                outline-offset:5px;
                outline-color: #A03C2C;
            }

            /* navigation link when a link is hovered over */
            #navbar li a:hover {
                text-decoration: none;
                outline:solid;
                outline-offset:5px;
                outline-color: #ffff00;
            }

            #flex {
                display: flex;
                justify-content: center;
                align-items: flex-start;
                gap: 20px;
            }

            /* this colors all sidebars */
            aside {
                background-color: #12100E;
                width: 215px;
                padding: 20px;
                outline:solid;
                outline-color: #A03C2C;
            }


            /* main content area */
            main {
                background-color: #12100E;
                width: min(100%, 620px);
                flex: 0 1 620px;
                padding: 20px;
                order: 2;
                outline:solid;
                outline-color: #A03C2C;
                margin: 0 auto;
                
            }

            /* left to right orger */

            #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
                flex: 0 0 215px;
            }

            footer {
                background-color: #12100E;
                /* background color for footer */
                width: 100%;
                height: 40px;
                padding: 10px;
                text-align: center;
                outline:solid;
                outline-color: #ffffff;
                /* this centers the footer text */
            }

            h1,
            h2,
            h3 {
                color: #ffffff;
                margin-top:5px;
            }

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

            strong {
                color: #ffffff;
            }

            /* this is just a cool box, it's the darker colored one */
            .box {
                background-color: #000000;
                border: 1px solid #000000;
                padding: 10px;
            }
            
            * {
              box-sizing: border-box;
            }
            
            .box2 {
                background-color: #000000;
                border: 1px solid #ffffff;
                padding: 10px;
                width: 50%;
                height: 230px;
                float: left;
            }
            
             .box3 {
                background-color: #000000;
                border: 1px solid #ffffff;
                padding: 10px;
                height: 250px;
             }
            
            
            .clearfix::after {
             content: "";
             clear: both;
             display: table;
            }

            /* CSS for extras */

            #topBar {
                width: 100%;
                height: 30px;
                padding: 10px;
                font-size: smaller;
                background-color: #13092D;
            }
            
          pre {
  display: block;
  background-color: gray;
  border: 2px solid #ffffff;
  font-size:12px;
  font-family: monospace;
  white-space: pre-wrap;
    overflow-x: auto;
  overflow-y: scroll;
  margin: 1em 0;
  max-width:200px
} 

        #statuscafe {
    padding: .5em;
    background-color: black;
    border: 1px solid white;
    border-radius: 15px;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}