* {
  box-sizing: border-box;
  image-rendering: pixelated;
  font-family: arial;
  scroll-behavior: smooth;
  scrollbar-width:thin;
  scrollbar-color: #f88068 #4d3077
}

:root {
  --background: url(https://neoskitties.org/assets/background.png);
  --pink: #f88068;
  --purple: #4d3077;
  --yellow: #f0f098;
}

html {
  background: black;
  background-image: var(--background);
  background-size: cover;
  background-position: center;
  color: black;
}

h1,
h2,
h3 {
  font-family: "Pixelify Sans", sans-serif;
  text-align: center;
  font-weight: 400;
}

h2 {
  font-size: 28px;
}

h3 {
  line-height: 12px;
}

summary {
  font-weight: bold;
  color: black;
}

a {
  color: black;
  text-decoration: underline dotted;
}

ul {
  list-style-image: url(https://neoskitties.org/assets/premier-ball-still.png);
  line-height: 32px;
}

h2 {
  width:100%;
  height:40px;
  line-height:30px;
  background:var(--pink);
  color:white;
  border:4px solid var(--purple);
  border-radius:16px;
  text-align:center;
}

.mainbox {
  background: var(--yellow);
  border: 4px solid var(--purple);
  border-radius:8px;
  padding: 8px 24px;
  width: 60%;
  margin: auto;
  margin-top: 24px;
  margin-bottom: 24px;
}

.nav {
  font-size: 24px;
}

.nav img {
  width: 12px;
}

.member {
  width: 169px;
  height: 128px;
}

.sprite {
  background-image: url(https://neoskitties.org/assets/boxes.png);
  background-repeat: no-repeat;
  display: inline-block;
  padding: 2px;
  font-size: 20px;
  line-height: 4px;
  width: 169px;
  height: 128px;
}

.a1 {
  width: 169px;
  height: 129px;
  background-position: 0 0;
}

.b1 {
  width: 169px;
  height: 129px;
  background-position: -169px 0;
}

.c1 {
  width: 169px;
  height: 129px;
  background-position: -338px 0;
}

.d1 {
  width: 169px;
  height: 129px;
  background-position: -507px 0;
}

.e1 {
  width: 169px;
  height: 129px;
  background-position: -676px 0;
}

.a2 {
  width: 169px;
  height: 129px;
  background-position: 0 -129px;
}

.b2 {
  width: 169px;
  height: 129px;
  background-position: -169px -129px;
}

.c2 {
  width: 169px;
  height: 129px;
  background-position: -338px -129px;
}

.d2 {
  width: 169px;
  height: 129px;
  background-position: -507px -129px;
}

.e2 {
  width: 169px;
  height: 129px;
  background-position: -676px -129px;
}

.a3 {
  width: 169px;
  height: 129px;
  background-position: 0 -258px;
}

.b3 {
  width: 169px;
  height: 129px;
  background-position: -169px -258px;
}

.c3 {
  width: 169px;
  height: 129px;
  background-position: -338px -258px;
}

.d3 {
  width: 169px;
  height: 129px;
  background-position: -507px -258px;
  color: black;
}

.d3 a {
  color: black;
}

.e3 {
  width: 169px;
  height: 129px;
  background-position: -676px -258px;
}

.a4 {
  width: 169px;
  height: 129px;
  background-position: 0 -387px;
}

.b4 {
  width: 169px;
  height: 129px;
  background-position: -169px -387px;
}

.c4 {
  width: 169px;
  height: 129px;
  background-position: -338px -387px;
}

.d4 {
  width: 169px;
  height: 129px;
  background-position: -507px -387px;
}

.e4 {
  width: 169px;
  height: 129px;
  background-position: -676px -387px;
}

.a5 {
  width: 169px;
  height: 129px;
  background-position: 0 -516px;
}

.b5 {
  width: 169px;
  height: 129px;
  background-position: -169px -516px;
}

.c5 {
  width: 169px;
  height: 129px;
  background-position: -338px -516px;
}

.d5 {
  width: 169px;
  height: 129px;
  background-position: -507px -516px;
}

.e5 {
  width: 169px;
  height: 129px;
  background-position: -676px -516px;
}

.a6 {
  width: 169px;
  height: 129px;
  background-position: 0 -645px;
}

.b6 {
  width: 169px;
  height: 129px;
  background-position: -169px -645px;
}

.c6 {
  width: 169px;
  height: 129px;
  background-position: -338px -645px;
}

.d6 {
  width: 169px;
  height: 129px;
  background-position: -507px -645px;
}

.e6 {
  width: 169px;
  height: 129px;
  background-position: -676px -645px;
}

.a7 {
  width: 169px;
  height: 128px;
  background-position: -845px 0;
}

.b7 {
  width: 169px;
  height: 128px;
  background-position: -845px -128px;
}

.c7 {
  width: 169px;
  height: 128px;
  background-position: -845px -256px;
}

.d7 {
  width: 169px;
  height: 128px;
  background-position: -845px -384px;
}

.e7 {
  width: 169px;
  height: 128px;
  background-position: -845px -512px;
}

@media screen and (max-width: 1120px) {
  .mainbox {
    width: 80%;
  }
}

@media screen and (max-width: 850px) {
  .mainbox {
    width: 90%;
  }
}

@media screen and (max-width: 760px) {
  .mainbox {
    width: 100%;
  }
}