:root {
  --bg-color:#8B9F9F; /* light green */
  --pg-color:#f9fcea; /* very light green */
  --accent:#93C0A4; /* dark green */
  --accent-2:#8E9B90; /* gray */
  
}
.new-rocker-regular {
  font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
}
.roboto-mono-<uniquifier> {
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*{
  box-sizing:border-box;
  img {
  max-width: 100%;
  width: 100%;
}
}

html, body {
  margin:0;
  font-family:sans-serif;
  font-size:0.85em;
  background-image: url('bluebrick.gif');
   
 #container {
  background-image: url('pattern201.gif');
  width:100%;
  border-left:10px Groove purple;
  border-right:10px Groove purple;
  border-top:10px groove purple;
  border-bottom:10px groove purple;
  position:relative;
  font-family: "New Rocker"
}
#outer {
  border: 30px solid transparent;
border-image: url('purp020.jpg') 17 round;
  margin-left:100px;
  margin-right:100px;
}
#blog1 { 
  width: 700px;
  height: 400px;
  margin: 15px;
  padding:15px;
  border: 9px Groove purple;
  background-color:black;
  color:white;
}
#blog2 { 
  width: 700px;
  height: 450px;
  margin: 15px;
  padding:15px;
 position: relative;
  left: 450px;
  border: 9px Groove purple;
  background-color:black;
  color:white;
}
nav {
  background-image: url('purp020.jpg');
  position:absolute;
  top:100px;
  left:50px;
  border:10px Groove purple;
  width:100px;
  height:420px;
  z-index:9;
}
article { 
padding:15px;
  line-height:1.7em;
}
h1 {
  font-size:100px;
  border-bottom:10px solid purple;
  padding-bottom:50px;
  text-align:center;
}
h2 {
  font-size:25px;
  letter-spacing:1px;
  line-height:30px;
  padding-bottom:8px; 
  font-family:"Roboto Mono"
}
nav > ul {
  background-color:black;
  margin:10px;
  padding:0;
  list-style:none;
}
nav > ul > li {
  border-bottom:1px solid white;
  text-align:center;
}
nav > ul > li:last-child {
  border-bottom:none;
  text-align:center;
}
nav > ul > li > a {
  font-size:15px;
  padding-top:20px;
  padding-bottom:20px;
  display:inline-block;
  color:white;
}
 @media only screen and (max-width: 850px) {
   nav {
     left:0;
   }
   #container {
     width:100%;
     margin-left:0;
   }
   #outer {
     margin-left:0;
   }

h3 {
  font-size:100px;
  border-bottom:1px solid var(--accent-2);
  padding-bottom:8px;
}

}