/* =====================================================
   ★ MIZZY'S SCENE WEB ★
   PINK × PURPLE × BLACK CHAOS
   ===================================================== */

:root {
  --pink: #ff4fa3;
  --hot-pink: #ff1493;
  --baby-pink: #ffd1ea;

  --purple: #8b3dff;
  --dark-purple: #3b0d55;
  --deep-purple: #1c0828;

  --black: #050507;
  --white-pink: #ffe8f4;
}


/* =====================================================
   BASIC
   ===================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;

  background:
    linear-gradient(
      135deg,
      var(--black) 0%,
      var(--deep-purple) 50%,
      var(--black) 100%
    );

  color: var(--baby-pink);

  font-family: "Quicksand", sans-serif;

  overflow-x: hidden;
}


/* =====================================================
   MAIN PAGE
   ===================================================== */

.page {
  position: relative;

  width: min(850px, 90vw);

  margin: 0 auto;

  padding: 35px 0 80px;

  z-index: 5;
}


/* =====================================================
   BACKGROUND
   ===================================================== */

.bg-stars {
  position: fixed;

  inset: 0;

  padding: 20px;

  color: var(--pink);

  font-size: 28px;

  line-height: 3;

  opacity: 0.25;

  pointer-events: none;

  z-index: 0;

  word-spacing: 35px;
}


.checker {
  position: fixed;

  width: 130px;
  height: 130px;

  opacity: 0.25;

  background-image:
    linear-gradient(45deg, var(--pink) 25%, transparent 25%),
    linear-gradient(-45deg, var(--pink) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--pink) 75%),
    linear-gradient(-45deg, transparent 75%, var(--pink) 75%);

  background-size: 30px 30px;

  pointer-events: none;

  z-index: 1;
}

.checker-left {
  left: -25px;
  top: 35%;
}

.checker-right {
  right: -25px;
  bottom: 18%;
}


/* =====================================================
   STATIC CORNER BOXES
   ===================================================== */

.corner-box {
  position: absolute;

  width: 145px;

  padding: 14px;

  background: var(--black);

  color: var(--baby-pink);

  border: 3px solid var(--pink);

  box-shadow:
    7px 7px 0 var(--purple);

  font-family: "Caveat", cursive;

  font-size: 20px;

  text-align: center;

  z-index: 20;

  /*
     IMPORTANT:
     No animation here.
     These stay still.
  */
}


/* sharp / uneven corners */

.corner-box {
  border-radius: 0;
}


/* TOP LEFT */

.corner-top-left {
  left: 18px;
  top: 25px;

  transform: rotate(-6deg);
}


/* TOP RIGHT */

.corner-top-right {
  right: 18px;
  top: 35px;

  background: var(--purple);

  transform: rotate(5deg);

  box-shadow:
    7px 7px 0 var(--black);
}


/* MIDDLE LEFT */

.corner-mid-left {
  left: 10px;
  top: 720px;

  transform: rotate(4deg);
}


/* MIDDLE RIGHT */

.corner-mid-right {
  right: 10px;
  top: 850px;

  background: var(--purple);

  transform: rotate(-5deg);
}


/* BOTTOM LEFT */

.corner-bottom-left {
  left: 15px;
  top: 1550px;

  background: var(--purple);

  transform: rotate(-4deg);
}


/* BOTTOM RIGHT */

.corner-bottom-right {
  right: 15px;
  top: 1700px;

  transform: rotate(6deg);
}


/* =====================================================
   DECORATIONS
   ===================================================== */

.decor {
  position: fixed;

  color: var(--pink);

  pointer-events: none;

  z-index: 3;

  text-shadow:
    3px 3px 0 var(--purple);
}

.d1 {
  left: 4%;
  top: 15%;
  font-size: 35px;
}

.d2 {
  right: 6%;
  top: 20%;
  font-size: 28px;
}

.d3 {
  left: 7%;
  top: 48%;
  font-size: 30px;
}

.d4 {
  right: 5%;
  top: 55%;
  font-size: 35px;
}

.d5 {
  left: 5%;
  top: 78%;
  font-size: 27px;
}

.d6 {
  right: 8%;
  top: 75%;
  font-size: 30px;
}

.d7 {
  left: 10%;
  top: 90%;
}

.d8 {
  right: 10%;
  top: 90%;
}


/* =====================================================
   HERO
   ===================================================== */

.hero {
  text-align: center;

  padding: 40px 10px 20px;
}

.mini-status {
  display: inline-block;

  padding: 5px 12px;

  background: var(--hot-pink);

  color: var(--black);

  border: 2px solid var(--baby-pink);

  font-weight: bold;

  transform: rotate(-3deg);

  box-shadow: 4px 4px 0 var(--purple);
}

.found-text {
  margin-top: 30px;

  font-size: 23px;

  color: var(--baby-pink);
}

.welcome {
  font-family: "Caveat", cursive;

  font-size: 27px;

  color: var(--pink);
}


/* =====================================================
   GLITCH TITLE
   ===================================================== */

.glitch {
  position: relative;

  display: inline-block;

  margin: 5px 0;

  color: var(--pink);

  font-family: "Caveat", cursive;

  font-size: clamp(70px, 12vw, 120px);

  line-height: 0.8;

  letter-spacing: 2px;

  text-shadow:
    6px 6px 0 var(--purple),
    11px 11px 0 var(--black);

  transform: rotate(-2deg);
}


/* glitch layers */

.glitch::before,
.glitch::after {
  content: attr(data-text);

  position: absolute;

  inset: 0;

  pointer-events: none;
}

.glitch::before {
  color: var(--purple);

  transform: translate(4px, -2px);

  clip-path: inset(10% 0 65% 0);
}

.glitch::after {
  color: var(--hot-pink);

  transform: translate(-4px, 3px);

  clip-path: inset(65% 0 10% 0);
}


.subtitle {
  color: var(--baby-pink);

  font-size: 17px;
}

.sparkle-line {
  margin-top: 20px;

  color: var(--pink);

  font-size: 20px;
}


/* =====================================================
   NAV
   ===================================================== */

.nav {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 10px;

  margin: 30px 0 55px;
}

.nav a {
  padding: 9px 16px;

  background: var(--black);

  color: var(--pink);

  border: 3px solid var(--purple);

  box-shadow: 4px 4px 0 var(--pink);

  font-family: "Caveat", cursive;

  font-size: 22px;

  text-decoration: none;

  transition: 0.15s;
}

.nav a:nth-child(even) {
  transform: rotate(3deg);
}

.nav a:nth-child(odd) {
  transform: rotate(-2deg);
}

.nav a:hover {
  background: var(--pink);

  color: var(--black);

  transform: rotate(0deg) translateY(-5px);
}


/* =====================================================
   GENERAL PANEL
   ===================================================== */

.panel {
  position: relative;

  margin: 50px 0;

  padding: 38px;

  background: var(--black);

  border: 4px solid var(--pink);

  box-shadow:
    10px 10px 0 var(--purple);

  /*
     Deliberately NOT smooth.
  */

  border-radius: 0;

  transform: rotate(1deg);

  animation: float 6s ease-in-out infinite;
}

.panel-label {
  position: absolute;

  top: -18px;
  left: 25px;

  padding: 5px 12px;

  background: var(--hot-pink);

  color: var(--black);

  border: 2px solid var(--baby-pink);

  font-weight: bold;

  transform: rotate(-3deg);
}

.panel h2 {
  color: var(--pink);

  font-family: "Caveat", cursive;

  font-size: 48px;
}

.panel p {
  font-size: 19px;

  line-height: 1.6;
}

.pink-text {
  color: var(--pink);

  font-weight: bold;
}

.quote-box {
  margin: 25px 0;

  padding: 15px;

  background: var(--dark-purple);

  border-left: 7px solid var(--pink);

  font-family: "Caveat", cursive;

  font-size: 32px;
}


/* =====================================================
   STICKERS
   ===================================================== */

.sticker {
  position: absolute;

  font-size: 35px;

  z-index: 5;
}

.sticker-star {
  right: 30px;
  top: -30px;

  color: var(--pink);

  transform: rotate(15deg);
}

.sticker-bow {
  left: -20px;
  bottom: -20px;

  transform: rotate(-10deg);
}


/* =====================================================
   STICKY NOTES
   ===================================================== */

.sticky-note {
  position: relative;

  width: 180px;

  padding: 15px;

  background: var(--pink);

  color: var(--black);

  border: 3px solid var(--black);

  box-shadow: 7px 7px 0 var(--purple);

  font-family: "Caveat", cursive;

  font-size: 22px;

  text-align: center;
}

.note-one {
  margin: 10px 0 65px auto;

  transform: rotate(5deg);
}


/* =====================================================
   SECTION HEADINGS
   ===================================================== */

.section-heading {
  color: var(--pink);

  font-family: "Caveat", cursive;

  font-size: 46px;

  text-align: center;

  text-shadow:
    4px 4px 0 var(--purple);
}

.glitch-line {
  height: 5px;

  margin: 15px 0 40px;

  background:
    repeating-linear-gradient(
      90deg,
      var(--pink) 0 40px,
      var(--purple) 40px 75px,
      var(--black) 75px 90px
    );
}


/* =====================================================
   INFO BOXES
   ===================================================== */

.box-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 30px;
}

.info-box {
  min-height: 220px;

  padding: 25px;

  border: 4px solid var(--pink);

  box-shadow:
    8px 8px 0 var(--black);

  border-radius: 0;

  animation: float 5s ease-in-out infinite;

  transition: 0.2s;
}

.info-box:nth-child(2) {
  animation-delay: -1s;
}

.info-box:nth-child(3) {
  animation-delay: -2s;
}

.info-box:nth-child(4) {
  animation-delay: -3s;
}

.info-box:nth-child(5) {
  animation-delay: -1.5s;
}

.info-box:nth-child(6) {
  animation-delay: -2.5s;
}

.box-pink {
  background: var(--hot-pink);

  color: var(--black);

  transform: rotate(-2deg);
}

.box-purple {
  background: var(--purple);

  color: var(--white-pink);

  transform: rotate(2deg);
}

.box-black {
  background: var(--black);

  color: var(--baby-pink);

  transform: rotate(-1deg);
}

.info-box:hover {
  transform:
    translateY(-12px)
    rotate(0deg)
    scale(1.03);

  box-shadow:
    10px 12px 0 var(--purple);
}

.box-icon {
  font-size: 30px;
}

.info-box h3 {
  margin: 10px 0;

  font-family: "Caveat", cursive;

  font-size: 38px;
}

.info-box p {
  font-size: 18px;

  line-height: 1.5;
}

.info-box small {
  font-size: 14px;
}


/* =====================================================
   ERROR WINDOW
   ===================================================== */

.error-window {
  width: min(470px, 90%);

  margin: 70px auto;

  background: var(--black);

  border: 3px solid var(--pink);

  box-shadow:
    8px 8px 0 var(--purple);

  transform: rotate(-2deg);
}

.window-bar {
  display: flex;

  justify-content: space-between;

  padding: 7px 10px;

  background: var(--purple);

  color: var(--baby-pink);

  font-weight: bold;

  border-bottom: 3px solid var(--pink);
}

.window-content {
  display: flex;

  gap: 18px;

  padding: 25px;
}

.error-symbol {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 45px;
  height: 45px;

  flex-shrink: 0;

  background: var(--hot-pink);

  color: var(--black);

  font-size: 30px;

  font-weight: bold;
}

.window-content strong {
  color: var(--pink);
}

.window-content button {
  padding: 5px 20px;

  background: var(--pink);

  border: 2px solid var(--baby-pink);

  color: var(--black);

  font-weight: bold;
}


/* =====================================================
   WARNING
   ===================================================== */

.warning {
  display: flex;

  align-items: center;

  gap: 25px;

  position: relative;

  margin: 70px 0;

  padding: 30px;

  background: var(--dark-purple);

  border: 4px dashed var(--pink);

  box-shadow: 8px 8px 0 var(--black);

  transform: rotate(1deg);

  animation: float 5s ease-in-out infinite;
}

.warning-symbol {
  font-size: 65px;

  color: var(--pink);

  font-weight: bold;
}

.warning h2 {
  margin: 0;

  color: var(--pink);

  font-family: "Caveat", cursive;

  font-size: 40px;
}

.skull {
  margin-left: auto;

  font-size: 45px;

  color: var(--pink);
}


/* =====================================================
   MUSIC PLAYER
   ===================================================== */

.music-player {
  margin: 80px 5%;

  background: var(--black);

  border: 4px solid var(--purple);

  box-shadow:
    9px 9px 0 var(--pink);

  transform: rotate(-2deg);

  animation: float 6s ease-in-out infinite;
}

.player-top {
  display: flex;

  justify-content: space-between;

  padding: 8px 12px;

  background: var(--pink);

  color: var(--black);

  font-weight: bold;
}

.album-area {
  display: flex;

  align-items: center;

  gap: 25px;

  padding: 25px;
}

.fake-cd {
  font-size: 70px;
}

.song-info {
  display: flex;

  flex-direction: column;

  gap: 7px;
}

.song-info strong {
  color: var(--pink);

  font-size: 20px;
}

.progress {
  width: 100%;

  height: 8px;

  background: var(--dark-purple);

  border: 1px solid var(--pink);
}

.progress div {
  width: 63%;

  height: 100%;

  background: var(--pink);
}

.player-footer {
  padding: 8px;

  background: var(--purple);

  color: var(--baby-pink);

  text-align: center;

  font-size: 13px;
}


/* =====================================================
   CURRENTLY
   ===================================================== */

/* ===== CHAOTIC INFO BOXES ===== */

.current-box {
  width: 150px;
  min-height: 100px;
  padding: 13px;

  background: #ff00a8;
  color: #050007;

  border: 3px solid #050007;
  box-shadow: 7px 7px 0 #16001f;

  display: inline-block;
  vertical-align: top;

  margin: 18px 25px;
  position: relative;

  transform: rotate(-4deg);
  transition: transform 0.15s ease;
}

/* LET THEM MOVE AROUND */

.current-box:hover {
  transform: translateX(12px) translateY(-8px) rotate(3deg);
  z-index: 20;
}

/* TEXT */

.current-box h3 {
  margin: 7px 0;
  font-size: 19px;
  line-height: 1;
}

.current-box p {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
}

.box-label {
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 2px;
}


/* ===== DIFFERENT BOX PERSONALITIES ===== */

.box-pink {
  background: #ff00a8;
  color: #050007;
  border-color: #050007;
}

.box-purple {
  background: #16001f;
  color: #ff00a8;
  border-color: #ff00a8;
  box-shadow: 7px 7px 0 #ff00a8;
}

.box-black {
  background: #050007;
  color: #ff00a8;
  border-color: #8b00ff;
  box-shadow: 7px 7px 0 #16001f;
}


/* ===== MAKE THEM ACTUALLY MESSY ===== */

.current-box:nth-child(1) {
  transform: rotate(-6deg);
  margin-left: 5px;
}

.current-box:nth-child(2) {
  transform: rotate(4deg);
  margin-left: 45px;
  margin-top: 35px;
}

.current-box:nth-child(3) {
  transform: rotate(-2deg);
  margin-left: 10px;
  margin-top: -5px;
}

.current-box:nth-child(4) {
  transform: rotate(7deg);
  margin-left: 60px;
  margin-top: 25px;
}

.current-box:nth-child(5) {
  transform: rotate(-5deg);
  margin-left: 20px;
  margin-top: -15px;
}

.current-box:nth-child(6) {
  transform: rotate(3deg);
  margin-left: 80px;
  margin-top: 30px;
}

/* =====================================================
   RANDOM STICKER CLOUD
   ===================================================== */

.sticker-cloud {
  display: flex;

  justify-content: space-around;

  margin: 60px 0;

  color: var(--pink);

  font-size: 40px;

  text-shadow:
    4px 4px 0 var(--purple);
}


/* =====================================================
   SOCIALS
   ===================================================== */

.social-panel {
  padding: 30px;

  background: var(--black);

  border: 4px solid var(--pink);

  box-shadow:
    8px 8px 0 var(--purple);

  transform: rotate(1deg);
}

.social-panel h2 {
  color: var(--pink);

  font-family: "Caveat", cursive;

  font-size: 45px;

  text-align: center;
}

.social-row {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding: 14px;

  margin: 8px 0;

  background: var(--dark-purple);

  border-left: 5px solid var(--pink);
}

.social-row strong {
  color: var(--pink);
}


/* =====================================================
   FINAL CHAOS
   ===================================================== */

.final-chaos {
  margin: 100px 0 50px;

  text-align: center;
}

.final-glitch {
  color: var(--pink);

  font-family: "Caveat", cursive;

  font-size: 45px;

  text-shadow:
    4px 4px 0 var(--purple),
    -2px 0 var(--hot-pink);
}

.final-chaos p {
  font-size: 18px;
}

.final-symbols {
  color: var(--pink);

  font-size: 25px;

  margin-top: 25px;
}

footer {
  padding: 25px;

  border-top: 3px dashed var(--pink);

  text-align: center;

  color: var(--pink);
}


/* =====================================================
   FLOAT ANIMATION
   ===================================================== */

@keyframes float {

  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -8px;
  }
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 700px) {

  body {
    padding: 0;
  }

  .page {
    width: 88vw;

    padding-top: 30px;
  }

  .corner-box {
    width: 105px;

    padding: 9px;

    font-size: 16px;
  }

  .corner-top-left {
    left: -35px;
    top: 20px;
  }

  .corner-top-right {
    right: -35px;
    top: 30px;
  }

  .corner-mid-left {
    left: -40px;
    top: 750px;
  }

  .corner-mid-right {
    right: -40px;
    top: 900px;
  }

  .corner-bottom-left {
    left: -40px;
    top: 1550px;
  }

  .corner-bottom-right {
    right: -40px;
    top: 1750px;
  }


  .glitch {
    font-size: 70px;
  }

  .welcome {
    font-size: 21px;
  }

  .subtitle {
    font-size: 14px;
  }


  .box-grid {
    grid-template-columns: 1fr;

    gap: 35px;
  }


  .current-grid {
    grid-template-columns: repeat(2, 1fr);
  }


  .panel {
    padding: 25px 20px;
  }


  .warning {
    padding: 20px;

    gap: 12px;
  }

  .warning-symbol {
    font-size: 45px;
  }

  .warning h2 {
    font-size: 32px;
  }


  .music-player {
    margin-left: 0;
    margin-right: 0;
  }


  .album-area {
    padding: 18px;

    gap: 15px;
  }


  .fake-cd {
    font-size: 50px;
  }


  .social-row {
    flex-direction: column;

    gap: 5px;
  }


  .decor {
    font-size: 20px;
  }

}