/* You can either copy the below and paste it between style tags on your HTML page, OR you can copy this to a file and name it .css and link it from your HTML page. */


:root {
  --bg-color:#BEB7A4; 
  --pg-color:#FFFFFC; 
  --accent:#000000; 
  --accent-2:#000000; 
   --accent-orange: #A64B20;
}

*{
  box-sizing:border-box;
}

html, body {
  margin:0;
  font-family:'Courier New', Courier, monospace;
  font-size:.95em;
  /* here is where you'd add a background image */
}
body {
  background-color:var(--bg-color);
  background-image: url("https://nightmare-marginalia.neocities.org/images/illuminated-skull.jpg");
  background-repeat: repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
#container {
  background-color:var(--pg-color);
  width:60%;
  border-left:100px solid var(--accent);
  border-right:1px solid var(--accent-2);
  position:relative;
}
#outer {
  border-left:4px dotted var(--accent-2);
  margin-left:50px;
  position: relative;
}
nav {
  background-color: var(--accent);
  position: absolute;
  top: 100px;
  left: calc(60% - 30px);
  border: 1px solid var(--bg-color);
  width: 200px;
  height: 180px;
  z-index: 9;
}
a:hover {
  color: var(--accent-orange);
}
article { 
padding:50px;
  line-height:1.7em;
  
}
h2 {
  font-size:16.5px;
  border-bottom:1px solid var(--accent-2);
  padding-top:10px;
  padding-bottom:10px;
  color: var(--accent-orange);
}
nav > ul {
  background-color:var(--accent-2);
  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:12px;
  padding-top:5px;
  padding-bottom:5px;
  display:inline-block;
  color:white;
}


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

  #outer {
    margin-left: 0;
    display: flex;
    flex-direction: column;
  }

  #container {
    width: 100%;
    order: 1;
  }

  nav {
    position: static;
    width: 200px;
    height: auto;
    margin: 20px auto;
    order: 2;
  }
}