/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  margin: 0;
  }
  
/*Everything goes inside here.*/
.wrapper {
  width: 900px;
  margin: 0 auto;
  }
  
.sidebar-img, .footer, .title, .links, .box {
  margin-top: 25px;
  }
  
.title, .links, .footer {
  text-align: center;
  }
  
/*Navigation links.*/
.links ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  }
  
.links li {
  display: inline-block;
  }

/*Some fancy code for fun, to add special characters around the navigation links. Change content to "" if you don't want these.*/
.links li:before {
  content: "ã€Œ";
  }
  
.links li:after {
  content: "ã€ âˆ· ";
  }
  
.links .last:after {
  content: "ã€";
  }
  
.links li:before, .links li:after {
  letter-spacing: 0.1em;
  }
  
/*Basic box code that is used for all content boxes on the page.*/
.box {
  border: 1px solid black;
  padding: 0.5em 1em;
  }
  
/*Goes inside the box class. Not given any style by default, but can be used for stuff like fancy borders.*/
.inner {
  
  }
  
/*Prevent image overflow.*/
.box img, .sidebar img {
  max-width: 100%;
  height: auto;
  }
  
/*Wrapper for the sidebar.*/
.sidebar {
  width: 200px;
  float: left;
  }
  
/*Container for the sidebar image.*/
.sidebar-image {
  border: 1px solid black;
  }
  
/*Remove extra padding line at the bottom of the image.*/
.sidebar-image img {
  display: block;
  }
  
/*This is where the title, navbar, and main content all go.*/
.main-wrapper {
  margin-left: 225px;
  }
  
/*Two columns by default. The "single-column" class can be added to make it one column.*/
.main {
  columns: 2;
  column-gap: 25px;
  }
  
/*Make sure boxes don't spread over multiple columns.*/
.main .box {
  display: inline-block;
  }
  
.single-column {
  columns: 1;
  }
  
.footer {
  margin-bottom: 25px;
  }
  
@media(max-width:915px) {
  .wrapper {    
    width: 95%;
    }
    
  .main-wrapper {
    width: calc(100% - 225px);
    }
  }
  
@media (orientation: portrait), (max-width: 480px) {
  .wrapper {
    width: 100%;
    }
  
  .main-wrapper, .sidebar, .footer {
    margin: 0 auto;
    width: 90%;
    }
  
  .sidebar {
    float: none;
    display: block;
    }

  .sidebar-image {
    margin: 0 auto;
    width: 33%;
    margin-top:25px;
    }

  .sidebar .sidebar-image img {
    width: 100%;
    }
    
  .footer {
    margin-bottom: 25px;
    }
  
  }