/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   

body {
  background:url('stars.png') black;
  color: #DDD;
  font-family: 'Comic Sans MS', 'Comic Neue', Verdana;
  font-size:18px;
}

a:link {
text-decoration:underline;
color:#44F;
}

a:visited {
text-decoration:underline;
color:#E5613F;
}

a:active, a:hover {
text-decoration:underline;
color:#FF982E;
}

span.altmain {
text-decoration:underline;
color:#E5613F;
}

span.altmain:hover {
text-decoration:underline;
color:#FF982E;
}

#header {
  background:url('meganova2.gif') no-repeat;
  height:169px;
  margin-bottom:-60px;
  display:block;
}

#content {
  background: rgb(52, 14, 120);
  background: rgba(52, 14, 120, 0.5);
  background:url('star3.png');
  border:3px solid #FFF;
  margin:69px 169px 69px 169px;
padding:5px;
}

h1 {
  font-size:69px;
    font-family: 'Fredoka One', 'Comic Sans MS', 'Comic Neue', Verdana;
    padding:2px 2px -40px 2px;
    margin:2px 2px 2px 2px;
    color:#FD8;
    background:url('Glitter_stars.gif') no-repeat bottom left;
}

#menu1 {
  position:absolute;
left:0;
top:0;
width:150px;
padding:5px;
margin-top:190px;
text-align:left;
}

#menu2 {
  position:absolute;
right:0;
top:0;
width:150px;
padding:5px;
margin-top:190px;
text-align:left;
}

#menu1 ul {
padding-left:-16px;
margin-left:-16px;
}

#menu2 ul {
padding-left:-16px;
margin-left:-16px;
}

#menu1 ul li {
  border:1px solid #ddd;
    padding:2px 0px 2px 0px;
    margin:2px 0px 2px 0px;
}

#menu2 ul li {
  border:1px solid #ddd;
    padding:2px 0px 2px 0px;
    margin:2px 0px 2px 0px;
}

p.lorenote {
padding:16px;
margin-left:40px;
margin-right:20px;
border:1px dashed #DDD;
background:url('star4.png') #071A39;
font-style:italic;
font-size:14px;
}

.lorebit {
 border-bottom: 1px dashed #DDD;
 }

@media (max-width:900px) {
  
  #header {
    background-size:100%;
  }
  
  #content {
      margin:10px 10px 5px 10px;
  }
  
  #menu1 {
  position:relative;
  margin-top:2px;
  }
  
  #menu2 {
    position:relative;
    margin-top:2px;
  }
  
  #content img {
    max-width:100%;
  }