:root {
    /* colors */
     --content: #2c2c2c;
}
 body {
     font-family: 'Lucida Grande', sans-serif;
     margin: 0;
     background-color: #1c1c1c;
    /* you can delete the line below if you'd prefer to not use an image */
     background-size: 65px;
     color: #ffffff;
     background-image: var(--body-bg-image);
}
 * {
     box-sizing: border-box;
}
/* below this line is CSS for the layout */
/* 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: 950px;
     margin: 0 auto;
}

/* the area below is for all links on your page EXCEPT for the navigation */
 #container a {
     color: #F5F5F5;
     font-weight: bold;
}
 #header {
     width: 100%;
     background-color: #2c2c2c;
     height: 100px;
    /* 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%;
     font-size: xx-large;
     text-align: center;
     vertical-align: middle;
     line-height: 100px;
}
/* navigation section!! */
 #navbar {
     height: 60px;
     background: rgba(255,255,255,0.3);
     width: 100%;
}
 #navbar ul {
     display: flex;
     padding: 0;
     margin: 0;
     list-style-type: none;
     justify-content: space-evenly;
}
 #navbar li {
     padding-top: 20px;
     font-size: large;
}
/* navigation links*/
 #navbar li a {
     color: #ffffff;
     font-weight: 800;
     text-decoration: none;
}
 #navbar li a:hover {
     color: #ffffff;
     text-decoration: underline;
}
 #flex {
     display: flex;
}
/* this colors BOTH sidebars if you want to style them separately, create styles for #leftSidebar and #rightSidebar */
 aside {
     background-color: #774c60;
     width: 200px;
     padding: 20px;
     font-size: smaller;
    /* this makes the sidebar text slightly smaller */
}
/* this is the color of the main content area, between the sidebars! */
 main {
     background-color: #2c2c2c;
     flex: 1;
     padding: 20px;
     order: 2;
}
.row {
  display: flex;
  column-gap: 8%;
}
.column {
  flex: 50%;
  padding: 10px;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 5px;
  border-radius: 25px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* if you're using both sidebars, the "order" value tells the CSS the order in which to display them. left sidebar is 1, content is 2, and right sidebar is 3! */
 */
 #leftSidebar {
     order: 1;
}
 #rightSidebar {
     order: 3;
}
 footer {
     background-color: #2c2c2c;
     width: 100%;
     height: 40px;
     padding: 10px;
     text-align: center;
}
 h1, h2, h3 {
     color: #ffffff;
}
 h1 {
     font-size: 25px;
}
 strong {
    /* this styles bold text */
     color: #ffffff;
   font-weight: bold;
   text-decoration: underline;
   font-size: x-large;
}
weak {
  color: #ffffff;
  font-size: smaller;
  font-style: italic;
  margin-right: 15px;
  margin-left: 15px;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
}
/* this is just a cool box, it's the darker colored one */
 .box {
     background: rgba(255,255,255,0.1);
     border: 0 px solid #ED64F5;
     padding: 10px;
     padding-right: 40px;
     padding-left: 40px;
     margin: 10px;
     margin-right: 15px;
     margin-left: 15px;
}
/* CSS for extras */
 #topBar {
     width: 100%;
     height: 30px;
     padding: 10px;
     font-size: smaller;
     background-color: #13092D;
}
/* BELOW THIS POINT IS MEDIA QUERY */
/* by default, the container width is 900px. in order to keep things responsive, take your new width and then subtract it by 100. use this number as the "max-width" value */
 @media only screen and (max-width: 800px) {
     #flex {
         flex-wrap: wrap;
    }
    #container {
      width: 100%;
      padding: 0;
      font-size: calc(15px + 0.390625vw);
    }
    
     #header {
     width: 100%;
     background-color: #2c2c2c;
     height: 100px;
    /* 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%;
     font-size: large;
     text-align: center;
     vertical-align: middle;
     line-height: 100px;
     }
    .youtube-video-container {
      position: relative;
      overflow: hidden;
      width: 100%;
    }
    
    .youtube-video-container::after {
      display: block;
      content: "";
      padding-top: 56.25%;
    }
    
    .youtube-video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .row {
      display: flex;
      column-gap: 8%;
      width: 100%;
    }
    .column {
      flex: 50%;
      padding: 10px;
      margin-right: 0px;
      margin-left: 0px;
      margin-top: 10px;
      margin-bottom: 5px;
      border-radius: 25px;
      width: 100%;
    }
    .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  }
    #navbar ul {
      width: 100%;
      flex-wrap: wrap;
    }
     #navbar {
       width: 100%;
    }
     aside {
         width: 100%;
    }
    /* the order of the items is adjusted here for responsiveness! since the sidebars would be too small on a mobile device. */
     main {
         order: 1;
    }
     #leftSidebar {
         order: 2;
    }
     #rightSidebar {
         order: 3;
    }
}