/* 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 {
  background-color: #0c0c0c;
  color: #cccccc;
  font-family: Open Sans;
  text-align: justify;
  margin: 1vw;
}

/*Styles every posted image to take up only screen width*/
img {
  width: 100%;
  height: auto;
}

small {
  font-size: smaller;
  text-align: left;
}

/*Styles main page div*/
.main_page {
  display: flex;
  flex-direction: row;
}

/*Styles main page div on lower screen width*/
@media (max-width: 768px) {
  .main_page {
    flex-direction: column-reverse;
    align-items: center;
  }
}

/*Styles post_archive div*/
.post_archive {
  flex-basis: 10%;
  border: 2px solid #17b488;
  border-radius: 10px;
  background-color: #02110c;
  margin-top: 3vw;
  padding: 0vw 1vw;
  height: 300px;
}

/*Styles content div*/
.content {
  flex-basis: 80%;
  padding: 2vw 8vw;
  min-width: 0;
}

/*Styles recent_posts div*/
.recent_posts {
  flex-basis: 10%;
  border: 2px solid #17b488;
  border-radius: 10px;
  background-color: #02110c;
  margin-top: 3vw;
  padding: 0vw 1vw;
  height: 300px;
}

/*Styles entire header div*/
.header_element {
}

/*Styles all buttons*/
.button {
  border: 2px solid #17b488;
  border-radius: 10px;
  font-size: 20px;
  background-color: #02110c;
  color: #cccccc;
  text-decoration: none;
  text-align: center;
  padding: 2px 5px;
  margin: 2px;
}

/*Styles header buttons div*/
.header_buttons {
  display: flex;
  border-bottom: 2px dashed #cccccc;
  justify-content: center;
}

/*Styles visited button links*/
.button:visited {
  color: #cccccc;
  text-decoration: none;
}

/*Styles buttons when not visited*/
.button:link {
  color: #cccccc;
  text-decoration: none;
}

/*Styles buttons when hovered over*/
.button:hover {
  color: white;
  text-decoration: none;
}

/*Styles header1*/
h1 {
  text-align: center;
}

/*Styles every link*/
a {
  text-decoration: underline dotted;
}

/*Styles unvisited links*/
a:link {
  color: #17b488;
}

/*Styles visited links*/
a:visited {
  color: #a47133;
}

/*Styles links when hovered over*/
a:hover {
 color: white; 
}