/* 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." */
:root {
        --base: #e69e6d;
        --darkbase:#bc7355;
        --lightbase:#f4c38a;
        --secondary: #329b66;
        --darksecondary:#316b4e;
        --lightsecondary:#64bc90;
        
  }

html { 
  background-image: url("./stars3.gif");
  background-color: black;
  }

html, body {
  padding:0;
  margin:0;
}

body {

  color:var(--base);
  font-family: Verdana;
}

header {

  max-width:100%;
}
aside {
  width:250px;
  padding-left:10px;
  margin-top:10px;
}

.flex {
display:flex;
}

header {
  max-height:150px;
  height:150px;
  background-image:url('#');
  background-repeat:repeat-y; /* this prevents it from repeating horizontally */
  background-size:1000px; /* I had to play with this value in CodePen to find the perfect size */
  background-position:fixed; /* this prevents the image from shifting when the page is resized */
}
main {
  width:100%;
  margin-right:10px;
  margin-left:20px;
}


section {
  border:1px solid var(--base);
  margin-bottom:10px;
  
}
article { 
  border:1px solid var(--base);
  margin-bottom:15px;
}

figcaption { 
  text-align: center;
  font-size:14px;
}

.links {  /* this applies to your 'links' UL */
  list-style-type:none; /* this removes the bullet */
  padding-left:0; 
  font-weight:bold;

}
.links li {  /* this applies to your <li> tag */
  border:1px solid var(--base); 
  margin-bottom:3px;

}
.links li a { /* this applies to your list link styling */
  text-decoration:none;
  color:var(--lightsecondary);
  margin-left: 5px;
  
}


.collectedlinks {  /* this applies to your 'links' UL */
  list-style-type:none; /* this removes the bullet */
  padding-left:0; 
  font-weight:bold;
}
.collectedlinks li {  /* this applies to your <li> tag */
  margin-bottom:5px;
}
.collectedlinks li a { /* this applies to your list link styling */
  text-decoration:none;
  color:var(--lightsecondary);
  
}


.subtitle {
  margin-top:5px;
  text-align: center;
  color:var(--lightsecondary);
  font-weight:bold;
  }
  
.subtitle a {
  margin: 0px;
  color:var(--lightsecondary);
  text-align: center;
  
  }
  
  
.postlink {
  margin-top:5px;
  margin-left: 3px;
  color:var(--lightsecondary);
  font-weight:bold;
  }
  
.postlink h3 {
  color:var(--lightsecondary);
  }
  
.postlink a {
  color:var(--lightsecondary);
  font-weight:bold;
  }
  
.jumplink a {
  color:var(--base);
  font-weight:bold;
  }
  
.postlink h5 {
  color:var(--secondary);
  }
  
.posttease {
  margin-left: 5px;
}

.categories {
  margin-left: 10px;
  color:var(--lightsecondary);
  font-weight:bold;
}

.categories p {
  margin-left: 10px;
  color:var(--lightbase);
  font-weight:bold;
}

.categories a {
  color:var(--lightbase);
}

.description {
  margin-top:5px;
  margin-bottom:5px;
  margin-left:3px;
  color:var(--base);
  font-weight:bold;
  }

.future {
  visibility: hidden;
}

#homebutton {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}
  
.headerbar {
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.box {
  max-height:187px;
  height:200px;
  max-width:200px;
  width:200px;
  border:1px solid var(--base);
  margin: 10px;
  text-align: center;
}

.bigbox {
  max-height:387px;
  height:400px;
  max-width:450px;
  width:450px;
  border:1px solid var(--base);
  margin: 10px;
  text-align: center;
}

.boxpic {
  width: 200px;
  height: 35px;

}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.longtext {
  margin-left: 10px;
  margin-right: 10px;
  line-height:2;

}

.longhead {
  word-wrap: break-word;
  white-space: normal;
}

.easyreadbox {
  background: rgba(13, 8, 17, 0.7);
}

.centeredimage{
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}




@media only screen and (max-width: 875px) {


}

@media only screen and (max-width: 523px) {
.box {

}
}