@font-face {
font-family: "AdorableDoll";
src: url("https://husk.bugcage.workers.dev/fonts/AdorableDoll.woff");
}

@font-face {
font-family: "mbytepc";
src: url("https://husk.bugcage.workers.dev/fonts/Px437_MBytePC230_EGA[1].woff");
}

*,
*::before,
*::after {
box-sizing: border-box;
}

body {
color: #000;
background: url('img/bg.png') repeat;
font-family: "Nova Cut", system ui;
font-size: 16px;
font-weight: 400;
font-style: normal;
text-rendering: optimizeLegibility;
cursor: crosshair;
}

p {
text-shadow: 1px 1px 0 #444, -1px 1px 0 #666;
font-family: "Nova Cut", system ui;
font-size: 16px;
margin: 5px;
padding: 3px;
}

p.uppercase {
text-shadow: 1px 1px 0 #444, -1px 1px 0 #555;
text-transform: uppercase;
font-family: "Nova Cut", system ui;
font-weight: 600;
font-size: 16px;
margin: 3px;
}

h1 {
font-family: AdorableDoll;
color: red;
margin: 1px;
padding: 1px;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

h2 {
color: #555;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 2px 0 #000;
}

h3 {
text-shadow: 1px 1px 0 #444, -1px 1px 0 #444;
font-family: "Nova Cut", system ui;
font-weight: 600;
font-size: 16px;
margin: 3px;
}

a {
color: #000;
font: 16px "mbytepc";
font-weight: normal;
box-shadow: 0 1px 1px #000, inset 0 0 1px 1px #555;
text-decoration: none;
margin: 3px;
padding: 3px;
}

a:active {
color: #000;
font: 16px "mbytepc";
font-weight: normal;
box-shadow: 0 1px 1px #000, inset 0 0 1px 1px #555;
text-decoration: none;
margin: 5px;
padding: 5px;
}

a:hover {
color: red;
font: 16px "mbytepc";
font-weight: normal;
box-shadow: 0 0 1px 1px #555, inset 0 1px 1px #000;
text-shadow: 1px 1px 0 #444, -1px 1px 0 #000;
text-decoration: underline;
position: relative;
top: -1px;
left: 1px;
margin: 5px;
padding: 5px;
cursor:  help;
}

a:visited {
color: #000;
font-family: 16px "mbytepc";
font-weight: normal;
box-shadow: 0 1px 1px #000, inset 0 0 1px 1px #555;
text-decoration: none;
margin: 5px;
padding: 5px;
}

.main {
margin: auto 0; 
margin-top: 50px;
}

.flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
gap: 8px;
}

.header {
width: 550px;
height: auto;
border: none;
margin-bottom: -20px;
background-color: transparent;
align-self: center;
text-align: center;
}

.footer {
width: 550px;
height: auto;
border: none;
margin-top: -7px;
background-color: transparent;
align-self: center;
text-align: center;
}

.box {
width: 540px;
height: auto;
background-color: #333;
border: 4px ridge red;
border-radius: 8px;
box-shadow: 2px 2px #000;
align-self: center;
text-align: center;
padding: 8px;
z-index: 50;
}

.inner {
width: auto;
height: auto;
border: 1px solid #222;
border-radius: 8px;
background-color: #444;
box-shadow: 0 1px 1px #000, inset 0 0 1px 1px #555;
align-self: center;
text-align: center;
margin: auto;
}

.accent {
width: 220px;
height: 75px;
border: 1px solid #222;
border-radius: 30px;
background-color: #333;
box-shadow: 0 1px 1px #000, inset 0 0 1px 1px #555;
align-self: center;
text-align: center;
margin: auto;
margin-top: 8px;
}

.chida {
width: 300px;
height: auto;
filter: saturate(1.5);
}

.chida:hover{
filter: grayscale(1);
cursor: help;
}

.wing {
width: 22px;
height: 22px;
image-rendering: pixelated;
}

.img-bounce {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.img-bounce:hover {
  -webkit-animation-name: bounces;
  animation-name: bounces;
}

@-webkit-keyframes bounces {
  0%, 100%, 20%, 50%, 80% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@keyframes bounces {
  0%, 100%, 20%, 50%, 80% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}     
@keyframes fadeInUp {
  0% {
    transform: translateY(20%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

#fadeInUp-animation {
  animation: 1.5s fadeInUp;
}