*, ::before, ::after{
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
  /*this section standardizes the spacing for everything*/
}

/* * {
  border: dotted 1px black;
}
 ^ comment out when not looking at box sizes */

body {
  
  /* variables */
  --display: "Boldonse", "Courier New", monospace;
  --body: "Bricolage Grotesque", Tahoma, sans-serif;
  --bg: seagreen;
  --footer: rgba(46, 139, 87, .5) ;
  --color: floralwhite;
  --headbg: mediumseagreen;
  --headcolor: azure;
  --contentbg: beige;
  --contentcolor: darkgreen;
  
  background-color: seagreen;
  color:  Floralwhite;
  font-size: 16px;
  font-family: var(--body);
}

@media (prefers-color-scheme: light) {
  body {--contentbg: beige;
  --contentcolor: darkgreen;
  --linkcolor: black;
  --visitedcolor: darkslategrey;}
  }

@media (prefers-color-scheme: dark) {
  body {--contentbg: darkslategrey;
  --contentcolor: beige;
  --linkcolor: palegreen;
  --visitedcolor: white;}
  
  }

header, main, aside, footer {
  margin: 1vw;
  }

header {
  background-color: var(--headbg);
  color: var(--headcolor);
  display: flex;
  flex-flow: row wrap;
  align-content: center;
  justify-content: space-between;
}

nav{
  padding: 1rem;
  }

main, aside {
  background-color: var(--contentbg);
  color: var(--contentcolor);
  border: 1vw solid mediumseagreen;
  }
  
main {
  padding: 1rem;
  }

aside {
  padding: 1vw;
  }

@media (max-width: 750px){
* {}
#indexaside {
  max-width: 90vw;
  max-height: 30vh;
  overflow-y: scroll; 
  }
#entriesaside {
  max-width: 90vw;
  max-height: 30vh;
  }
main {
  max-width: 90vw;
  }
}

@media (min-width: 751px){
* {}
header {
  height: 4rem;
  }
#indexaside {
  max-width: 30vw;
  max-height: calc(96vh - 8rem);
  display: block;
  position: relative;
  overflow-y: scroll; 
  top: 0;
  left: 0;
  }
#entriesaside{
  max-width: 30vw;
  max-height: 50vh;
  display: block;
  position: relative;
  top: 0;
  left: 0;
  }
main {
  max-width: 60vw;
  position: absolute;
  left: 32vw;
  top: calc(4rem + 1vw);
  }
footer {
  background-color: var(--footer);
  max-width: 30vw;
  position: fixed;
  bottom: 0px;
  margin: auto;
  padding: 1vw;
  }
}

h1, h2, h3, h4 {
  font-family: var(--display);
  }

h1 {
  font-size: 3rem;
  background: var(--headbg);
  color: var(--headcolor);
  padding: 0 1rem 0 1rem;
  } 
  
header h1 {
  background: transparent;
  text-decoration: none;
  }
  
header a h1:hover {
  text-decoration: none;
  background: var(--headcolor);
  color: var(--bg);
  }
  
header a:hover {
  text-decoration: none;
  background: var(--headcolor);
  color: var(--bg);
  }

h2, h3, h4 {
  background: var(--headcolor);
  color: var(--bg);
  }
  
a h1:hover{
  color: var(--headcolor);
  background: var(--headbg);
  }
  
a h2:hover{
  background: var(--bg);
  color: var(--headcolor);
  }

h2 {font-size: 2.5rem;} h3 {font-size: 2.25rem;} 

h4 {font-size: 2rem;} 

h5, blockquote {font-size: 1.5rem; font-style: italic; color: var(--linkcolor)} 

h6, strong {font-size: 1rem; font-weight: bold; color: var(--visitedcolor);} 

p, a, q, li{
  font-size: 1rem;
  }

small, figcaption, caption, details {font-size: .75rem;}

h2, h3, h4, h5, h6, p, li, figure, img {
  padding: 0 1rem 0 1rem;
  margin: 0 0 1rem 0;
  }
  
blockquote {
  padding: 0 2rem 0 2rem;
  text-align: justify;
  }
  
a {
  color: var(--linkcolor);
  text-decoration: underline wavy;
  }

a:hover, a:visited:hover {
  background: var(--contentcolor);
  color: var(--contentbg);
  }

a:visited {color: var(--visitedcolor);}

li {list-style-position: inside;} ul{list-style-type: square;} ol{list-style-type: upper-roman;}

#asidebox {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  }
  
#entriesasideflex {
  display: flex;
  flex-flow: column nowrap;
  }

aside h2{
  margin: auto auto 2vmin auto;
  padding: 0 1vmin 0 1vmin;
  font-size: 4vw;
  width: 100%;
  }

aside iframe{
  allowfullscreen: false;
  margin: 0;
  }
  
.divider {
  margin: auto auto 1rem auto;
  display: block;
  width: 30vw;
  height: .25rem;
  background-color: azure;
  }