:root {

                /* colors */
                --orange: #f06800;
                --green:  #50ff10;
                --red: #c80010;
                --blue: #40c8e8;
                --cyan: #3cffd0;
                --magenta: #b040a0;
                
                
            }



            body {
                font-family: 'Helvetica';
                margin: 1%;
                background-image: url('/img/testing.jpg');
                background-repeat: no-repeat;
                background-attachment: fixed;  
                background-size: cover;
                color: var(--orange);
                line-height: 1.5;
            }

            * {
                box-sizing: border-box;
            }


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


            #container a {
                color: var(--green);
                font-weight: bold;
                text-decoration: none;
            }
            
            #container a:hover {
                color: var(--cyan);
                font-weight: bold;
                text-decoration: underline;
            }

            #header {
                width: 100%;
                background-color: #5e4e8c;
                /* 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: url('/img/magi.gif');
                background-size: 100%;
                 background-position: center center;
                border: 4px solid var(--orange);
                border-radius: 8px;
                
           
            }
          



            #flex {
                display: flex;
            }


            aside {
                background-color: rgba(0, 0, 0, 0.8);
                margin-right: 1%;
                padding: 10px;
                border: 4px solid var(--orange);
                border-radius: 8px;
                width: 30%;
           
                
            }


            main {
                background-color: rgba(0, 0, 0, 0.8);
                flex: 1;
                padding: 20px;
                order: 2;
                min-width: 70%;
                max-width: 100%;
                border: 4px solid var(--orange);
                border-radius: 8px;
            
            }



            */ #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
            }

            footer {
                background-color: rgba(0, 0, 0, 0.8);
                /* background color for footer */
                width: 100%;
                height: 40px;
                padding: 10px;
                text-align: center;
                border: 4px solid var(--orange);
                border-radius: 8px;
                font-size: 14px;
                line-height: 1;
                
                /* this centers the footer text */
            }

            h1,
            h2,
            h3 {
                color: var(--orange);
            }

            h1 {
                font-size: 25px;
            }

            strong {
                /* this styles bold text */
                color: var(--orange);
            }

            /* this is just a cool box, it's the darker colored one */
            .box {
                padding: 10px;
                border: 4px solid var(--orange);
                border-radius: 8px;
            }
            
            button
            
            {
              border: 4px solid var(--orange);
              border-radius: 10px;
              color: var(--orange);
              background-color: rgba(0, 0, 0, 0.0);
              
           
            
            }
            
            .wide
            
            {
              width: 60%;
              font-size: 20px;
              font-weight: bold;
       
            }
            
            .wide:hover
            
            {
              border: 4px solid var(--green);
              color: var(--green);
            }
            
            #avatar {
              
              border: 4px solid var(--blue);
              border-radius: 10px;
              color: var(--blue);
              
            }
            
            #avatar:hover {
              
              border: 4px solid var(--green);
              color: var(--green);
              
            }
            
            
            
            .menubutton
            
            {
              width: 100%;
              font-size: 20px;
              font-weight: bold;
       
            }
            
            .menubutton:hover
            
            {
              border: 4px solid var(--green);
              color: var(--green);
            }
          
#topmenu {
  width: 100%;
  border: 4px solid var(--blue);
              color: var(--blue);
}

#topmenu:hover {
  border: 4px solid var(--green);
              color: var(--green);
}

            #topBar {
                width: 100%;
                height: 30px;
                padding: 10px;
                font-size: smaller;
                background-color: #13092D;
            }
            
            ul, #myUL {
  list-style-type: none;
}

li, #myUL {
  padding-top: 5%;
  padding-bottom: 5%;
}



#myUL {
  
  margin: 0;
  padding: 0;
}

.sticky {
  position: sticky;
  top: 0;


}



.caret {
  
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}

.caret::before {
  


}

.caret-down::before {




}

.nested {
  
  display: none;
  padding: 1%;
}

.active {
  display: block;
}

.responsive {
            max-width: 100%;
            height: auto;
            }

 @media only screen and (max-width: 1279px) {

 .sticky {
              display: none;
            }

}
            @media only screen and (max-width: 800px) {
                #flex {
                    flex-wrap: wrap;
                }
                
                li, #myUL {
  padding-top: 1%;
  padding-bottom: 1%;
}

                aside {
                    width: 100%;
                }
                
                #leftSidebar {
                  width: 100%;
                  margin-top: 2%;
                  margin-right: 0%;
                }

                main {
                    order: 2;
                    margin-top: 2%;
                }

                #leftSidebar {
                    order: 1;
                }

                #rightSidebar {
                    order: 3;
                }

                #navbar ul {
                    flex-wrap: wrap;
                }
                
                .wide
            
            {
              width: 100%;
       
            }
            
           
            }