/* creepster-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Creepster';
  font-style: normal;
  font-weight: 400;
  src: url('/utility/fonts/creepster-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* schoolbell-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Schoolbell';
  font-style: normal;
  font-weight: 400;
  src: url('/utility/fonts/schoolbell-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* cherry-bomb-one-regular - latin_vietnamese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cherry Bomb One';
  font-style: normal;
  font-weight: 400;
  src: url('/utility/fonts/cherry-bomb-one-v11-latin_vietnamese-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* fuzzy-bubbles-regular - latin_vietnamese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Fuzzy Bubbles';
  font-style: normal;
  font-weight: 400;
  src: url('/utility/fonts/fuzzy-bubbles-v9-latin_vietnamese-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

* {
  box-sizing: border-box;
}

header {
  display: none;
}

body {
  color: #1a0909;
  font-family: schoolbell;
  font-size: 20px;
  cursor: url(https://ani.cursors-4u.net/nature/nat-11/nat1048.cur), auto !important;
  margin: 0;
  line-height: 1.25em;
  background: black;
}

strong {
  color: #63074f;
}

a {
  color: #be0a28;
  text-decoration: none;
  text-shadow: 1px 1px #63074f;
}

main {
  display: flex;
  position: relative;
  justify-content: center;
}

h1,
h2,
h3,
h4 {
  font-family: creepster;
  font-size: 1.5em;
  margin: 0 0 0.3em 0;
  letter-spacing: 3px;
  text-shadow: 1px 1px black;
  border-bottom: 1px solid #49281F;
  padding: 5px 10px;
}

h1 {
  color: #be0a28;
}

h2 {
  color: #63074f;
}

h3 {
  color: #a1db34;
}

h4 {
  color: #0d2a3f
}

blockquote {
  padding-left: 1em;
  border-left: 1px solid #FF008F;
  font-style: italic;
}

ul {
  list-style-type: "+ ";
}

.taglist {
  width: 100%;
  height: 20px;
}

.taglist a {
  font-family: creepster;
}

img.right {
  float: right;
  padding: 10px;
  margin: 0;
}

img.left {
  float: left;
  padding: 10px;
  margin: 0;
}


@media only screen and (min-width:390px) {

  header {
    font-family: creepster;
    width: 100%;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    font-size: 0.97em;
    text-decoration: none;
    letter-spacing: 1px;
    padding: 5px;
  }

  footer {
    font-size: 0.8em;
    text-align: center;
    width: 100%;
    margin-top: 1em;
  }

  nav a {
    margin-right: 1vw;
    color: #a71387;
  }

  .side {
    display: none;
  }

  .sidep {
    display: none;
  }

  button {
    display: none;
  }

  .block {
    display: none;
  }

  .container {
    margin-top: 10%;
    border: none;
    max-height: fit-content;
    width: 85%;
    overflow-y: hidden;
  }

  .content {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 20px;
    background-image: url("/utility/darkgrid.png");
    padding: 20px;
  }

  .complete {
    background: #6E6A74;
    padding: 20px;
    box-shadow: 5px 5px #49281F;
    max-height: 90%;
    overflow-y: scroll;
    opacity: 90%;
    clip-path: polygon(-0.28% 0.29%, 5.69% 0.36%, 14.72% 0.01%, 19.74% 0.34%, 33.11% 0.22%, 42.91% 0.42%, 48.69% 0.18%, 55.61% 0.52%, 65.77% 0.16%, 76.64% 0.46%, 85.82% 0.19%, 90.94% 0.59%, 97.43% 0.34%, 98.2% 9.29%, 99% 99%, 94.34% 99.75%, 87% 100%, 78.93% 99.86%, 72% 100%, 67.33% 99.75%, 54% 100%, 40.83% 99.78%, 35% 100%, 28.27% 99.73%, 23% 100%, 15% 99.86%, 5% 100%, 7px 99%);
  }

  .full {
    background: #6E6A74;
    padding: 10px;
    box-shadow: 5px 5px #49281F;
    max-height: 300px;
    overflow: scroll;
    opacity: 90%;
    clip-path: polygon(0.53% 3.94%, 8.21% 2.08%, 16.47% -0.15%, 22.27% 2.62%, 30.22% 1.68%, 39.71% 3.94%, 47.79% 1.7%, 54.01% 2.79%, 62.3% 0.36%, 75% 3.45%, 86.02% 0.77%, 91.98% 2.45%, 95.96% 3.32%, 98.20% 13.59%, 98.2% 92.19%, 94.34% 99.75%, 87% 98.21%, 78.93% 99.86%, 70.13% 96.77%, 58.86% 99.42%, 54% 100%, 48.94% 97.9%, 35% 100%, 31.08% 98.3%, 21.13% 98.57%, 15% 99.86%, 9.2% 98.21%, 5% 100%, 7px 97.57%);
  }

  .large {
    background: #6E6A74;
    padding: 10px;
    box-shadow: 5px 5px #49281F;
    max-height: 300px;
    overflow: scroll;
    opacity: 90%;
    clip-path: polygon(-0.35% 22.27%, 1.65% 3.41%, 16.47% -0.15%, 22.27% 2.62%, 30.22% 1.68%, 40.8% 3.94%, 47.79% 1.7%, 55.1% 2.46%, 68.2% 3.03%, 83.74% 2.45%, 96.95% 4.1%, 99.41% 21.12%, 98.15% 45.65%, 99.95% 72.92%, 98.2% 92.19%, 94.34% 99.75%, 87% 98.21%, 78.93% 99.86%, 70.13% 96.77%, 62.79% 96.75%, 52.03% 95%, 40.41% 96.57%, 27.13% 98.34%, 17.75% 94.97%, 9.12% 98.24%, 0.58% 96.53%, 1.77% 80.2%, 0.85% 61%, 4px 43.91%);
  }

  .half {
    background: #c72323;
    padding: 10px;
    max-height: 300px;
    overflow-y: scroll;
    box-shadow: 5px 5px #49281F;
    opacity: 90%;
    clip-path: polygon(-0.35% 22.27%, 1.65% 3.41%, 16.47% 4.18%, 30.22% 1.68%, 47.47% 4.37%, 68.2% 3.03%, 83.74% 2.45%, 96.95% 4.1%, 99.41% 21.12%, 98.15% 45.65%, 99.95% 72.92%, 98.2% 92.19%, 94.34% 99.75%, 87% 98.21%, 78.93% 99.86%, 57.14% 98.44%, 26.12% 100.57%, 9.12% 98.24%, 0.58% 96.53%, 1.77% 80.2%, 0.85% 61%, 4px 43.91%);
  }

  .portioned {
    background: #8E9A6C;
    padding: 10px;
    max-height: 300px;
    opacity: 90%;
    overflow: scroll;
    box-shadow: 5px 5px #49281F;
    clip-path: polygon(-0.35% 22.27%, 1.65% 3.41%, 16.47% 4.18%, 30.22% 1.68%, 68.2% 3.03%, 96.95% 4.1%, 99.41% 21.12%, 98.15% 45.65%, 99.95% 72.92%, 98.2% 92.19%, 94.34% 99.75%, 78.93% 99.86%, 57.14% 98.44%, 26.12% 100.57%, 0.58% 96.53%, 1.77% 80.2%, 0.85% 61%);
  }

  .small {
    background: #077457;
    padding: 10px;
    opacity: 90%;
    max-height: 300px;
    overflow: scroll;
    box-shadow: 5px 5px #49281F;
    clip-path: polygon(1% 99%, 0% 10%, 7.51% 2%, 43.74% 0.57%, 73.48% 2.33%, 95.85% 5.34%, 94.80% 97.22%, 49.24% 96.49%);
  }

  .visuals {
    padding-right: 20px;
  }

  .visuals img {
    max-width: 100%;
    height: auto;
  }

  .desc {
    text-align: left;
    margin: auto;
  }

  .showcase {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
  }

  .showcase img {
    max-width: 100%;
    height: auto;
  }

  .result {
    width: 100%;
    margin-top: 5px;
  }

}

@media only screen and (min-width:760px) {

  .complete {
    max-height:600px;
    clip-path: polygon(-0.28% 0.29%, 6% 1.65%, 14.62% 0.33%, 20.57% 1.31%, 33.11% 0.22%, 42.91% 3.16%, 48.69% 0.18%, 58.01% 1.97%, 65.77% 0.16%, 71.64% 2.23%, 80.51% 0.84%, 90.84% 2.36%, 98.16% 1.63%, 98.2% 9.29%, 99% 99%, 96.53% 98.46%, 87% 100%, 79.55% 98.89%, 72% 100%, 60.56% 98.62%, 54% 100%, 41.04% 97.52%, 35% 100%, 28.27% 99.73%, 23.1% 98.71%, 15% 99.86%, 6.98% 99.03%, 7px 99%);  }

  .large {
    flex: 1 1 55%;
  }

  .half {
    flex: 1 1 40%;
  }

  .portioned {
    flex: 1 1 30%;
  }

  .small {
    flex: 1 1 25%;
  }

  .stamps {
    text-align: center;
    overflow: scroll;
    margin: auto;
  }

  .visuals {
    width: 100%;
    height: auto;
  }

  .visuals img {
    max-width: 600px;
  }

  .showcase {
    flex-direction: row;
    margin: 10px;
  }

}

@media only screen and (min-width:1000px) {

  footer {
    position: absolute;
    bottom: 5px;
  }
}

@media only screen and (min-width:1500px) {
  header {
    display: none;
  }

  .side {
    position: absolute;
    width: fit-content;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: -86%;
    margin-top: 13em;
  }

  button {
    display: block;
    color: #ff5200;
    border-radius: 5px;
    background-color: #63074f;
    border: none;
    box-shadow: 2px 2px #49281F;
    font-family: creepster;
    font-size: 1em;
    width: 6em;
    align-self: center;
  }

  button:active {
    box-shadow: 0 3px #666;
    transform: translateY(4px);
  }

  .sidep {
    position: absolute;
    top: 30%;
    right: 7%;
    width: fit-content;
    display: flex;
    gap: 10px;
    flex-direction: column;
  }

  .container {
    border-radius: 20px;
    max-height: 730px;
    max-width: 1000px;
    margin-top: 6em;
    overflow-y: scroll;
  }

  .complete {
    max-height:590px;
    clip-path: polygon(-0.28% 0.29%, 6% 1.65%, 14.62% 0.33%, 20.57% 1.31%, 33.11% 0.22%, 42.91% 3.16%, 48.69% 0.18%, 58.01% 1.97%, 65.77% 0.16%, 71.64% 2.23%, 80.51% 0.84%, 90.84% 2.36%, 98.16% 1.63%, 98.2% 9.29%, 99% 99%, 96.53% 98.46%, 87% 100%, 79.55% 98.89%, 72% 100%, 60.56% 98.62%, 54% 100%, 41.04% 97.52%, 35% 100%, 28.27% 99.73%, 23.1% 98.71%, 15% 99.86%, 6.98% 99.03%, 7px 99%);  }

}

@media only screen and (min-width:1600px) {
  .side {
    position: absolute;
    width: fit-content;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: -80%;
    margin-top: 13em;
  }
}