/* This is what a comment looks like in CSS! */
/* CSS is how you style the HTML elements of your website. You can change colors, fonts, and
   the positioning of your HTML content. To learn how to do something, just try searching Google
   like "css change link color". */

/* set correct box model */
* {
    box-sizing: border-box;
}

body {
  background-image: url("back3.jpg");
  background-repeat: repeat;
  background-color: white;
  color: white;
  font-family: Times;
  margin: 0px;
  text-shadow: 4px 4px #000000;
}
  
.bordered {
  border: 0px white;
  margin: 0px;
  padding: 0px;
  
}

.fit img {
  width: 100%;
  height: auto;
}

.centered {
  text-align: center;
}

/* flexbox container */
.holy-grail-flexbox {
  display:flex;
  flex-wrap:wrap;
}

/* columns (mobile) */
.holy-grail-flexbox > * {
  width:100%;
  padding:1rem;
}

/* background colors */



/* tablet breakpoint */
@media (min-width:768px) {
  .left-sidebar,
  .right-sidebar {
    width:50%;
  }
}

          
        
          
        
/* desktop breakpoint */
@media (min-width:1024px) {
  .header {
    order:-2; /* header first */
  }
  .left-sidebar {
    /* left sidebar second (first in second row) */
    order:-1; 
  }
  .main-content {
    width:50%;
  }
  .left-sidebar,
  .right-sidebar {
    width:25%;
  }
}