/* 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-color: black;
  background-image:url("https://sojuukojuu.neocities.org/out1.png");
  color: white;
  font-family: Verdana;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  float: center;
  
}



@font-face {
  font-family: "EmotionEngine-8ynA";
  src: url("https://sojuukojuu.neocities.org/emotion-engine-font/EmotionEngine-8ynA.ttf")
  format("truetype");
  font-weight: normal;
  font-style: normal;
}

h1{
  font-family: EmotionEngine-8ynA;
  color: white;
  font-size: 48px;
  text-shadow: 
    -2px -2px 0 black, /* Top-left shadow */
    2px -2px 0 black,  /* Top-right shadow */
    -2px 2px 0 black,  /* Bottom-left shadow */
    2px 2px 0 black;   /* Bottom-right shadow */
  
}

h2{
  font-family: EmotionEngine-8ynA;
  color: white;
  font-size: 48px;
  text-shadow: 
    -2px -2px 0 black, /* Top-left shadow */
    2px -2px 0 black,  /* Top-right shadow */
    -2px 2px 0 black,  /* Bottom-left shadow */
    2px 2px 0 black;   /* Bottom-right shadow */
  
}

strong{
  text-shadow: 
    -2px -2px 0 black, /* Top-left shadow */
    2px -2px 0 black,  /* Top-right shadow */
    -2px 2px 0 black,  /* Bottom-left shadow */
    2px 2px 0 black;   /* Bottom-right shadow */
  
}


.button:hover {
  background-color: #b2d0f4; /* Green */
  color: black;
}



.button {
  background-color: black; 
  color: white;
  padding: 16px 64px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 2px;
  font-size: 40px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  transition-duration: 0.4s;
  float: center;
  border: 2px white;
  font-family: EmotionEngine-8ynA;
}
.button2{
  background-color: black; 
  color: white;
  padding: 16px 64px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 2px;
  font-size: 40px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  
  transition-duration: 0.4s;
  opacity: 0.6;
  cursor: not-allowed;
  float: center;
  border: 2px white;
  font-family: EmotionEngine-8ynA;
}

@keyframes spinbitch {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

.spinbitch {
  position: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateY(0deg);
  animation: spinbitch 6s infinite linear;
}

footer {
  position: center;
  }