:root {
  --background:url('purplesky.gif');
  --
  --pg-color:#000000; /* very light green */
  --accent:#000000; /* dark green */
  --accent-2:#ffffff; /* gray */
  color: #ffffff;

}

*{
  box-sizing:border-box;
}

html, body {
  margin:0;
  font-family:sans-serif;
  font-size:0.85em;
  background:url('purplesky.gif');
  /* here is where you'd add a background image */
}
body {
  <style>
  a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
  }

  a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
  }

  a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
  }

  a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
  }
  </style>

}

#outer {

  margin-left:100px;
}
nav {
  background-color:var(--accent);
  position:absolute;
  top:100px;
  left:50px;

  width:120px;
  height:200px;
  z-index:9;
}
article {
padding:50px;
  line-height:0em;

}
h2 {
  font-size:30px;
  color: #ffffff;
  text-align: center;
  padding-bottom:8px;
}

h1 {
  font-size:30px;
  color: #ffffff;
  text-align: center;
  padding-bottom:8px;
}


  #gifs {
  text-align: center;
}



  }
nav > ul {
  background-color:var(--accent-2);
  margin:20px;
  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:12px;
  padding-top:5px;
  padding-bottom:5px;
  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;
   }
   
}