body {
  background: #549eea url("/img/background.png"); /*Replace with your own background image! :)*/
	background-size: cover;
	background-attachment: fixed;
  background-position:center;
	background-size: cover; 
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	color: #2b61c6;            /* Sets the default font color to cornflower */
  }

h1 {
  color: #addef9; /* Sets all <h1> headers to baby blue */
  }
  
a {
  color: #f5f971;
  }
  
.small-image {
  width: 150px;
  height: auto;
}
  
.white-text {
  font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	color: #FFFFFF;
  }
  
.yellow-text {
  font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	color: #f5f971;
  }

/*Everything goes inside this.*/
.container {
  margin: 0 auto;
  width:1200px;
  margin-top:5px;
  margin-bottom:5px;
  }
  
/*Main boxes.*/
.main {
  background: transparent;
  border:2px #FFFFFF;
  margin-left:200px;
  padding: 13px 17px;
  margin-bottom:15px;
  margin-top:15px;
  }

/*Sidebar*/
.side {
  background: transparent;
  padding:10px 12px;
  border: 2px #FFFFFF;
  margin-top:225px;
  max-height:300px;
  overflow:auto;
  width:135px;
  position:fixed;
  text-align:center;
  }
  
.side img {
  border: 0px double black;
  margin: 0 auto;
  margin-left: -3px; /*border pushes it to the right otherwise*/
  }

.nav-list {
    list-style: none;
    text-align: left; 
    padding-left: 0;
    margin-left: 0; 
    list-style-position: inside;
  }
  
.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-gap: 15px;
  place-items: center;
  background-color: transparent;
  color: #2b61c6;
}

.box {
  background-color: transparent;
  color: #2b61c6;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

/*Prevent image overflow*/  
.main img, .side img {
  max-width: 100%;
  height: auto;
  }
  
  
/*For narrower screens.*/
@media(max-width:850px) {
  .container {
    width:700px;
  }
  .main {
    margin-left:175px;
    }
  .side {
    width:100px;}
  }