:root { /*these are the colors for the website, you can change them to your liking*/
  --bg-color:#030008a3; /* light green */
  --pg-color:#e0e5e6; /* very light green */
  --accent:LightPink ; /* blue gradient */
  --accent-2: #030008; /* gray */ 
.scanlines {
    overflow: hidden;
    position: relative;
}
.scanlines:before,
.scanlines:after {
    display: block;
    pointer-events: none;
    content: "";
    position: absolute;
}
.scanlines:before {
    width: 100%;
    height: 2px;
    z-index: 2147483649;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0.75;
    animation: scanline 6s linear infinite;
}
.scanlines:after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483648;
    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(0, 0, 0, 0.3) 51%
    );
    background-size: 100% 4px;
    animation: scanlines 1s steps(60) infinite;
}

}
body {
    position: relative;
    background: #1b1b1b;
}

h2 {
  color: #E37383;
}
p {
  color: #770737;
}
li {color:#770737}
/* removing the snowflakes, they are cute but make it hard to read */
*{
  box-sizing:border-box;
}
html, body {
  margin:0;
  font-family: "Courier New", Courier, monospace;
  font-size:100%;
  background-image: url("https://images.puella-magi.net/6/6b/Madoka_Novel_04.jpg");
  background-size: cover;
}

body {
  background-color:var(--bg-color);
}
#container {
  background-color:var(--pg-color);
  width:70%;
  border-left:100px solid transparent;
  border-image: var(--accent) 1;
  border-right:1px solid var(--accent-2);
  position:relative;
}
#outer {
  border-left:10px double var(--accent-2);
  margin-left:100px;
}
nav {
  background:var(--accent);
  position:absolute;
  top:100px;
  left:50px;
  border:10px double var(--bg-color);
  width:130px;
  height:500px;
  z-index:9;
}
article { 
padding:50px;
  line-height:1.7em;
  color:#222;
}
h2 {
  font-family: "Courier New", Courier, monospace;
  font-size: 20px;
  border-bottom:1px solid var(--accent-2);
  padding-bottom:8px;
  margin-top:24px;
}

article p {
  margin-bottom:16px;
}
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:8px 6px;
  display:block;
  color:white;
  text-decoration:none;
  transition:background-color 0.2s ease;
}

nav > ul > li > a:hover {
  background-color: rgba(255,255,255,0.2);
}

.center-list {
  list-style:none;
  padding:0;
  margin:0;
  text-align:center;
}

.center-list li {
  margin:8px 0;
}

.image-list {
  list-style:none;
  padding:0;
  margin:20px 0 0;
  text-align:center;
}

.image-list li {
  margin:0;
}

.image-list img {
  display:block;
  margin:0 auto;
  max-width:100%;
  height:auto;
  border:none;
}
 @media only screen and (max-width: 850px) {
   nav {
     left:0;
   }
   #container {
     width:100%;
     margin-left:0;
   }
   #outer {
     margin-left:0;
   }
}
.image-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  text-align: center;
}

.image-list img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
.invisible-player {
  display: none; /* Entirely hides the container and player from view */
}