h1 {
  color: white;
  translate: 0px -25px;
  
}
.twitch {
  color: blueviolet;
  text-align: center;
  font-family: casual;
  font-size: 150%;
  width: 25%;
}
.gamejolt {
  color: limegreen;
  text-align: center;
  font-family: casual;
  font-size: 150%;
  width: 25%;
}
.discord {
  color: dodgerblue;
  text-align: center;
  font-family: casual;
  font-size: 150%;
  width: 25%;
}
h2 {
  color: white;
  translate: 0px -25px;
}
h3 {
  color: white;
  translate: 0px -25px;
}
h4 {
  color: white;
  translate: 0px -25px;
}
html {
  background: black;
  font-family: casual;
  
}
h5 {
  color: white;
  translate: 0px -25px;
}
h6 {
  color: white;
  translate: 0px -25px;
}
body, .box {
  background-color: black;
  border-style: double;
  border-color: white;
  border-width: 10px;
  border-radius: 10px;
}


a {
  list-style: none;
  text-decoration-line: none;
}
.petimg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-width: 0px;
  border-color: white;
  border-radius: 500px;
}
.center {
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.fixed {
  display: block;
  height: 400px;
  width: auto;
  border-style: solid;
  border-width: 5px;
  border-color: black;
  border-radius: 50px;
  margin-left: auto;
  margin-right: auto;
}
.border {
  border-style: solid;
  border-width: 5px;
  border-color: lightgreen;
  border-radius: 50px;
  animation: border 1s infinite ease-in-out;
}
.pettxt {
  text-align: center;
  color: blueviolet;
  translate: 0px -25px;
}
progress {
  display: solid;
  margin-left: auto;
  margin-right: auto;
}
.game {
  border-style: solid;
  border-color: white;
  border-radius: 50px;
  border-width: 5px
}
summary {
  color: white;
}
.red {
  color: red;
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-size: 23px
}
.misbox {
  border-color: red;
  border-style: double;
  border-radius: 0px;
  border-width: 10px;
  background-color: darkred;
  
}
.mistxt {
  text-align: center;
  color: white;
  outline-color: red;
  outline-style: double;
  outline-width: 10px;
  translate: 0px -21.5px;
}
.mishtml {
  background-color: #360000;
}
.mistext {
  text-align: center;
  color: white;
}
.misblack {
  text-align: center;
  color: black;
}
.link {
  color: mediumspringgreen;
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-size: 200%;
}
.classic {
  color: crimson;
  text-align: center;
  text-decoration: darkred;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.post {
  text-decoration-line: none;
  display: block;
  margin-left: auto; 
  margin-right: auto;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translatey(110px);
  }
  to {
    opacity: 1;
    transform: translatey(30px);
  }
}
@keyframes move {
  from {
    transform: translatex(-200px)
  }
  to {
    transform: translatex(0px)
  }
}

body {
  scroll-behavior: smooth;
  justify-content: center;
  
}
.games-button {
  text-align: center;
  animation: games 1s infinite ease-in-out;
}
@keyframes games {
  from {
    transform: translatex(100px) rotate(-5deg);
    
  }
  to {
    transform: translatex(-100px) rotate(365deg);
    
  }
}
@keyframes border {
  from {
    border-color: blue;
  }
  to {
    border-color: darkviolet;
  }
}
div {
  align-content: startx;
}
html, body {
  height: auto;
  width:100%;
  top: 25px;
}
div {
  background-color: black;
  border-style: double;
  border-width: 10px;
  border-radius: 10px;
  border-color: white;
  display: flex;
  align-items: center;
  justify-items: center;
  gap: 1%;
  text-align: center;
  align-content: center;
  height: fit-content;
  flex-wrap: wrap;
  
}

.top {
  position: fixed;
  left: -10px;
  top: -25px;
  width: 100%;
  height: 50px;
  animation: down 2s ease-out;
}
@keyframes down {
  from {
    opacity: 0;
    transform: translatey(-200px);
    
  }
  to {
    opacity: 1;
    transform: translatey(0);
  }
}
.divbutton {
  border-style: solid;
  border-width: 2px;
  border-radius: 10px;
  border-color: white;
  background-color: dodgerblue;
  height: 40px;
  width: fit-content;
}
.diva {
  color: white;
  font-family: casual;
  font-size: 150%
}
.divh2 {
  transform: translatey(25px);
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-size: 150%;
}
.gamejoltbutton {
  border-style: double;
  border-radius: 5px;
  border-width: 5px;
  border-bottom-color: green;
  border-top-color: greenyellow;
  background-color: black;
  width: 50%;
  height: fit-content;
  border-left-color: limegreen;
  border-right-color: limegreen;
  margin-left: 25%;
  margin-right: 25%;
}
.twitchbutton {
  border-style: double;
  border-radius: 5px;
  border-width: 5px;
  border-bottom-color: darkmagenta;
  border-top-color: darkviolet;
  background-color: black;
  width: 50%;
  height: fit-content;
  border-left-color: purple;
  border-right-color: purple;
  margin-left: 25%;
  margin-right: 25%;
}
.discordbutton {
  border-style: double;
  border-radius: 5px;
  border-width: 5px;
  border-bottom-color: darkblue;
  border-top-color: dodgerblue;
  background-color: black;
  width: 50%;
  height: fit-content;
  border-left-color: blue;
  border-right-color: blue;
  margin-left: 25%;
  margin-right: 25%;
}
.fadein {
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
}