/* 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 {
  font-size:12px;
  font-family: "Comic Sans", sans-serif;
  background: #663348;
  }

   h1 {text-align: center;}
 /* unvisited link */
a:link {
  color: green;
}

/* visited link */
a:visited {
  color: red;
}

/* mouse over link */
a:hover {
  color: orange;
}

/* selected link */
a:active {
  color: red;
}
button {
  background-color: lightgray;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background-color 1s ease-out, transform 1s ease-out;
}

button:hover {
  background-color: lightgreen;
  transform: scale(1.1);
}
  
.main {
  margin: 0 auto;
  margin-top:30px;
  margin-bottom:45px;
  border:4px solid #1d1c32;
  width:600px;
  border-radius:3px;
  }
  
/*Box to contain header image*/
.header {
  border-bottom:4px solid #1d1c32;
  padding:0px;
  overflow-y:auto;
   }
   
.header img {
  width:100%;
  padding:0px;
  display:block; /*Prevents extra space after image*/
  }
  
/*Inner text area inside main div, below the header and image.*/
.text {
  background:white;
  padding:25px;
  }
  
/*Prevent overflow of large images in main text areas.*/
.text img {
  max-width: 100%;
  height: auto;
  }
  
/*Used for the header below the header image.*/
.sub {
  font-size:16px;
  font-weight:bold;
  color:white;
  background:#1d1c32;
  padding-top:3px;
  padding-bottom:6px;
  text-align:center;
  }  

/*Classes for links section.*/
.links {
  font-size:12px;
  color:white;
  background:#1d1c32;
  padding-top:1px;
  padding-bottom:5px;
  text-align:center;
  }
 
/*Links are put into a ul list element*/ 
.links ul {
  list-style-type: none;
  margin:0px;
  padding: 0;
  }
  
/*Use li for the individual links*/
.links li {
  list-style-type: none;
  display: inline-block;
  padding: 3px 10px 3px 10px;
  margin: 3px 2px 3px 2px;
  background: #663348;
  }
  
.links a {
  color: #fff;
  text-decoration:none;
  font-weight:bold;
  }
  
.links li:hover { /*The color link buttons turn when hovered over*/
  background: #774459;
  }
  
.footer {
  font-size:12px;
  color:white;
  background:#1d1c32;
  padding-top:4px;
  padding-bottom:1px;
  text-align:center;
  }
  
@media(max-width:640px) {
  .main {
    margin-top:15px;
    margin-bottom:15px;}
  }

  h2 {
    font-family: "Times New Roman", Times, serif;
    font-size: 35px;
  }

  .text_styling{
    text-decoration-line: underline;
  }