/* 
-Any line that says "color" is where you can change the colors of your site. You can use a color's hex number. You can find color hex numbers on google and copy the number from it.
-Any line that says font-family is where you can change the font of the site. Not all fonts will work so make sure to look up html web safe fonts :) 
-Borders can have different styles such as solid, dashed, etc. Look up html border styles to find out more.
*/


body {
  background-image: url("/assets/bgstar.gif"); /* place an image in the images folder that you wold like to use as the background image of your site */
  background-repeat: repeat;
  background-color: #A693DE;
  color: white;
 
}


h1 {
  color: #7A5238;
  font-family: "courier";
  font-size: 18px;
  text-align: center;
  
}  

h2 {
  color: #7A5238;
  font-family: "courier";
  font-size: 18px;
  text-align: center;
  
}  

h3 {
  color: #937070;
  font-family: "courier";
  font-size: 24px;
  text-align: center;
}  

h4 {
  color: black;
  font-family: "courier";
  font-size: 16px;
  text-align: center;
}  

hr{
height: 1px;
color: #937070;
background-color: #8e96d2;
border: none;
}

td, th {
    border: 1px hidden #937070;
    text-align: center;
    padding: 5px;
}

table {
  margin: auto;
}

p{
  font-family: "courier";
  font-size: 15px;
  color: #a693de;
  
  }


ul{
text-align: left;
font-family: "courier";
font-size: 15px;
}
  
  a:link, a:visited /* here's where you can change how links look */
  {
    
  font-family: "courier";
  font-size: 15px;
  color:#a693de;
  text-decoration: none;
 
 
  
  }
  
  
 
.fullcontainer
{
 width: 600px;
 height: 80%;
 margin: auto;
 
 }
 
.scroll /* the scroll box */
{
 margin: auto;
 overflow:auto; 
 padding: 5px 10px;
 max-height: 60px;
 font-family: Lucida;
 font-size: 12px;
 max-width:200px; 
 border:1px solid #619196; /* changes the border of the scroll box */

 
 
}


.bodycontainer{ /*the sub sections inside the main sections */
 padding: 3px;
 opacity: .9;
 text-align: center;
 max-width: 500px;
 max-height: 2000px;
 border: 3px double  #000; /* changes the border style of the sub sections */
 border-radius: 3px;
 background-color: #b1afea; /*Changes the background color of the sub sections */
 margin: auto;
   }
   
  .responsiveimage{
    padding: 5px;
    max-width: 70%;
    margin: auto;
  }
  
  .responsiveimage1{
    padding: 1px;
    max-width: 90px;
    margin: auto;
  }
  
  .responsiveimage2{
    padding: 5px;
    max-width: 40%;
    margin: auto;
  }
  
  
.top{ /*the main rectangular section */

background-repeat: repeat;
border: 4px solid #948bc9 ; /*this changes the border of the main rectangular section of the page */
border-style: double;
border-radius: 10px;
padding: 5px;
text-align: center;
max-width: 1000px;
max-height: 2000px;
margin: auto;
background-color: #000; /*d5cfea__changes the color of the main rectangle section */

}

@media only screen and (max-width:500px) {
  .top, .body, .fullcontainer, .bodycontainer{
    width: 92%;
    height: 100%;
  }
}