/* 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: 5em auto;
  color: #CAE3A7;
  text-align: center;
  font-family: 'Averia Sans Libre', serif, arial;
  text-shadow: 0.2em 0.2em 0.1em #10102b;
  overflow-x: hidden;
}


  /*There HAS to be a better way to code buttons */
  #buttons a {
  margin-right: 0.5em;
  transition: color 1s;
  color: #D73CA3; 
  border: groove;
  background: linear-gradient(#311f43, #1b1432);
  padding: 0.3em 0.5em 0.3em 0.5em;
  text-decoration: none;
  border-radius: 2em 0em 2em 0em;

}


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

#interests, #about, #trinkets, #others, #FRIENDS, #Mine, #Downloads, #Resources, #links, #Now, #Previous, #Changelog, #Guestbook, #list, #Pidgeons, #aboutad, #infoad, #adoptables {
  background: #10102b;
   border: thick groove;
  border-image: url(Site-Border.png) 30 stretch;
  border-image-width: 30px;
  margin: auto 25em;
  padding: 1em;
  box-shadow: 0.5em 0.5em 0.5em 0em #10102b;
  list-style-image: url('Catlist.png');
   list-style-position: inside;
   width: 31em;
}

#Adopt {
  position: relative;
  left: 25em;
  margin-bottom: -10em;
}

#about, #others, #FRIENDS, #Downloads, #Now, #Pidgeons {
  position: relative;
    left: 5em;
}

#interests, #trinkets, #Mine, #Resources, #links, #Previous {
  position: relative;
  right: 5em;
}

#stickA {
  position: relative;
  right: 26em;
  margin-bottom: -5em;
}

#stickB {
  position: relative;
  left: 26em;
  margin-bottom: -5em;
  }

#aboutad {
  position: relative;
  right: 20em;
}

#infoad {
  position: relative;
  right: 20em;
}

#adoptables {
  position: relative;
  left: 20em;
  top: -60em;
}

#Changelog {
position: relative;
 Right: 15em;
 top: -25em;
 width: 10%;
 font-size: 60%;
 padding: 2em;
 overflow: scroll;
 overflow-x: hidden;
 max-height: 10em;
 margin-bottom: -10em;
}

#guestbook {
  padding: 1em;
}

#list {
  width: 20%;
  top: 2em;
  left: 5em;
}

ul li img {
  max-width: 100%; 
    height: auto;
    vertical-align: middle;
     padding: 0;
    margin: 0;
}

img {
  margin-right: 1em;
  margin-bottom: 1em;
}

::selection {
  color: #1b1432;
  background: #B9F85C;
}
::-moz-selection {
  color: #1b1432;
  background: #B9F85C;
}

strong {
  color:#d73ca3;
}


p:first-child {
  color: #AF61C9;
}


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


a:hover { 
  color: #B9F85C;
}


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

@media only screen and (max-width: 500px) {
  body {
    transform: scale(0.27);
    transform-origin: top left;
    width: 500%;
    margin: 0;
    padding: 0;
  }
}

.container {
  display: flex;
}

.item {
  flex: 1;
}

H1 {
  color: #AF61C9;
  font-family: 'Averia Sans Libre', serif, arial;
  font-weight: Bold;
  font-style: Italic;
  border: thick groove;
  border-image: url(Dice-Border.png) 30 round;
  border-image-width: 20px;
   margin: 1em 15em 1em 15em;
}


H2 {
 color: #AF61C9;
 font-family: 'Averia Sans Libre', serif, arial;
  font-weight: Bold;
  font-style: Italic;
  border:thick groove;
  border-top-left-radius: 10em;
}

H3 {
  color: #AF61C9;
 font-family: 'Averia Sans Libre', serif, arial;
  font-weight: Bold;
  font-style: Italic;
  border:thick groove;
  border-radius: 10em;
}