:root {
  --bg-color:#000000;
  --pg-color:#E6AFE3;
  --accent:#5C385C;
  --accent-2:#D194E9;
  --accent-3:#A37CA3;
}

*{
  box-sizing:border-box;
}

html, body {
  margin:0;
  height: 100%;
  font-family:sans-serif;
  font-size:0.85em;
  
}
body {
background: #fac8de;
background: linear-gradient(180deg, rgba(250, 200, 222, 1) 0%, rgba(209, 148, 233, 1) 100%);
background-repeat: no-repeat;
background-attachment: fixed;
    color:white;
}
#container {
        color:black;
background: linear-gradient(nulldeg, rgba(227, 182, 200, 1) 50%, rgba(196, 147, 196, 1) 0%);
background-repeat: no-repeat;
background-attachment: fixed;
  width:70%;
  border-left:4px dotted var(--accent);
  border-right:4px dotted var(--accent);
  margin-left: 0;
    min-width: 500px;

}
#outer {
  padding-left:15%;
}
a {
      color:white;
}
nav {
  background-color:var(--accent);
  position:absolute;
  position:fixed;
  top:100px;
  left:50px;
  border:1px solid var(--bg-color);
  width:15%;
  min-width: 150px;
  max-height: 45%;
  z-index:9;
}
article { 
padding:20px;
  line-height:1.7em;
  width: 85%;
  
}
h2 {
  font-size:15px;
  border-bottom:1px solid var(--accent-2);
  padding-bottom:8px;
}
nav > p {
  font-size:48px;
  font-family: Helvetica, serif;
    padding:0;
  color:white;
}
nav > ul {
  background-color:var(--accent-3);
  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:20px;
  padding-top:10px;
  padding-bottom:10px;
  display:inline-block;
  color:white;
  font-family: Georgia, serif;
}
 @media screen and (max-width: 768px) {
nav {
  background-color:var(--accent);
  position:absolute;
  top:100px;
  left:50px;
  border:1px solid var(--bg-color);
  width:15%;
  min-width: 250px;
  height:45%;
  max-height: 45%;
  z-index:9;
}
   #container {
     margin-left:5%;
         min-width: 500px;
   }
   #outer {
     margin-left:5%;
     max-width: 15%;
   }
   
}