body {
  background: #285275 url("https://bettysgraphics.neocities.org/images/backgrounds/pattern%20296.gif"); /*Replace with your own background image! :)*/
	background-size: 150px;
	background-attachment: fixed;
  background-position:center;
	font-family: sans-serif;
	font-size:14px;
  }
  
a {
  color: #05225e;
  }
  
/*Everything goes inside this.*/
.container {
  margin: 0 auto;
  width:800px;
  margin-top:5px;
  margin-bottom:5px;
  }
  
/*Main boxes.*/
.main {
  background: #ffffff;
  border:3px double black;
  margin-left:200px;
  padding: 12px 17px;
  margin-bottom:35px;
  margin-top:35px;
  }

.row {
  display: flex;
}

.column {
  flex: 50%;
}

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

/*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;
    }
    
  .fish {
     position: absolute;
      top: 15px;
     right: 10000px;
     pointer-events: none;
     }
  .side {
    width:100px;}
  }
              .box2 {
                background-color: #f3f2f0;
                border: 2px dotted #154e94;
                padding: 5px;
                height: 150px;
                overflow: auto;
            }
/*I'm going to forget about this: I put this in to change the link hover color*/
  a {
    color: blue;
    text-decoration: none;
}
a:hover {
    color: #18f21f;
}