/* 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." */

/*COLORS KEY
#180161 rgb(24, 1, 97) is DARK BLUE
#4F1787 rgb(79, 23, 135) is DARK PURPLE
#EB3678 rgb(235, 54, 120) is DARK MAGENTA
#FB773C rgb(251, 119, 60) is DARK ORANGE

#443199 rgb(68, 49, 153) is LIGHT BLUE
#792CA2 rgb(121, 44, 162) is LIGHT PURPLE
#C13383 rgb(193, 51, 131) is LIGHT MAGENTA
#E05454 rgb(224, 84, 84) is LIGHT ORANGE

*/

/* SIZES KEY
8rem margin is the rim (? might be wrong)
*/

* {
  box-sizing: border-box;
  
}

body {
  font-family: "Open Sans", "Times New Roman", Times, serif;
  text-align: center;
  line-height: 1.5;
  font-weight: normal;
  font-size: 1.3rem;
  background-color: #180161;
  border: #4F1787;
  border-style: double;
  border-width: 0.5rem;
  margin: auto; 
}

#wrapper {
  width: 90%;
  margin: 1rem;
  padding: 1rem;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10rem;
  margin-top: 10rem;
}

/*Headings*/

h1 {
  font-family: "Matemasie", "Times New Roman", Times, serif;
  text-align: center;
  color: #443199;
  background-color: #E05454;
  text-shadow: 0.17rem 0.17rem #180161;
  width: 55%;
  padding: 1.25rem;
  border-color: #C13383;
  border-width: 0.25rem;
  border-style: outset;
  margin: auto;
  box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;
  border-radius: 1rem;
}

h2 {
  font-family: "Fascinate Inline", "Times New Roman", Times, serif;
  text-align: center;
  font-size: 2rem;
  color: ;
}

h3 {
  font-family: "Limelight", "Times New Roman", Times, serif;
  text-align: center;
  color: ;
}

p {
  text-align: left;
  line-height: 1.25;
  color: #4F1787;
  line-height: 2rem;
}

/*Links*/

a {
  font-family: "Limelight", "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: oblique;
  text-decoration: none;
  color: #254d70;
}

a:hover {
  text-decoration: none;
  color: #954c2e;
}

/*Lists*/

ul {
  list-style: none;
}


/*Images*/

img {
  border-style: double;
  border-width: 1.5rem;
  border-color: #4F1787; 
  box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px;
  margin: 1rem;
  
}


*/