:root {
                --body-bg-image: url('https://clockworkgreenhouse.neocities.org/circuit.png');

                /* colors */
                --body-bg-color:#696969;
                --header-color:#424242;
                --main-color:#2b2b2b;
                --sidebar-color:#315930;
                --header-font:"Broadway";
                --header-font-color:#b89023;
                --navbar-font:"Helvetica";
            }

            body {
                font-family:"helvetica";
                margin: 0;
                background-color: var(--body-bg-color);
                color: #696969;
            }

            * {
                box-sizing: border-box;
            }
 
  #flex {
                display: flex;
            }
            
          
      #header {
                width: 100%;
                height: 2em;
                margin: 0;
                background-color: var(--header-color);
                background-size: 50%;
              background-image: var(--body-bg-image);

            }
            
             #header {
               color: var(--header-font-color);
               font-family: var(--header-font);
                font-size: 3em;
                padding-top: .5em;
                text-align: center;
            }
        
            main {
                background-color: var(--main-color);
            -webkit-box-shadow: inset 0px 0px 15px 5px #000000; 
box-shadow: inset 0px 0px 15px 5px #000000;
                
                flex: 1;
                order: 2;
              
       
            }
            
            #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
            }

            #container {
                width:100%;
               
                margin-left: 0 auto;
               
            }

            /* link style */
            #container a {
                color: black;
                font-weight: bold;
               text-decoration:none;
            }
            


            /* navigation section!! */
            #navbar {
                height: 40px;
                padding:10px;
                width: 100%;
            }

            #navbar ul {
                display: block;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            }

            #navbar li {
                padding-top: 10px;
                text-align: center;
            }

            /* navigation links*/
            #navbar li a {
                color: #1a1a1a;
                font-weight: 800;
                text-decoration: none;
                font-size:1.5em;
                font-family: var(--navbar-font);
            }

            /* navigation link when a link is hovered over */
            #navbar li a:hover {
                color: black;
                text-decoration: none;
            }
    
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: black;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 30%;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select:none;
  -ms-user-select:none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}



img {
  margin-bottom: -4px;

}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
  
}

.active,
.demo:hover {
  opacity: 1;
}



/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
  padding: 20px;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
}

/* Clear floats after rows */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  padding: 10px;
}


            @media only screen and (max-width: 800px) {
                #flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
                }

           
       #header {
                font-size: 2em;
                padding-top: .5em;
                text-align: center;
            }
            button {
              display: inline-block;  
            }
                main {
                    order: 3;
                }

                #leftSidebar {
                    order: 1;
                    border: 2px solid rgba(0,0,0,0); 
                    }
                  
                  #rightSidebar {
                order: 2;
                }
#navbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            }

#navbar li a {
                color: black;
                font-weight: 800;
                text-decoration: none;
                font-size:1em;
            }
                #navbar ul {
                    flex-wrap: wrap;
                }
                
            }