body {
  font: normal 13pt/1.72 'Roboto Mono', monospace;
  margin:0;
  padding:0;
  font-size: 13pt;
  line-height: 1.72 ;
  background-color: #edf257;
  color: #fff;
}
#container {
    padding:8% 12.5% 0 12.5%;
	max-width: auto;
	margin:auto;
}
 z-index:-10; height: 60%; width: 60%; position:absolute; top:0; right:0; overflow:hidden}
img {width:100%; margin-bottom:2em;}
h2 {color:red; text-align:center}
h3 {color: #737222; text-align:center; font-weight:bold; letter-spacing:1px; font-size:19pt; }
hr {border: 1px solid #a6a430; width:75%; margin-bottom:7%}

aside {
  font-size: 87%;
  padding: 1em;
  background-color: #ffffdd;
  color: #606060;
  max-width:50em;
  margin:2em auto 4em auto;
  }
#explainer, #table-of-contents-summary {max-width:50em; margin:auto;}
#explainer {margin-bottom:3em}
#table-of-contents-summary h2 {color:#363636}
.player {
   width:120%; 
   position:relative; 
   left:-10%; 
   padding-top:2em; 
   padding-bottom:1em
}
@media only all and (max-width: 700px) {
#sun {height: 40%; width: 40%;}
#container {padding:12% 2.5% 0 2.5%}
.player {
   width:100%; 
   position:relative; 
   left:0; 
   padding-top:2em; 
   padding-bottom:1em
    }
h3 {font-size:14pt}
hr {width:60%}
aside {margin-left:2.5%; margin-right:2.5%; margin-top:1em}
}