@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap");
/* Document
 * ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
:where(html) {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  text-size-adjust: 100%; /* 2 */
}

/* Sections
 * ========================================================================== */
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */
:where(h1) {
  font-size: 2em;
  margin-block-end: 0.67em;
  margin-block-start: 0.67em;
}

/* Grouping content
 * ========================================================================== */
/**
 * Remove the margin on nested lists in Chrome, Edge, and Safari.
 */
:where(dl, ol, ul) :where(dl, ol, ul) {
  margin-block-end: 0;
  margin-block-start: 0;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Correct the inheritance of border color in Firefox.
 */
:where(hr) {
  box-sizing: content-box; /* 1 */
  color: inherit; /* 2 */
  height: 0; /* 1 */
}

/* Text-level semantics
 * ========================================================================== */
/**
 * Add the correct text decoration in Safari.
 */
:where(abbr[title]) {
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
:where(b, strong) {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
:where(code, kbd, pre, samp) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
:where(small) {
  font-size: 80%;
}

/* Tabular data
 * ========================================================================== */
/**
 * 1. Correct table border color in Chrome, Edge, and Safari.
 * 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
 */
:where(table) {
  border-color: currentColor; /* 1 */
  text-indent: 0; /* 2 */
}

/* Forms
 * ========================================================================== */
/**
 * Remove the margin on controls in Safari.
 */
:where(button, input, select) {
  margin: 0;
}

/**
 * Remove the inheritance of text transform in Firefox.
 */
:where(button) {
  text-transform: none;
}

/**
 * Correct the inability to style buttons in iOS and Safari.
 */
:where(button, input:is([type=button i], [type=reset i], [type=submit i])) {
  -webkit-appearance: button;
}

/**
 * Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */
:where(progress) {
  vertical-align: baseline;
}

/**
 * Remove the inheritance of text transform in Firefox.
 */
:where(select) {
  text-transform: none;
}

/**
 * Remove the margin in Firefox and Safari.
 */
:where(textarea) {
  margin: 0;
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */
:where(input[type=search i]) {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Remove the inner border and padding of focus outlines in Firefox.
 */
:where(button, input:is([type=button i], [type=color i], [type=reset i], [type=submit i]))::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus outline styles unset by the previous rule in Firefox.
 */
:where(button, input:is([type=button i], [type=color i], [type=reset i], [type=submit i]))::-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove the additional :invalid styles in Firefox.
 */
:where(:-moz-ui-invalid) {
  box-shadow: none;
}

/* Interactive
 * ========================================================================== */
/*
 * Add the correct styles in Safari.
 */
:where(dialog) {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}

:where(dialog:not([open])) {
  display: none;
}

/*
 * Add the correct display in all browsers.
 */
:where(summary) {
  display: list-item;
}

.has-text-shade-1 {
  color: #fad6ff;
}

.has-background-shade-1 {
  background-color: #fad6ff;
}

.has-text-shade-2 {
  color: #ceaaed;
}

.has-background-shade-2 {
  background-color: #ceaaed;
}

.has-text-shade-3 {
  color: #7864c6;
}

.has-background-shade-3 {
  background-color: #7864c6;
}

.has-text-shade-4 {
  color: #494182;
}

.has-background-shade-4 {
  background-color: #494182;
}

.has-text-light {
  color: #ffffff;
}

.has-background-light {
  background-color: #ffffff;
}

.has-text-dark {
  color: #373334;
}

.has-background-dark {
  background-color: #373334;
}

.has-border {
  border: 2px dotted #494182;
}

.has-box-shadow {
  box-shadow: 2px 2px 4px #494182;
}

.has-text-shadow {
  text-shadow: 2px 2px 4px #494182;
}

.is-bold {
  font-weight: 900;
}

.is-italic {
  font-style: italic;
}

.is-small {
  font-size: small;
}

.is-left-aligned {
  text-align: left;
}

.is-center-aligned {
  text-align: center;
}

.is-right-aligned {
  text-align: right;
}

.flex {
  display: flex;
  gap: 8px;
}
.flex.is-left-justified {
  justify-content: left;
}
.flex.is-center-justified {
  justify-content: center;
}
.flex.is-right-justified {
  justify-content: right;
}
.flex.is-horizontal {
  flex-direction: row;
}
.flex.is-vertical {
  flex-direction: column;
}
.flex.is-wrapped {
  flex-wrap: wrap;
}
.flex.is-gapless {
  gap: 0px;
}
.flex > * {
  margin-top: 0px;
  margin-bottom: 0px;
}
.flex > .is-extended {
  flex-grow: 1;
}

.container {
  width: calc(100vw - 32px);
  margin: 0px auto;
  padding: 16px 0px;
}
@media screen and (min-width: 768px) {
  .container {
    width: 640px;
    padding: 32px 0px;
  }
}
@media screen and (min-width: 1024px) {
  .container {
    width: 768px;
    padding: 32px 0px;
  }
}

.window {
  padding: 12px 0px 0px;
  border: 2px #494182 solid;
  border-image-source: url("/assets/background.png");
  border-image-slice: 14 38 8 12 fill;
  border-image-width: 14px 38px 8px 12px;
  border-image-outset: 0;
  border-image-repeat: repeat;
  box-shadow: 2px 2px 4px #494182;
}

.navbar {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}
.navbar a {
  padding: 2px 4px;
  border: none;
  color: #494182;
  font-weight: 700;
}
.navbar a:hover, .navbar a:active {
  color: #373334;
}

.footer {
  margin-top: 16px;
  font-size: small;
  text-align: center;
}
.footer p {
  font-weight: 900;
  color: #ffffff;
  text-shadow: 2px 2px 4px #494182;
}

.section {
  padding: 12px;
}
.section.is-sm {
  padding: 6px;
}

.m-0 {
  margin: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.mx-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.m-4 {
  margin: 4px !important;
}

.mt-4 {
  margin-top: 4px !important;
}

.mr-4 {
  margin-right: 4px !important;
}

.mb-4 {
  margin-bottom: 4px !important;
}

.ml-4 {
  margin-left: 4px !important;
}

.mx-4 {
  margin-left: 4px !important;
  margin-right: 4px !important;
}

.mx-4 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.m-8 {
  margin: 8px !important;
}

.mt-8 {
  margin-top: 8px !important;
}

.mr-8 {
  margin-right: 8px !important;
}

.mb-8 {
  margin-bottom: 8px !important;
}

.ml-8 {
  margin-left: 8px !important;
}

.mx-8 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.mx-8 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.m-12 {
  margin: 12px !important;
}

.mt-12 {
  margin-top: 12px !important;
}

.mr-12 {
  margin-right: 12px !important;
}

.mb-12 {
  margin-bottom: 12px !important;
}

.ml-12 {
  margin-left: 12px !important;
}

.mx-12 {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

.mx-12 {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.m-16 {
  margin: 16px !important;
}

.mt-16 {
  margin-top: 16px !important;
}

.mr-16 {
  margin-right: 16px !important;
}

.mb-16 {
  margin-bottom: 16px !important;
}

.ml-16 {
  margin-left: 16px !important;
}

.mx-16 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.mx-16 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.px-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.p-4 {
  padding: 4px !important;
}

.pt-4 {
  padding-top: 4px !important;
}

.pr-4 {
  padding-right: 4px !important;
}

.pb-4 {
  padding-bottom: 4px !important;
}

.pl-4 {
  padding-left: 4px !important;
}

.px-4 {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.px-4 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.p-8 {
  padding: 8px !important;
}

.pt-8 {
  padding-top: 8px !important;
}

.pr-8 {
  padding-right: 8px !important;
}

.pb-8 {
  padding-bottom: 8px !important;
}

.pl-8 {
  padding-left: 8px !important;
}

.px-8 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.px-8 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.p-12 {
  padding: 12px !important;
}

.pt-12 {
  padding-top: 12px !important;
}

.pr-12 {
  padding-right: 12px !important;
}

.pb-12 {
  padding-bottom: 12px !important;
}

.pl-12 {
  padding-left: 12px !important;
}

.px-12 {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.px-12 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.p-16 {
  padding: 16px !important;
}

.pt-16 {
  padding-top: 16px !important;
}

.pr-16 {
  padding-right: 16px !important;
}

.pb-16 {
  padding-bottom: 16px !important;
}

.pl-16 {
  padding-left: 16px !important;
}

.px-16 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.px-16 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

* {
  box-sizing: border-box;
  white-space-collapse: collapse;
}

body {
  margin: 0;
  background: url("/assets/cover.png");
  background-position: top center;
  font-family: "Sour Gummy", "Cherry Bomb One", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #494182;
}
body a {
  color: #7864c6;
  border-bottom: 1px dotted #7864c6;
  text-decoration: none;
}
body a:hover, body a:active {
  color: #494182;
  border-bottom: #494182;
}
body a:has(img) {
  border-bottom: none;
}

.content {
  padding: 12px;
}
.content :first-child {
  margin-top: 0;
}
.content :last-child {
  margin-bottom: 0;
}
.content ul {
  list-style-image: url("/assets/images/list_icon.png");
  list-style-type: circle;
  padding-left: 1.25em;
}
.content .emoji {
  height: 1em;
  width: 1em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.1em;
}
.content .fancy-title {
  text-align: center;
  color: #7864c6;
}
.content .fancy-title:before {
  content: "☙ ";
}
.content .fancy-title:after {
  content: " ❧";
}

.badges, .stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  align-items: flex-start;
  align-self: center;
  margin-bottom: 4px;
}
.badges.badges a, .stamps.badges a {
  width: 88px;
  height: 31px;
  border-bottom: none;
}
.badges.stamps a, .stamps.stamps a {
  width: 99px;
  height: 56px;
  border-bottom: none;
}

.box {
  padding: 8px;
  background-color: #ffffff;
  border: 2px dotted #494182;
}
.box.is-tight {
  padding: 0;
}
.box.is-transparent {
  background: none;
}

.separator {
  border-top: 2px solid #494182;
}