body { 
	max-width: 1366px;
	background-color: Black; 
	overflow: hidden;
}

body {
 font-family: 'Arial', sans-serif;
 color: White;
}
h1 {
 display: flex;
 font-size: 5v;
 margin: 10px;
 text-shadow: 2px 2px 2px #000000;
 display: flex;
  }
ul { 
  font-size: 1vw ;}
h2 { 
 float: left;
 font-family: Arial, sans-serif;
 font-size: 1.5vw;
 margin: 5px 5px 0px 0px;
 padding: 10px';
 }
p {
font-family: Arial, sans-serif;
font-size: 2vw;
color: White;
margin: 2px;
}

.topnav {
  background-color: Black;
  overflow: hiden;
  width: 100%;
  margin-right: 5%;

}
.topnav a {
  float: left;
  color: White;
  text-align: center;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #008000;
  color: Purple;
}
 .container {
 align: left;
 clear: both 
 vertical-align: middle;
 display: flex;
  flex-direction: column;
  align-items: bottom;
  display: inline-block;
 position: absolute;
 top: 33%;
 left: 20px;
 max-width: 600px;
 max-height: 450px;
 margin: 10px;
 width: 80%;
 z-index: 1;
 background: rgba(0, 120, 0, 0.8);
} 
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.2preludes {position: absolute;
 bottom: 0px;
 left: 5px;
 top: 21%;
 padding: 3px;}
.prelude {position: absolute;
 bottom: 0px;
 left: 5px;
 top: 20%;
 top-padding: 20px;
 }

.2reludes { visibility: visible;
 position: relative;
 display: inline-block;
 }
@media (max-width: 480px){
 .2preludes { display: none !important; }
}
 .prelude { visibility: visible !important;
  align: left;
  position: relative;
  display: inline-block;  }
 @media (min-width: 481px) {
 .prelude { display: none; }
}
p {
font-family: Arial, sans-serif;
font-size: 18px;
color: White;
}