* {
  box-sizing: border-box;
  image-rendering: pixelated;
  transition:0.3s;
  scrollbar-width:thin;
  scrollbar-color: #f88068 #4d3077
}

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

html {
  background-image: var(--background);
  background-size: 2000px;
  font-family:arial;
}

body {
  margin: 0px 0px 0px 0px;
}

h1 {
  font-size:40px;
}

h1,h2,h3 {
  font-family: "Pixelify Sans", sans-serif;
}

h3 {
  color:var(--purple);
  font-size:24px;
}

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

a:hover {
  color:var(--purple);
}

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

button {
  background:var(--pink);
  color:white;
  border:4px solid var(--purple);
  border-radius:8px;
  font-size:16px;
  padding:8px;
  width:100px;
  height:48px
}

a button:hover {
  cursor:pointer;
  filter:brightness(125%);
  box-shadow: 2px 2px 0px var(--purple);
}

.header {
  background: var(--yellow);
  width: 100%;
  margin: 0px;
  padding: 4px 16px;
  border-bottom: 4px solid var(--purple);
  position:sticky;
  top:0px;
  z-index:10;
}

.header nav {
  display:inline;
  float:right;
  position:relative;
  top:-72px;
}

.dropdown {
  display: inline-block;
  position: relative;
}

.dropdown-options {
  display: none;
  position: absolute;
  overflow: auto;
}

.dropdown:hover .dropdown-options {
  display: block;
}

.dropdown:click .dropdown-options {
  display: block;
}


.penelope {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  margin: 12px;
  margin-bottom: 0px;
  float:left;
}

.bounce:hover {
  animation-name: bounce;
  animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
}
@keyframes bounce {
  0% {
    transform: scale(1, 1) translateY(0);
  }
  10% {
    transform: scale(1.1, 0.9) translateY(0);
  }
  30% {
    transform: scale(0.9, 1.1) translateY(-8px);
  }
  50% {
    transform: scale(1.05, 0.95) translateY(0);
  }
  57% {
    transform: scale(1, 1) translateY(-0px);
  }
  64% {
    transform: scale(1, 1) translateY(0);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}


.sidebar {
  background: var(--yellow);
  border:4px solid var(--purple);
  border-radius:8px;
  margin:16px;
  width:200px;
  height:auto;
  position:fixed;
}

.sidebar h2 {
  width:90%;
  height:40px;
  line-height:30px;
  background:var(--pink);
  color:white;
  border:4px solid var(--purple);
  border-radius:16px;
  text-align:center;
  margin-top:2px;
  margin-bottom:20px;
}

.updates {
  height:120px;
  padding:8px;
  text-align:center;
  background:var(--purple);
  color:white;
  margin-top:-16px;
  border-radius:8px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color: var(--purple) var(--pink);
}

.updates a {
  font-weight:normal;
  color:white;
}

.updates a:hover {
  color:var(--yellow);
}

.sidebar button {
  height:32px;
  padding:0px;
  margin:-8px;
}

.sidebar img {
  margin-top:-8px;
}

.container {
  width:600px;
  height:auto;
  margin-left:240px;
  margin-top:16px;
  overflow-y:auto;
}

.box {
  background:var(--yellow);
  border: 4px solid var(--purple);
  border-radius:8px;
  width:100%;
  height:auto;
  padding:16px;
  font-size:18px;
  margin-bottom:16px;
}

.box img {
  max-width:100%;
}

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

.warning {
  background: var(--purple);
  color:white;
  padding:16px;
  text-align: center;
  border-radius:8px;
  margin-bottom:16px;
}

.too-small img {
  margin:24px;
  z-index:-100;
  -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2);
}
.too-small img:hover {
  -moz-transform: scale(4);
    -ms-transform: scale(4);
    -o-transform: scale(4);
    -webkit-transform: scale(4);
    transform: scale(4);
}

@media screen and (max-width: 920px) {
  .header nav {
  display:inline;
  float:none;
  position:relative;
  top:00px;
}
  
  .container {
    width:70%;
  }
}

@media screen and (max-width: 820px) {
  .container {
    width:60%;
  }
}

@media screen and (max-width: 920px) {
  .container {
    margin-left:0px;
    width:90%;
    margin:auto;
    margin-top:16px;
  }
  .sidebar {
    display:none;
  }
  
}