styles.css

@import url('https://fonts.googleapis.com/css?family=Bungee+Inline');
@import url('https://fonts.googleapis.com/css?family=Bungee+Shade');
@import url('https://fonts.googleapis.com/css?family=Bungee+Outline');
@import url('https://fonts.googleapis.com/css?family=Bungee+Hairline');
@import url('https://fonts.googleapis.com/css?family=Bungee');
@import url('https://fonts.googleapis.com/css?family=Inconsolata');

* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: "Bungee";
  /*font-weight: 100;*/
  background-color: #abd4ef;
}

.about {
  margin-right: 25%;
  margin-left: 25%;
  text-align: left;
  font-family: Inconsolata;
}
.overall {
  margin-left: 12%;
  margin-right: 12%;
  /*margin-top: 3%;*/
}

.footer-side {
  display: none;
}

/* Header/logo Title */
.header {
  padding-bottom: 0px;
  padding-right: 4px;
  margin-top: 8%;
  color: black;
  /*font-weight: bold;*/
  font-family: "Bungee Shade";
  /*font-family: "Modak";*/
  line-height: 0;
  font-size: 1.5rem;
  width:fit-content; 
  width:-webkit-fit-content; 
  width:-moz-fit-content;
  border: 3px solid black;
  border-left: 6px solid black;
  color: black;
}

/* Style the top navigation bar */
.topnav {
  display: flex;
  border-top-color: black;
  border-top-style: solid;
  margin-top: 0px;
  padding-bottom: 1rem;
}

.topnav .icon {
  display: none;
}

/* Style the navigation bar links */
.topnav a {
  color: black;
  padding-top: .8rem;
  padding-right: 2.5rem;
  text-decoration: none;
  text-align: left;
  font-size: 1rem;
}

/* Change color on hover */
.topnav a:hover {
  color: pink;
  text-decoration: underline;
  /*font-weight: 200;*/
}

.latest {
  font-family: 'Bungee Inline';
  font-weight: 1;
  font-size: 1.4rem;
  padding-top: 1rem;
  padding-bottom: 0;
  margin-bottom: 0;
  text-decoration: underline;
  /*margin-left: 5%;*/
}

.row {  
  display: flex;
  flex-wrap: wrap;
}

.icons-top {
  position: absolute;
  top: 0px;
  right: 12%;
  margin-bottom: 0px;
  padding-bottom: 0px;
  margin-top: 0px;
  padding-top: 0px;
  font-size:1.4rem;
}


/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  flex: 5%;
  margin: auto; 
  text-align: center;
  padding-left: 5%;
}

.side2 {
  margin: auto;
  text-align: center;
}

/* Main column */
.main {
  flex: 60%;
  margin-left: 0%;
  border-right: 4px solid rgba(128, 128, 128, .3);
  justify-content: left;
  margin-right: 1%;
  margin-left: 0%;
  padding-right: 5%;
}

/* Footer */
.footer {
  padding: 10px;
  text-align: center;
  width: 100%;
  background-color: rgb(254, 237, 255);
  margin-right: 0%;
  color: grey;
  margin-bottom: 0px;
}

.preview_image {
  float:right;
  border: 4px solid black;
  margin-right:3%;
  margin-left:3%;

/*  height: 150px;
  width: 200px;
*/  /*background-position: center center;*/
  /*display: none;*/
}


.preview_date {
  font-size: .95rem;
  font-weight: bold;
  padding-bottom: .5rem;
  color: black;
  /*opacity: .8;*/
  font-family: Inconsolata;
}

.preview_text {
  font-weight: /*600*/;
  /*padding-left: .75rem;*/
  font-size: 1.45rem;
  font-family: 'Bungee';
}

.article-title {
  font-size: 2rem;
  color: black;
}

.article-title:hover {
  text-decoration: underline;
}

.preview_author {
  /*font-size: 1rem;*/
  /*font-weight: 300;*/
  padding-top: .35rem;
  font-family: Inconsolata;
}

.preview_tag {
  font-size: 1rem;
  /*font-weight: 300;*/
  padding-top: .75rem;
  font-family: Inconsolata;
  
}

.tag {
  /*font-weight: 400;*/
  font-size: 1rem;
  /*text-decoration: underline;*/
  font-family: Inconsolata;
}

.tag:hover {
  color: coral;
  /*font-weight: bold; */
  text-decoration: underline;
}

.newsletter {
  font-size: 1rem;
  text-align: center;
  font-family: Inconsolata;
  color: black;
  /*padding-left: 30px;*/
}

.social-items {
  display: block;
}

ul, li {
    display:inline;
    padding-right: .1rem;
    padding-left: 0;
}

.fa {
  opacity: .87;
  color: black;
  font-size: 4rem;
}
.fa:hover {
  opacity: 1;
  color: pink;
  /*font-size: 4.2rem;*/
}

@media (max-width: 700px) {

  .header { 
    padding-top: 1.5rem; 
    padding-bottom: 2rem;
  }
  .overall {
    margin-left: 0%;
    margin-right: 1%;
    /*margin-top: 3%;*/
  }

  .side {
    /*margin-right: 0%;*/
    padding-top: 50px;
    /*border-right: 1px solid black;*/
    display: none;
  }


  .preview_image {
    max-width: 9rem;
    width: 7rem;
    max-height: 10rem;
    height: 5rem;
  }

  .preview_date {
    font-size: .8rem;
    font-weight: bold;
  }

  .preview_text {
    padding-left: 2rem;
    font-size: 1.15rem;
    font-weight: 900;
  }

  .preview_author {
    font-size: .95rem;
    font-weight: 300;
    padding-top: 1rem;
  }

  .preview_tag {
    font-size: .9rem;
    font-weight: 300;
    padding-top: 1rem;
    color: #999;
  }


.image-container {
  background-image: url('http://i.stack.imgur.com/GA6bB.png');
  background-size:cover;
  background-repeat:no-repeat;
  width:250px;
  height:250px;
}  
 

  <!-- remove social media bit -->
  .side {
    flex: 0%;
  }

}

hr {
  color: #999;
  opacity: .25;
  width: 100%;
  margin-left: 0;
}


.author {
  /*opacity: .75;*/
  /*color: #999;*/
  font-family: Inconsolata;
  font-weight: bold;
  font-size: .9rem;
  /*text-transform: uppercase;*/
}

.article-row {
  display: flex;
  flex-direction: row;
  margin-bottom: 3em;
  margin-top: 1em;
}

.article-text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  float: left;
  width: 100%;
  max-width: 100%;
  padding-right: 1%;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@  screen and (max-width: 700px) {
  .row, .navbar {   
    flex-direction: column;
  }

    .article-text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    float: left;
    /*width: 90%;*/
    /*max-width: 95%;*/
    padding-right: 1%;
  }

   .icons-top {
    position: absolute;
    top: 0px;
    right: 1%;
    margin-bottom: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    padding-top: 0px;
    font-size: .9rem;
  }

  .bottom-nav {
    display: none;
  }

  .side {
    display: none;
  }

}


 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
/*  .topnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }*/
  .preview_image {
    max-width: 3%;
    width: 3%;
    max-height: 5%;
    height: 5%;
    margin-top: 0%;
    display: none;
  }

  .main {
    flex: 100%;
    margin-left: 1%;
    border-right: 1px solid rgba(128, 128, 128, 0);
    justify-content: left;
    margin-right: 0%;
  }

  /* Main column */
/*.aboutmain {
  flex: 90%;
  margin-left: 2%;
  justify-content: center;
  margin-right: 2%;
  margin-left: 0%;
  padding-right: 0%;
}*/



/*  .article-text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    float: left;
    width: 90%;
    max-width: 95%;
    padding-right: 1%;
  }
*/

  .header {
    margin-top: 11%;
  }
  .side {
    flex: 0%;
  }

  .fa {
    padding: 4%;
  }

  .about {
    margin-right: 10%;
    margin-left: 10%;
    text-align: left;
    font-family: Inconsolata;
  }


}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
/*  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }*/
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
} 

/*.about {
  margin-right: 25%;
  margin-left: 35%;
  text-align: left;
  font-family: Inconsolata;
}*/

.fa {
  padding: 2%;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}

.footer li {
    color: 
    black;
    padding-top: .8rem;
    padding-right: 2rem;
    text-decoration: none;
    text-align: left;
    font-size: 1rem;
}



a.magazines {
  color: black;
}
a.magazines:hover {
  color: grey;
}

.question {
  font-family: Bungee;
  font-weight: 1;
  margin-bottom: 0px;
}

@media screen and (max-width: 900px) {
/*  .topnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }*/
  .preview_image {
    max-width: 3%;
    width: 3%;
    max-height: 5%;
    height: 5%;
    margin-top: 0%;
    display: none;
  }

 .footer-side {
    padding-top: 20px;
    margin: auto; 
    text-align: center;
    display: block;
  }

  .bottom-nav {
    display: none;
  }

  .side {
    display: none;
  }
}

h5 {
  margin-bottom: 0px;
  padding-bottom: 0px;
}

a {
  color: black;
}