:root {
      --pink: #ff72b6;
      --hot: #ff3f9e;
      --pink-soft: #ffd8ea;

      --cyan: #65e9ff;
      --cyan-dark: #2f9fb5;

      --purple: #302744;
      --purple2: #51476f;
      --purple3: #766b94;

      --lav: #ded5ff;
      --lav2: #eee9ff;

      --cream: #fff8fc;
      --white: #ffffff;

      --green: #b9ff9a;
      --green-dark: #3b8c4e;

      --text: #332b48;
      --muted: #706780;

      --shadow: #8b80aa;

      --pixel: "Silkscreen", monospace;
      --terminal: "VT323", monospace;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--text);
      font-family: var(--terminal);
      font-size: 19px;

      background-color: #cfc7ed;

      background-image:
        radial-gradient(#ffffffaa 1px, transparent 1px),
        radial-gradient(#9e91c955 1px, transparent 1px);

      background-size: 12px 12px, 12px 12px;
      background-position: 0 0, 6px 6px;

      overflow-x: hidden;
    }

    /* CRT scanlines */

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 999;

      background:
        repeating-linear-gradient(0deg,
          transparent 0 2px,
          #0000000b 3px 4px);
    }

    /* subtle screen glow */

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 998;

      box-shadow:
        inset 0 0 90px #40355c18;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    a {
      -webkit-tap-highlight-color: transparent;
    }

    img {
      max-width: 100%;
    }

    .site {
      width: min(1120px, calc(100% - 24px));
      margin: 18px auto 30px;
    }

    /* =========================================================
   TOP BAR
========================================================= */

    .topbar {
      border: 3px ridge white;
      background: linear-gradient(#554a75,
          #211b39);

      box-shadow:
        6px 6px 0 #756a94;

      color: white;

      position: relative;
      z-index: 10;
    }

    .topbar-main {
      min-height: 55px;

      display: flex;
      align-items: center;
      justify-content: space-between;

      padding: 8px 12px;
    }

    .brand {
      font-family: var(--pixel);
      font-size: 15px;
      color: white;

      text-shadow:
        2px 2px 0 #9d5487;
    }

    .brand span {
      color: var(--cyan);
    }

    .top-links {
      display: flex;
      gap: 6px;
    }

    .top-links a {
      font-family: var(--pixel);
      font-size: 9px;

      padding: 7px 9px;

      border: 2px outset #d8d1e6;

      background: #51476f;
    }

    .top-links a:hover {
      background: var(--pink-soft);
      color: #32203a;
      border-style: inset;
    }

    .ticker {
      border-top: 2px groove white;

      background: #ffb7d8;
      color: #351e31;

      height: 21px;
      overflow: hidden;

      padding: 2px 8px;

      font-family: var(--pixel);
      font-size: 8px;

      white-space: nowrap;
    }

    /* =========================================================
   WINDOWS
========================================================= */

    .window {
      background: var(--cream);

      border: 4px ridge white;

      box-shadow:
        6px 6px 0 var(--shadow);
    }

    .window-title {
      min-height: 29px;

      display: flex;
      align-items: center;
      gap: 7px;

      padding: 4px 7px;

      color: white;
      background: var(--purple);

      border-bottom: 3px groove white;

      font-family: var(--pixel);
      font-size: 9px;
    }

    .window-buttons {
      margin-left: auto;

      display: flex;
      gap: 3px;
    }

    .window-button {
      width: 15px;
      height: 14px;

      display: grid;
      place-items: center;

      color: var(--purple);

      background: #eee9ff;

      border: 2px outset white;

      font-family: var(--pixel);
      font-size: 7px;
    }

    .window-body {
      padding: 14px;
    }

    /* =========================================================
   HOMEPAGE LAYOUT
========================================================= */

    .home-grid {
      display: grid;

      grid-template-columns:
        220px minmax(0, 1fr) 210px;

      gap: 14px;

      margin-top: 16px;

      align-items: start;
    }

    /* =========================================================
   LEFT SIDEBAR
========================================================= */

    .sidebar {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .profile {
      text-align: center;
    }

    .avatar-area {
      min-height: 190px;

      display: grid;
      place-items: center;

      position: relative;

      background:
        radial-gradient(circle at center,
          #fff 0 35%,
          #ffdbea 36% 65%,
          #eadfff 66%);

      border-bottom: 3px ridge white;

      overflow: hidden;
    }

    .avatar {
      width: 125px;
      height: 110px;

      position: relative;

      border: 4px solid #342944;
      border-radius: 45% 45% 38% 38%;

      background: #ffd9eb;

      box-shadow:
        6px 6px 0 #a98da7,
        inset 0 0 0 3px white;

      transform: rotate(-2deg);
    }

    .avatar .ear {
      position: absolute;

      width: 39px;
      height: 50px;

      top: -38px;

      background: #ffbadb;

      border: 4px solid #342944;

      z-index: -1;
    }

    .avatar .ear.left {
      left: 10px;

      transform: rotate(-25deg);

      border-radius:
        80% 15% 30% 20%;
    }

    .avatar .ear.right {
      right: 10px;

      transform: rotate(25deg);

      border-radius:
        15% 80% 20% 30%;
    }

    .avatar .eye {
      position: absolute;

      top: 41px;

      width: 9px;
      height: 15px;

      background: #30233e;

      border-radius: 50%;
    }

    .avatar .eye.left {
      left: 34px;
    }

    .avatar .eye.right {
      right: 34px;
    }

    .avatar .nose {
      position: absolute;

      top: 61px;
      left: 50%;

      transform: translateX(-50%);

      color: #e34d91;

      font-size: 15px;
    }

    .avatar .mouth {
      position: absolute;

      top: 35px;
      left: 50%;

      transform: translateX(-50%);

      color: #342944;

      font-size: 30px;
    }

    .profile-name {
      margin: 11px 0 2px;

      font-family: var(--pixel);
      font-size: 14px;
    }

    .profile-handle {
      color: #a1497c;

      font-family: var(--pixel);
      font-size: 8px;
    }

    .profile-status {
      margin-top: 11px;

      padding: 7px;

      border: 2px dotted #caa1ba;

      background: #fff0f7;

      font-size: 15px;
      line-height: 1.1;
    }

    .online-dot {
      color: #58a962;
    }

    /* sidebar navigation */

    .side-nav a {
      display: block;

      padding: 7px 8px;

      border-bottom: 2px dotted #d3bfd0;

      font-family: var(--pixel);
      font-size: 9px;

      transition: .12s;
    }

    .side-nav a:last-child {
      border-bottom: 0;
    }

    .side-nav a::before {
      content: "♡ ";
      color: var(--hot);
    }

    .side-nav a:hover {
      padding-left: 14px;
      background: #ffdbea;
    }

    /* mini now playing */

    .now-playing {
      background: #211c39;
      color: #ded5ff;
    }

    .now-playing .window-title {
      background: #40375c;
    }

    .now-screen {
      padding: 12px;

      text-align: center;
    }

    .album-art {
      width: 82px;
      height: 82px;

      margin: 0 auto 9px;

      display: grid;
      place-items: center;

      border: 3px ridge white;

      background:
        linear-gradient(135deg,
          #ff72b6 0 30%,
          #65e9ff 30% 60%,
          #302744 60%);

      font-size: 32px;

      box-shadow: 4px 4px 0 #8e83a8;
    }

    .song {
      font-family: var(--pixel);
      font-size: 8px;
      color: white;
    }

    .artist {
      margin-top: 4px;
      color: #aaa2c2;
      font-size: 15px;
    }

    /* =========================================================
   MAIN COLUMN
========================================================= */

    .main {
      min-width: 0;
    }

    .welcome {
      position: relative;

      min-height: 270px;

      background:
        linear-gradient(135deg,
          #fdf7ff 0%,
          #eee9ff 65%,
          #e1d5fa 100%);

      overflow: hidden;
    }

    .welcome::after {
      content: "★";

      position: absolute;

      right: 24px;
      bottom: -25px;

      font-size: 150px;

      color: #ff72b615;

      transform: rotate(-15deg);

      pointer-events: none;
    }

    .welcome-content {
      max-width: 620px;

      position: relative;
      z-index: 2;
    }

    .small-label {
      display: inline-block;

      padding: 5px 7px;

      background: #302744;
      color: white;

      border: 2px outset white;

      font-family: var(--pixel);
      font-size: 8px;

      box-shadow: 3px 3px 0 #9b8cae;
    }

    h1 {
      margin: 17px 0 12px;

      font-family: var(--pixel);

      font-size:
        clamp(28px, 5vw, 48px);

      line-height: 1.25;

      letter-spacing: -2px;

      color: #302744;

      text-shadow:
        4px 4px 0 #c8b9e3;
    }

    h1 .pink {
      color: var(--hot);
    }

    h1 .cyan {
      color: #189db9;
    }

    .intro {
      max-width: 610px;

      padding: 10px 12px;

      background: white;

      border: 2px dotted #c99db7;

      line-height: 1.35;

      color: #5b526e;
    }

    .intro strong {
      color: #a03e78;
    }

    .welcome-links {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;

      margin-top: 14px;
    }

    .pixel-button {
      display: inline-block;

      padding: 8px 10px;

      border: 3px outset white;

      background: #f7d7e7;

      box-shadow: 3px 3px 0 #9b8aa4;

      font-family: var(--pixel);
      font-size: 8px;

      cursor: pointer;
    }

    .pixel-button:hover {
      transform: translate(2px, 2px);

      border-style: inset;

      box-shadow: 1px 1px 0 #9b8aa4;

      background: #ff72b6;
      color: white;
    }

    .pixel-button.primary {
      background: #ff72b6;
      color: white;
    }

    /* =========================================================
   TERMINAL
========================================================= */

    .terminal {
      margin-top: 14px;

      background: #17142a;

      border: 4px ridge white;

      box-shadow: 6px 6px 0 #8e83a8;

      color: #d9d1ff;
    }

    .terminal-top {
      min-height: 28px;

      display: flex;
      align-items: center;

      gap: 5px;

      padding: 4px 7px;

      background: #51476f;

      border-bottom: 2px groove white;
    }

    .terminal-dot {
      width: 9px;
      height: 9px;

      border: 1px solid white;

      background: #ff72b6;
    }

    .terminal-dot:nth-child(2) {
      background: #65e9ff;
    }

    .terminal-dot:nth-child(3) {
      background: #b9ff9a;
    }

    .terminal-title {
      margin-left: 5px;

      color: white;

      font-size: 14px;
    }

    .terminal-body {
      padding: 12px 14px;

      font-size: 18px;
      line-height: 1.2;
    }

    .prompt {
      color: #ffb4d7;
    }

    .command {
      color: #65e9ff;
    }

    .output {
      color: #aaa2c2;
    }

    .good {
      color: #b9ff9a;
    }

    /* =========================================================
   SERVER SECTION
========================================================= */

    .servers-window {
      margin-top: 14px;
    }

    .server-intro {
      display: flex;
      justify-content: space-between;
      align-items: end;

      gap: 20px;

      margin-bottom: 12px;
    }

    .server-intro h2 {
      margin: 0;

      font-family: var(--pixel);
      font-size: 17px;
    }

    .server-intro p {
      margin: 0;

      max-width: 390px;

      color: #6c627c;

      line-height: 1.15;

      font-size: 16px;
    }

    .server-list {
      display: flex;
      flex-direction: column;

      gap: 8px;
    }

    .server {
      display: grid;

      grid-template-columns: 70px minmax(0, 1fr) auto;

      align-items: center;

      gap: 12px;

      padding: 9px;

      background: white;

      border: 3px ridge white;

      box-shadow: 3px 3px 0 #b4a8c7;

      transition: .15s;

      position: relative;
    }

    .server:hover {
      transform: translateX(5px);

      box-shadow: 6px 5px 0 #9b8eae;
    }

    .server-icon {
      width: 62px;
      height: 58px;

      display: grid;
      place-items: center;

      border: 3px ridge white;

      font-size: 29px;

      background:
        linear-gradient(#86cbe1 0 50%,
          #5c974b 50%);
    }

    .server:nth-child(2) .server-icon {
      background:
        radial-gradient(circle at 70% 25%,
          #fff3a7 0 7%,
          transparent 8%),
        linear-gradient(#2d3151 0 55%,
          #76507f 55%);
    }

    .server:nth-child(3) .server-icon {
      background:
        linear-gradient(#8d9ba1 0 50%,
          #5e684e 50%);
    }

    .server-info {
      min-width: 0;
    }

    .server-name {
      margin-bottom: 4px;

      font-family: var(--pixel);
      font-size: 11px;

      color: #302744;
    }

    .server-desc {
      color: #706780;

      line-height: 1.1;

      font-size: 16px;
    }

    .server-tags {
      margin-top: 5px;

      display: flex;
      gap: 5px;
      flex-wrap: wrap;
    }

    .server-tag {
      padding: 3px 5px;

      background: #e9defc;

      border: 1px solid #bcaed5;

      font-family: var(--pixel);
      font-size: 7px;
    }

    .server-status {
      min-width: 105px;

      text-align: right;

      font-size: 15px;
    }

    .status-online {
      color: #3e8b4e;
      font-family: var(--pixel);
      font-size: 8px;
    }

    .status-online::before {
      content: "● ";
      color: #62c96e;
    }

        .status-offline {
      color: #a33623;
      font-family: var(--pixel);
      font-size: 8px;
    }

    .status-offline::before {
      content: "● ";
      color: #a33623;
    }

    .server-ip {
      margin-top: 5px;

      color: #8b8197;

      font-size: 14px;
    }

    /* =========================================================
   RIGHT SIDEBAR
========================================================= */

    .rightbar {
      display: flex;
      flex-direction: column;

      gap: 14px;
    }

    .sticker-window {
      position: relative;
    }

    .sticker {
      position: absolute;

      right: -8px;
      top: -14px;

      z-index: 5;

      padding: 7px 8px;

      background: #ff72b6;
      color: white;

      border: 3px solid white;

      box-shadow: 3px 3px 0 #a25c85;

      transform: rotate(7deg);

      font-family: var(--pixel);
      font-size: 8px;
    }

    .stats {
      display: flex;
      flex-direction: column;
    }

    .stat {
      display: flex;
      justify-content: space-between;

      padding: 7px 0;

      border-bottom: 2px dotted #cdbbd0;

      font-size: 17px;
    }

    .stat:last-child {
      border-bottom: 0;
    }

    .stat-label {
      color: #766c82;
    }

    .stat-value {
      color: #3f3556;
      font-family: var(--pixel);
      font-size: 8px;
    }

    /* currently */

    .currently {
      line-height: 1.15;
    }

    .current-row {
      padding: 8px 0;

      border-bottom: 2px dotted #cdbbd0;
    }

    .current-row:last-child {
      border-bottom: 0;
    }

    .current-label {
      display: block;

      margin-bottom: 3px;

      color: #a04d7d;

      font-family: var(--pixel);
      font-size: 8px;
    }

    .current-value {
      color: #514962;
      font-size: 17px;
    }

    /* little web badge */

    .web-badge {
      text-align: center;

      padding: 10px;

      background: #302744;

      color: #d9d1ff;

      border: 3px ridge white;

      box-shadow: 4px 4px 0 #8b80aa;

      font-family: var(--pixel);
      font-size: 7px;

      line-height: 1.7;
    }

    .web-badge strong {
      color: #65e9ff;
    }

    /* =========================================================
   ABOUT
========================================================= */

    .about-area {
      margin-top: 14px;

      display: grid;

      grid-template-columns: 1.3fr .7fr;

      gap: 14px;
    }

    .about-copy p {
      margin-top: 0;

      color: #625a76;

      line-height: 1.25;
    }

    .about-copy p+p {
      margin-top: 12px;
    }

    .favourites {
      display: flex;
      flex-wrap: wrap;

      gap: 5px;
    }

    .favourite {
      padding: 5px 7px;

      border: 2px outset white;

      background: #ffddec;

      font-family: var(--pixel);
      font-size: 7px;
    }

    /* =========================================================
   FOOTER
========================================================= */

    .footer {
      margin-top: 16px;

      border: 4px ridge white;

      background: #eee9ff;

      box-shadow: 6px 6px 0 #8b80aa;

      padding: 12px;

      display: flex;
      justify-content: space-between;
      align-items: center;

      gap: 15px;

      color: #665d76;

      font-size: 15px;
    }

    .footer-left {
      font-family: var(--pixel);
      font-size: 8px;
    }

    .cursor {
      display: inline-block;

      width: 7px;
      height: 13px;

      margin-left: 4px;

      background: #ff72b6;

      vertical-align: -2px;

      animation:
        blink 1s steps(2, start) infinite;
    }

    @keyframes blink {
      50% {
        opacity: 0;
      }
    }

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

    .floating-paw {
      position: fixed;

      color: white;

      opacity: .7;

      font-size: 25px;

      pointer-events: none;

      filter:
        drop-shadow(2px 2px 0 #9c77a5);

      z-index: 2;
    }

    .paw-a {
      left: 2%;
      top: 28%;
      transform: rotate(-18deg);
    }

    .paw-b {
      right: 2%;
      top: 64%;
      transform: rotate(15deg);
    }

    .paw-c {
      right: 7%;
      top: 12%;
      font-size: 17px;
    }

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

    @media(max-width:900px) {

      .home-grid {
        grid-template-columns: 190px minmax(0, 1fr);
      }

      .rightbar {
        grid-column: 1 / -1;

        display: grid;

        grid-template-columns: 1fr 1fr 1fr;
      }

      .web-badge {
        height: 100%;
      }

    }

    @media(max-width:700px) {

      .site {
        width: calc(100% - 12px);

        margin-top: 7px;
      }

      .home-grid {
        display: flex;
        flex-direction: column;
      }

      .sidebar,
      .main,
      .rightbar {
        width: 100%;
      }

      .sidebar {
        display: grid;

        grid-template-columns: 1fr 1fr;

        align-items: start;
      }

      .profile {
        grid-row: span 2;
      }

      .rightbar {
        display: grid;

        grid-template-columns: 1fr 1fr;
      }

      .web-badge {
        grid-column: 1 / -1;
      }

      .server {
        grid-template-columns: 58px minmax(0, 1fr);
      }

      .server-status {
        grid-column: 2;

        text-align: left;

        border-top: 2px dotted #cdbbd0;

        padding-top: 6px;
      }

    }

    @media(max-width:560px) {

      .top-links {
        display: none;
      }

      .topbar-main {
        min-height: 49px;
      }

      .brand {
        font-size: 12px;
      }

      .sidebar {
        display: flex;
      }

      .profile {
        display: block;
      }

      .rightbar {
        display: flex;
      }

      .about-area {
        display: flex;
        flex-direction: column;
      }

      h1 {
        font-size: 29px;
      }

      .welcome {
        min-height: auto;
      }

      .server-intro {
        display: block;
      }

      .server-intro p {
        margin-top: 7px;
      }

      .server {
        grid-template-columns: 52px minmax(0, 1fr);

        gap: 9px;
      }

      .server-icon {
        width: 52px;
        height: 52px;

        font-size: 24px;
      }

      .server-name {
        font-size: 9px;
      }

      .server-desc {
        font-size: 15px;
      }

      .footer {
        flex-direction: column;
        align-items: flex-start;
      }

    }