html {
  cursor: url(../images/cursor.gif), auto;
  scroll-behavior: smooth;
}

header img {
  display: block;
  max-width: 640px;
  width: 100%;
  margin: 25px auto 15px auto;
}

header {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
  background-color: transparent;
}

img {
  /* This  makes sure images are not blurred. */
  image-rendering: -moz-crisp-edges;          /* Firefox                        */
  image-rendering: -o-crisp-edges;            /* Opera                          */
  image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
  image-rendering: pixelated;                 /* Chrome */
  -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
}

body {
  margin: 0;
  color: white;
  min-height: 100vh;
  background-color: #000000;
}

main {
  border: 5px outset #008d97;
  border-radius: 2px;
  background-color: #016970;
  padding: 10px;
  font-family: 'JetBrains Mono', monospace;
  max-width: 645px;
  display: block;
  margin: 0px 0px 0px 140px;
}

#snowman {
  font-size: 200px;
  margin: 0;
  animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #d4af37, 0 0 40px #d4af37, 0 0 50px #d4af37, 0 0 60px #d4af37, 0 0 70px #d4af37;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #dddec3, 0 0 40px #dddec3, 0 0 50px #dddec3, 0 0 60px #dddec3, 0 0 70px #dddec3, 0 0 80px #dddec3;
  }
}

.section {
  margin: 0 auto;
  max-width: 800px;
  padding: 0 10px;
}

.background {
  width: 100%;
  padding: 0;
  margin: 0;
  background-position: bottom;
  background-color: black;
  background-repeat: repeat-x;
  background-attachment: fixed;
}

.bg_spacer {
  height: 20px;
}

#main_bg {
  background-image: url('../images/kirby_final_bg.png');
  animation: slide 24s linear infinite;
}

@keyframes slide {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 256px;
  }
}

#vapor_bg {
  background-image: url('../images/desktop/mactile.png');
  background-repeat: repeat;
}

#moon_bg {
  border-top: 2px solid #8048f0;
  border-bottom: 2px solid #8048f0;
  background-image: url('../images/earthbound_moonside_bg.png');
  background-position: top;
  background-position-x: 800px;
  animation: moon_slide 80s linear infinite;
  background-repeat: repeat;
}

@keyframes moon_slide {
  0% {
    background-position: 0;
  }
  100% {
    background-position: -1055px;
  }
}

#reading_bg {
  background-repeat: repeat;
  background-image: url('../images/papertext_bg.png');
  border-bottom: 2px solid #323232;
}

#end_bg {
  background-position: bottom;
  background-repeat: repeat;
  background-image: url('../images/brickpattern_bg.gif');
}

a {
  cursor: url(../images/cursor_link.gif), auto;
  color: white;
}

main p {
  line-height: 1.5;
  background-color: #00000027;
  border: 2px inset #00000042;
  border-radius: 2px;
  padding: 4px 6px;
}

h1 {
  margin-top: 6px;
  text-align: center;
}

h2 {
  text-align: center;
}

h2 a {
  color: white;
}

h3 {
  margin: 12px 8px 0px 8px;
}

#reading {
  color: #323232;
  background-color: rgba(238, 238, 238, 0.90);
  border: #323232 solid 2px;
  border-radius: 2px;
  background-repeat: repeat;
}

#reading a {
  color: #323232;
}

#reading p {
  background-color: transparent;
  border: none;
}

.reading_sidebar {
  color: #323232;
}

.reading_sidebar h3 {
  color: #323232;
}

/* .flex_center {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
} */

.flex_collection {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.collection_item {
  border-radius: 5px;
  transition: .1s;
  margin: 10px;
}

.collection_item:hover {
  position: relative;
  z-index: 1;
  transform: scale(2);
  background-color: transparent;
  filter: drop-shadow(6px 6px 0px #00000033);
  transition: .1s;
}

.wallpaper {
  margin: 10px;
  width: 100px;
  border: solid #666 2px;
}

.music {
  border-radius: 5px;
  transition: .1s;
  margin: 10px;
}

.game {
  border: #666 solid 1px;
}

.book {
  max-height: 280px;
  border-radius: 5px;
}

/* .spooky {
  font-family: 'IM Fell DW Pica SC', serif;
  background-color: #000000;
  border-radius: 10px;
  color: #fd9b78;
  border: 3px solid #fd9b78;
} */

.break {
  flex-basis: 100%;
  height: 0;
}

.old_change {
  margin-top: -14px;
  font-size: 10px;
}

#changelog {
  border: #666 solid 1px;
  border-radius: 10px;
  background-color: #323232;
  box-shadow: 0 4px 0 0 #666;
}

#changelog p {
  border: #666 solid 1px;
  border-radius: 4px;
  background-color: #323232;
  box-shadow: 0 2px 0 0 #666;
  margin-bottom: 22px;
  padding: 8px;
}

.stamp {
  width: 99px;
  height: 56px;
  margin: 2px;
  position: relative;
  z-index: 0;
  filter: drop-shadow(0 0 0px #000000);
  transition: .5s;
}

.stamp:hover {
  position: relative;
  z-index: 1;
  transform: scale(2);
  background-color: transparent;
  filter: drop-shadow(6px 6px 0px #00000033);
  transition: .1s;
}

.stamp_collection {
  /* Optional Paper Background */
  background-image:
    -webkit-linear-gradient(0deg, transparent 4em, rgba(255,0,0,.2) 0, transparent 4.1em),
    -webkit-linear-gradient(rgba(122, 122, 122, 0.3) 2px, transparent 0);
  background-image:
    -moz-linear-gradient(0deg, transparent 4em, rgba(255,0,0,.2) 0, transparent 4.1em),
    -moz-linear-gradient(rgba(122, 122, 122, 0.3) 2px, transparent 0);
  background-image:
    -o-linear-gradient(0deg, transparent 4em, rgba(255,0,0,.2) 0, transparent 4.1em),
    -o-linear-gradient(rgba(122, 122, 122, 0.3) 2px, transparent 0);
  background-image:
    -ms-linear-gradient(0deg, transparent 4em, rgba(255,0,0,.2) 0, transparent 4.1em),
    -ms-linear-gradient(rgba(122, 122, 122, 0.3) 2px, transparent 0);
  -webkit-background-size: 100% 2em;
  -moz-background-size: 100% 2em;

  background-image:
    linear-gradient(0deg, transparent 4em, rgba(255,0,0,.2) 0, transparent 4.1em),
    linear-gradient(rgba(122, 122, 122, 0.3) 2px, transparent 0);
  background-size: 100% 2em;
  /* End Optional Paper Background */

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px;
  background-color: rgb(202, 228, 228);
  border-radius: 10px;
}

.badge {
  width: 88px;
  height: 31px;
  margin: 2px;
}

.badge_collection {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  padding: 4px 2px 4px 2px;
  background-color: #323232;
  border-radius: 2px;
}

.dragon {
  align-content: center;
  margin: 8px;
  position: relative;
  z-index: 0;
  filter: drop-shadow(0 0 0px #000000);
  transition: .5s;
}

.dragon:hover {
  position: relative;
  z-index: 1;
  transform: scale(2);
  background-color: transparent;
  filter: drop-shadow(0 0 8px #ffffff80);
  transition: .1s;
}

.dragon_collection {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  padding: 2px;
  border-radius: 10px;
  border: 1px solid #ffffff42;
  background-color: #0000002a;
}

/* -BEGIN SIDEBAR- */
.sidebar {
  float: left;
  width: 100px;
}

.sidebar_element {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  padding: 10px;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;

  border-radius: 2px;
  width: 100px;
}

.sidebar p {
  margin: -6px 0 -2px 0;
  font-size: 12px;
  text-align: left;
}

.sidebar h1 {
  font-size: 20px;
  margin-top: 0px;
  margin-bottom: 4px;
}

.sidebar h3 {
  font-size: 14px;
  text-align: center;
  margin-bottom: 2px;
}

.home_sidebar #links {
  color: black;
  background: #ebb1ba;
  border: 5px outset #ffc5ce;
}

.home_sidebar #badges {
  border: 5px outset #646464;
  background-color: #555555;
}

.home_sidebar a {
  color: black;
}

.home_sidebar h3 {
  color: black;
}

.moonsidebar {
  color: white;
  border: 2px solid #8048f0;
  border-radius: 2px;
  background-color: black;
  padding: 13px;
}

/* border: 2px solid #00f868; */

.moonsidebar .badge_collection {
  background-color: black;
}

.moonsidebar .links {
  color: white;
}

.moonsidebar h3 {
  color: white;
}


#badges h1 {
  font-size: 15px;
  margin-bottom: 2px;
}

#meso_button {
  color: #008d97;
  border: 5px outset #FFF;
  background-color: #EEE;
}

#meso_button h1 {
  color: #008d97;
  font-size: 18px;
}

#spiritcellar {
  font-family: 'Vollkorn', serif;
  color: #440661;
  border: 5px outset #e2a4ff;
  background-color: #af73bd;
}

#spiritcellar h1 {
  letter-spacing: 2px;
  margin-top: -10px;
  margin-bottom: 8px;
  font-size: 24px;
  line-height: 80%;
}

#spiritcellar h2 {
  letter-spacing: 1px;
  font-weight: 400;
  margin-top: 0px;
  font-size: 12px;
}

#kirb {
  margin-top: -2px;
}

.moon_main {
  padding: 18px;
  background-color: black;
  border: 2px solid #8048f0;
  border-radius: 2px;
}

.moon_main p {
  border: none;
}

.footer {
  float: bottom;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  text-align: center;
  display: block;
  text-align: center;
  margin: 20px auto 0 auto;
}