/* 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: #251838 url("Meowground.png") repeat;
  background-size: 53px auto;
  color: #DAE7C7;
  text-align: center;
  font-family: cursive, serif;
  text-shadow: 2px 2px 3px #10102b;
}


  /*There HAS to be a better way to code buttons */
  #buttons a {
  display: inline;
  transition: color 1s;
  color: #D73CA3; 
  border: groove;
  background: linear-gradient(#311f43, #1b1432);
  text-decoration: none;
  border-radius: 20px 0px 20px 0px;
}


#buttons a:hover {
  display: inline;
  font-weight: bold;
  color: #B9F85C;
  background: linear-gradient(#311f43, #1b1432);
  border: groove;
  box-shadow: 5px 5px 3px 1px #10102b;
}


strong {
  color:#d73ca3;
}


p:first-child {
  color: #AF61C9
}


a:link {
    color: #D73CA3;
    transition: color 1s;
    text-decoration: Underline;
}


a:hover { 
  color: #B9F85C;
  background-color: #1b1432;
  border: groove;
  box-shadow: 5px 5px 3px 1px #10102b;
}


a:visited {
  color: red;
  text-decoration: none;
}


H1 {
  color: #AF61C9;
  font-family: "Brush Script MT", cursive, serif;
  font-weight: Bold;
  font-style: Italic;
  border:thick groove;
  border-top-left-radius: 100px;
   margin: 30px 450px 50px 450px;
}


H2 {
 color: #AF61C9;
 font-family: "Brush Script MT", cursive, serif;
  font-weight: Bold;
  font-style: Italic;
  border:thick groove;
  border-top-left-radius: 100px;
  margin: 30px 800px 50px 800px;
}