:root {
  --scrolllength: 3s;
  
  --partybg: #dbabc6;
  --partydark: #c86b96;
  
  --gearbg: #d7cd76;
  --geardark: #bb9c21;
  
  --badgebg: #a2d26e;
  --badgedark: #2fa530;
  
  --journalbg: #78b3d6;
  --journaldark: #287ec5;
  
  --pauseborderheight: 15px;
}
@font-face {
  font-family: "Pop Joy";
  src: url("fonts/popjoy.otf") format("opentype");
}
@font-face {
  font-family: "Mario256";
  src: url("fonts/SuperMario256.ttf") format("truetype");
}
p {
  margin-top: 5px;
  margin-bottom: 5px;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}
h1:first-of-type, h2:first-of-type, h3:first-of-type, h4:first-of-type, h5:first-of-type, h6:first-of-type {
  margin-top: 0;
}
#sysmsg h1, #sysmsg h2, #sysmsg h3, #sysmsg h4, #sysmsg h5, #sysmsg h6 {
  margin-top: 1em;
  margin-bottom: 1em;
}
body {
  padding: 38px;
  padding-bottom: 0;
  
  font-family: "Pop Joy";
  font-size: 1em;
  
  background-color: var(--partybg);
  
  image-rendering: pixelated;
}
.title {
  display: block;
  margin: auto;
  margin-top: -38px;
  margin-bottom: 10px;
  
  max-width: 100%;
  width: auto;
  height: auto;
}
.dropshadow {
  filter: drop-shadow(7px 7px 0 #00000077);
}
.bgmain {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  
  border-image: url("images/bg-1.png");
  border-image-slice: 32;
  border-image-width: 32px;
  border-image-repeat: round;
  
  background-color: #4f9675;

  z-index: -99;
}
.bgpattern{
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  
  background-color: inherit;
  background-image: url("images/bg-trans.png");
  background-blend-mode: screen;
  opacity: 0.5;
  background-attachment: fixed;
  background-repeat: repeat;
  /*animation: bg-scroll var(--scrolllength) linear infinite;*/
  background-position: 0 0;
  
  z-index: -999;
}
.border {
  padding: 12px;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 15px;
  margin-top: 20px;
}
#sysmsg {
  padding-left: 33px;
  padding-right: 33px;
  
  border: 11px solid;
  border-image: url("images/sysborder.png");
  border-image-slice: 22 21 22 21;
  border-image-width: 22px;
  border-image-repeat: stretch;
  
  color: white;
  
  border-radius: 30px;
  background-image: url("images/msgWindow_5.png");
  background-attachment: fixed;
  background-repeat: repeat;
  animation: bg-scroll var(--scrolllength) linear infinite;
  background-position: 0 0;
}
#bubble {
  border: 6px solid;
  border-image: url("images/bubble.png");
  border-image-slice: 24 fill;
  border-image-width: 24px;
  border-image-repeat: stretch;
  
  position: relative;
  margin-bottom: -25px;
  z-index: 5;
}
#bubble h1, #bubble h2, #bubble  h3, #bubble  h4, #bubble  h5, #bubble h6 {
  margin-top: 0;
  margin-bottom: 0;
}
#inbubble {
  border: 8px solid;
  border-image: url("images/inbubble.png");
  border-image-slice: 16 fill;
  border-image-width: 16px;
  border-image-repeat: stretch;
}
#sortbox {
  margin-top: -15px;
  
  border: 12px solid;
  border-image: url("images/sortbox.png");
  border-image-slice: 24 fill;
  border-image-width: 24px;
  border-image-repeat: round;
}
.titlebar {
  height: 40px;
  width: 224px;
  margin: auto;
  margin-bottom: -35px;
  margin-top: -15px;
  
  background-image: url("images/titlebar.png");
  background-position: 0 0;
  
  position: relative;
  z-index: 5;
  
  text-align: center;
}
#yellow {
  background-position: -224px 0;
}
#green {
  background-position: -448px 0;
}
#blue {
  background-position: -670px 0;
}
.titlebar p {
  padding: 5px;
}
.note {
  border: 6px solid;
  border-image-slice: 17 fill !important;
  border-image-width: 17px !important;
  border-image-repeat: round !important;
  
  padding-left: 11px;
  padding-right: 11px;
  margin-top: 10px;
  margin-bottom: 10px;
}
#note1 {
  border-image: url("images/note1.png");
}
#note2 {
  border-image: url("images/note2.png");
}

.flex {
  display: flex;
  align-content: center;
  align-items: flex-start;
  justify-content: center;
  flex-flow: row wrap;
  gap: 15px;
}
.growshrink {
  flex-grow: 1;
  flex-shrink: 1;
}
.subtitle {
  margin: auto;
  width: fit-content;
  text-align: center;
}

/* ICONS */
.icon {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: relative;
  top: 10px;
  margin-top: -14px;
  
  object-position: 0 0;
  object-fit: none;
}
.badge {
  content: url("images/badges.png");
}
.obj {
  content: url("images/icons.png");
}

@keyframes bg-scroll {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -127px 64px;
  }
}

/*WAVE TEXT ANIM*/

.waveletter {
  position: relative;
  display: inline-block;
  top: -0.05em;
  left: -0.05em;
  /*transform: rotate(var(--degree)) translateX(0.5em) rotate(calc(var(--degree) * -1));*/
  animation: orbit 0.8s linear infinite;
  -webkit-animation: orbit 0.8s linear infinite;
}
@keyframes orbit {
  from {
	  transform: rotate(0deg) translateX(0.1em) rotate(0deg);
	}
	to {
	  transform: rotate(360deg) translateX(0.1em) rotate(-360deg);
	}
}
@-webkit-keyframes orbit {
  from {
	  transform: rotate(0deg) translateX(0.1em) rotate(0deg);
	}
	to {
	  transform: rotate(360deg) translateX(0.1em) rotate(-360deg);
	}
}

/*TEXT COLORS*/

#stylish {
  color: #EF598C;
}