/* =========================================================
   DIGITAL SNOW OS
   ========================================================= */


:root {

  --blue-dark: #326f9c;
  --blue-mid: #5eaed8;
  --blue: #7bc6e8;

  --ice: #edfaff;
  --white: #ffffff;

  --pink: #e8afd1;
  --pink-light: #f9e7f2;

  --purple: #b7a7dc;
  --purple-light: #eee8f8;

  --aqua: #8bd8dc;

}



* {
  box-sizing: border-box;
}


html,
body {

  width: 100%;
  height: 100%;

  margin: 0;

}


body {

  overflow: hidden;

  font-family:
    Tahoma,
    Verdana,
    Arial,
    sans-serif;

  font-size: 11px;

  color: #40596b;

}



/* =========================================================
   LOGIN
   ========================================================= */


#login-screen {

  position: fixed;

  z-index: 20000;

  inset: 0;

  display: flex;

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

  overflow: hidden;

  background:

    radial-gradient(
      circle at 70% 20%,
      rgba(255,255,255,.92),
      transparent 22%
    ),

    radial-gradient(
      circle at 25% 75%,
      rgba(255,255,255,.65),
      transparent 28%
    ),

    linear-gradient(
      #83cceb,
      #c5edf9 58%,
      #e9fbff
    );

}


#login-screen::after {

  content: "";

  position: absolute;

  left: -10%;
  right: -10%;

  bottom: -28%;

  height: 62%;

  border-radius:
    50% 50% 0 0;

  background:

    linear-gradient(
      rgba(255,255,255,.98),
      rgba(202,234,248,.9)
    );

  box-shadow:
    inset 0 25px 50px white;

}


.login-orb {

  position: absolute;

  z-index: 1;

  border-radius: 50%;

  border:
    1px solid rgba(255,255,255,.7);

  background:

    radial-gradient(
      circle at 35% 28%,
      rgba(255,255,255,.92),
      rgba(130,220,247,.32),
      rgba(76,156,201,.12)
    );

  box-shadow:
    inset 0 6px 15px rgba(255,255,255,.8);

}


.login-orb-one {

  width: 180px;
  height: 180px;

  right: 12%;
  top: 12%;

}


.login-orb-two {

  width: 85px;
  height: 85px;

  left: 16%;
  bottom: 18%;

}


.login-snow {

  position: absolute;

  z-index: 2;

  color: rgba(255,255,255,.85);

  text-shadow:
    0 0 8px #4794c1;

}


.login-snow-1 {

  left: 18%;
  top: 14%;

  font-size: 30px;

}


.login-snow-2 {

  right: 25%;
  top: 37%;

  font-size: 18px;

}


.login-snow-3 {

  left: 37%;
  bottom: 17%;

  font-size: 25px;

}


.login-panel {

  position: relative;

  z-index: 5;

  width: 365px;

  padding: 18px;

  border:
    1px solid rgba(79,130,163,.78);

  border-radius: 12px;

  background:
    rgba(245,252,255,.82);

  box-shadow:

    inset 0 2px 3px rgba(255,255,255,.95),

    0 12px 40px rgba(48,101,137,.28),

    0 0 0 1px rgba(255,255,255,.7);

  backdrop-filter:
    blur(8px);

}


.login-brand {

  display: flex;

  align-items: center;

  gap: 12px;

}


.login-logo {

  width: 58px;
  height: 58px;

  display: flex;

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

  border-radius: 50%;

  color: white;

  font-size: 29px;

  background:

    radial-gradient(
      circle at 35% 28%,
      white,
      #8ddcf7 38%,
      #438fbe 75%
    );

  box-shadow:

    inset 0 4px 6px rgba(255,255,255,.9),

    0 3px 7px rgba(42,95,130,.28);

}


.login-brand h1 {

  margin: 0;

  font-size: 22px;

  letter-spacing: 3px;

  color: #5194bc;

  text-shadow:
    1px 1px white;

}


.login-brand span {

  font-size: 8px;

  letter-spacing: 2px;

  color: #8199a8;

}


.login-divider {

  height: 1px;

  margin:
    14px 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      #9fc1d3,
      transparent
    );

}


.login-profile {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 13px;

}


.login-avatar {

  width: 49px;
  height: 49px;

  display: flex;

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

  border:
    2px solid white;

  border-radius: 8px;

  color: white;

  font-size: 22px;

  background:

    linear-gradient(
      135deg,
      #eaffff,
      #7dc8e7,
      #b8aada
    );

  box-shadow:
    0 0 0 1px #8faebe;

}


.login-profile strong {

  display: block;

  color: #4d83a3;

  font-size: 14px;

}


.login-profile span {

  display: block;

  margin-top: 2px;

  color: #92a3ac;

  font-size: 8px;

}


.login-panel label {

  display: block;

  margin-bottom: 4px;

  color: #65879c;

  font-size: 9px;

}


.password-row {

  display: grid;

  grid-template-columns:
    1fr 38px;

  gap: 5px;

}


.password-row input {

  padding: 7px;

  border:
    1px inset #acc1cd;

  border-radius: 3px;

  background: white;

  font-family: inherit;

  color: #496b80;

}


.password-row button {

  border:
    1px solid #8faebe;

  border-radius: 4px;

  color: #487a98;

  font-size: 18px;

  background:

    linear-gradient(
      white,
      #d7edf6
    );

  cursor: pointer;

}


.password-row button:hover {

  background:
    #f4fdff;

}


.password-hint {

  margin-top: 6px;

  color: #92a4ae;

  font-size: 8px;

}


.password-hint b {

  color: #9473a2;

}


#login-error {

  display: none;

  margin-top: 7px;

  padding: 5px;

  border:
    1px solid #e2b5c7;

  background:
    #fceaf2;

  color: #a4677e;

  font-size: 8px;

}


.login-bottom {

  display: flex;

  justify-content: space-between;

  margin-top: 18px;

  padding-top: 8px;

  border-top:
    1px dotted #b8cbd6;

  color: #8298a5;

  font-size: 7px;

  letter-spacing: 1px;

}



/* =========================================================
   DIGITAL SNOW LOADING SCREEN
   ========================================================= */


#boot-screen {

  position: fixed;

  z-index: 19999;

  inset: 0;

  display: none;

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

  overflow: hidden;


  background:

    radial-gradient(
      circle at 70% 20%,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.55) 14%,
      transparent 34%
    ),

    radial-gradient(
      circle at 25% 75%,
      rgba(248,226,243,.65) 0%,
      transparent 30%
    ),

    radial-gradient(
      circle at 75% 78%,
      rgba(220,214,247,.60) 0%,
      transparent 30%
    ),

    linear-gradient(
      135deg,
      #c8edfb 0%,
      #edfaff 35%,
      #e4dcf7 70%,
      #f7dfea 100%
    );

}


/* soft white snowy floor */

#boot-screen::after {

  content: "";

  position: absolute;

  left: -10%;
  right: -10%;

  bottom: -30%;

  height: 58%;

  border-radius:
    50% 50% 0 0;

  background:

    linear-gradient(
      rgba(255,255,255,.98),
      rgba(224,239,249,.92)
    );

  box-shadow:

    inset 0 25px 60px rgba(255,255,255,.95),

    0 -15px 45px rgba(255,255,255,.55);

}



/* =========================================================
   FLOATING GLASS BUBBLES
   ========================================================= */


.loading-decoration {

  position: absolute;

  border-radius: 50%;

  border:
    1px solid rgba(255,255,255,.75);

  background:

    radial-gradient(
      circle at 32% 25%,
      rgba(255,255,255,.95),
      rgba(255,255,255,.28) 28%,
      rgba(125,203,235,.16) 70%
    );

  box-shadow:

    inset 0 5px 12px rgba(255,255,255,.85),

    0 8px 25px rgba(75,137,177,.12);

  animation:
    bubbleFloat 5s ease-in-out infinite alternate;

}


.loading-bubble-one {

  width: 145px;
  height: 145px;

  right: 13%;
  top: 12%;

}


.loading-bubble-two {

  width: 72px;
  height: 72px;

  left: 18%;
  bottom: 17%;

  animation-delay:
    -2s;

}


.loading-bubble-three {

  width: 45px;
  height: 45px;

  left: 28%;
  top: 17%;

  animation-delay:
    -3.4s;

}


@keyframes bubbleFloat {

  from {

    transform:
      translateY(-5px);

  }

  to {

    transform:
      translateY(12px);

  }

}



/* =========================================================
   LITTLE FLOATING DECORATIONS
   ========================================================= */


.loading-star {

  position: absolute;

  z-index: 2;

  pointer-events: none;

  color:
    rgba(255,255,255,.92);

  text-shadow:
    0 0 8px rgba(80,150,195,.55);

  animation:
    starPulse 2.6s ease-in-out infinite alternate;

}


.loading-star-one {

  left: 20%;
  top: 25%;

  font-size: 22px;

}


.loading-star-two {

  right: 23%;
  bottom: 26%;

  color:
    #efc5dc;

  font-size: 17px;

  animation-delay:
    -.8s;

}


.loading-star-three {

  right: 31%;
  top: 18%;

  font-size: 20px;

  animation-delay:
    -1.5s;

}


@keyframes starPulse {

  from {

    opacity: .45;

    transform:
      scale(.85);

  }

  to {

    opacity: 1;

    transform:
      scale(1.15);

  }

}



/* =========================================================
   MAIN LOADER CARD
   ========================================================= */


.snow-loader {

  position: relative;

  z-index: 10;

  width: 340px;

  padding:
    24px 28px 20px;

  text-align: center;

  border:
    1px solid rgba(114,157,188,.48);

  border-radius: 19px;


  background:

    linear-gradient(
      145deg,
      rgba(255,255,255,.91),
      rgba(239,250,255,.78) 58%,
      rgba(244,232,249,.76)
    );


  box-shadow:

    inset 0 2px 3px rgba(255,255,255,.98),

    0 16px 45px rgba(61,111,148,.22),

    0 0 0 1px rgba(255,255,255,.72);


  backdrop-filter:
    blur(12px);

}



/* =========================================================
   CENTRAL SNOWFLAKE + ORBIT
   ========================================================= */


.loader-orbit {

  position: relative;

  width: 96px;
  height: 96px;

  margin:
    0 auto 14px;

  border:
    1px solid rgba(120,178,209,.22);

  border-radius: 50%;

  animation:
    orbitRotate 5s linear infinite;

}


.loader-orbit::before {

  content: "";

  position: absolute;

  inset: 10px;

  border:
    1px dashed rgba(166,154,211,.24);

  border-radius: 50%;

}


.loader-snowflake {

  position: absolute;

  left: 50%;
  top: 50%;

  width: 58px;
  height: 58px;

  display: flex;

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

  transform:
    translate(-50%, -50%);

  border:
    1px solid rgba(255,255,255,.95);

  border-radius: 50%;

  color:
    white;

  font-size: 29px;

  text-shadow:
    0 0 7px rgba(54,130,178,.65);

  background:

    radial-gradient(
      circle at 35% 28%,
      white 0%,
      #b8ebfa 30%,
      #78c3e6 58%,
      #a99ed9 100%
    );


  box-shadow:

    inset 0 4px 8px rgba(255,255,255,.9),

    0 4px 12px rgba(70,127,162,.25);


  animation:
    snowflakeCounterSpin 5s linear infinite;

}


@keyframes orbitRotate {

  to {

    transform:
      rotate(360deg);

  }

}


@keyframes snowflakeCounterSpin {

  from {

    transform:
      translate(-50%, -50%)
      rotate(0deg);

  }

  to {

    transform:
      translate(-50%, -50%)
      rotate(-360deg);

  }

}



/* orbiting pastel dots */


.orbit-dot {

  position: absolute;

  width: 10px;
  height: 10px;

  border:
    2px solid rgba(255,255,255,.9);

  border-radius: 50%;

  box-shadow:
    0 2px 6px rgba(69,110,150,.22);

}


.dot-blue {

  top: -3px;
  left: 42px;

  background:
    #74c3e8;

}


.dot-purple {

  right: 3px;
  bottom: 17px;

  background:
    #aaa0dc;

}


.dot-pink {

  left: 5px;
  bottom: 15px;

  background:
    #e7abc9;

}



/* =========================================================
   LOADING TEXT
   ========================================================= */


.loading-title {

  color:
    #538caf;

  font-size: 17px;

  font-weight: bold;

  letter-spacing: 4px;

  text-shadow:
    1px 1px white;

}


.loading-subtitle {

  margin-top:
    4px;

  color:
    #8a99aa;

  font-size:
    8px;

  letter-spacing: 1px;

}



/* =========================================================
   PRETTY LOADING BAR
   ========================================================= */


.pretty-loading-bar {

  position: relative;

  height: 13px;

  margin:
    18px 0 7px;

  overflow: hidden;

  padding: 2px;

  border:
    1px solid #afc5d1;

  border-radius: 8px;

  background:
    rgba(255,255,255,.78);

  box-shadow:

    inset 0 1px 3px rgba(74,105,127,.12),

    0 1px white;

}


#boot-progress-fill {

  width: 0%;
  height: 100%;

  border-radius: 6px;


  background:

    linear-gradient(
      90deg,
      #79c8ea 0%,
      #9bbce8 38%,
      #aca2dc 67%,
      #e7afce 100%
    );


  box-shadow:

    inset 0 1px rgba(255,255,255,.65),

    0 0 6px rgba(155,159,220,.35);


  transition:
    width .3s ease;

}


.loading-shine {

  position: absolute;

  top: 2px;
  bottom: 2px;

  width: 65px;

  left: -70px;

  border-radius: 7px;

  background:

    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.85),
      transparent
    );


  animation:
    loadingShine 1.2s linear infinite;

}


@keyframes loadingShine {

  to {

    left:
      calc(100% + 20px);

  }

}



/* =========================================================
   BOUNCING DOTS
   ========================================================= */


.loading-dots {

  height: 12px;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 4px;

  margin-top:
    8px;

}


.loading-dots span {

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    #75bfe2;

  animation:
    dotBounce .8s ease-in-out infinite alternate;

}


.loading-dots span:nth-child(2) {

  background:
    #aaa0d9;

  animation-delay:
    .18s;

}


.loading-dots span:nth-child(3) {

  background:
    #e4a9ca;

  animation-delay:
    .36s;

}


@keyframes dotBounce {

  from {

    transform:
      translateY(2px);

    opacity:
      .45;

  }

  to {

    transform:
      translateY(-4px);

    opacity:
      1;

  }

}



/* bottom status */


#boot-status {

  margin-top:
    4px;

  color:
    #98a6ae;

  font-size:
    7px;

  letter-spacing:
    1px;

}
/* =========================================================
   DESKTOP / WALLPAPER
   ========================================================= */


#desktop {

  position: relative;

  display: none;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background:

    radial-gradient(
      circle at 70% 15%,
      rgba(255,255,255,.95) 0 6%,
      rgba(211,247,255,.7) 18%,
      transparent 34%
    ),

    radial-gradient(
      ellipse at 35% 84%,
      rgba(255,255,255,.97) 0 16%,
      rgba(192,232,250,.72) 38%,
      transparent 60%
    ),

    linear-gradient(
      #8fd1ef,
      #b9e8f9 42%,
      #eafaff 68%,
      #acd6ed
    );

}


#desktop::before {

  content: "";

  position: absolute;

  left: -10%;
  bottom: -22%;

  width: 120%;
  height: 55%;

  border-radius:
    50% 50% 0 0;

  background:

    linear-gradient(
      rgba(255,255,255,.97),
      rgba(203,235,248,.87)
    );

  box-shadow:

    inset 0 30px 60px rgba(255,255,255,.9),

    0 -18px 40px rgba(255,255,255,.7);

  pointer-events: none;

}


.aero-orb {

  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  border:
    1px solid rgba(255,255,255,.45);

  box-shadow:
    inset 0 8px 18px rgba(255,255,255,.8);

}


.orb-one {

  width: 170px;
  height: 170px;

  right: 8%;
  top: 10%;

  background:

    radial-gradient(
      circle at 35% 28%,
      rgba(255,255,255,.9),
      rgba(120,214,246,.4) 40%,
      rgba(70,164,217,.18)
    );

}


.orb-two {

  width: 95px;
  height: 95px;

  right: 22%;
  top: 33%;

  background:

    radial-gradient(
      circle at 35% 28%,
      rgba(255,255,255,.85),
      rgba(240,186,219,.23),
      rgba(116,191,225,.18)
    );

}


.orb-three {

  width: 55px;
  height: 55px;

  left: 27%;
  top: 13%;

  background:

    radial-gradient(
      circle at 35% 28%,
      white,
      rgba(194,232,250,.32),
      rgba(177,159,220,.12)
    );

}


.snow-decor,
.wallpaper-star {

  position: absolute;

  pointer-events: none;

  color:
    rgba(255,255,255,.87);

  text-shadow:
    0 0 7px #55a6d3;

}


.sd1 {

  top: 8%;
  left: 44%;

  font-size: 30px;

}


.sd2 {

  right: 15%;
  top: 28%;

  font-size: 20px;

}


.sd3 {

  left: 11%;
  bottom: 22%;

  font-size: 26px;

}


.sd4 {

  right: 31%;
  bottom: 18%;

  color: #f2c4df;

  font-size: 19px;

}


.ws1 {

  left: 35%;
  top: 19%;

  font-size: 12px;

}


.ws2 {

  right: 37%;
  bottom: 27%;

  color:
    #d4c9ed;

  font-size: 15px;

}


.ws3 {

  right: 8%;
  bottom: 35%;

  font-size: 20px;

}



/* =========================================================
   DESKTOP ICONS
   ========================================================= */


.desktop-column {

  position: absolute;

  z-index: 3;

  top: 14px;
  left: 12px;

  display: flex;

  flex-direction: column;

  gap: 7px;

}


.desktop-icon {

  width: 88px;

  padding: 3px;

  border: none;

  border-radius: 5px;

  background: transparent;

  color: white;

  font-family: inherit;

  text-align: center;

  text-shadow:
    1px 1px 3px #3c769b;

  cursor: pointer;

}


.desktop-icon:hover {

  background:
    rgba(255,255,255,.20);

  outline:
    1px solid rgba(255,255,255,.35);

}


.desktop-icon-image {

  width: 45px;
  height: 45px;

  margin: auto;

  display: flex;

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

  border:
    1px solid rgba(255,255,255,.9);

  border-radius: 11px;

  color: white;

  font-size: 26px;

  box-shadow:

    inset 0 3px 5px rgba(255,255,255,.92),

    0 3px 5px rgba(45,102,138,.34);

}


.icy {

  background:

    linear-gradient(
      140deg,
      white,
      #8cdaf7 44%,
      #418fc2
    );

}


.globe {

  background:

    radial-gradient(
      circle,
      #d9fbff,
      #6bc4eb,
      #3788c0
    );

}


.folder {

  background:

    linear-gradient(
      white,
      #a0dff6,
      #55a7d4
    );

}


.messenger {

  background:

    linear-gradient(
      #faf4ff,
      #a9dff4,
      #8ba6d4
    );

}


.game {

  background:

    linear-gradient(
      #fff7fc,
      #b8dff1,
      #9cafe0
    );

}


.recycle {

  background:

    linear-gradient(
      white,
      #b9eaf6,
      #69a6c9
    );

}


.desktop-label {

  display: block;

  margin-top: 3px;

  font-size: 10px;

}



/* =========================================================
   LOOSE DESKTOP FILES
   ========================================================= */


.loose-file {

  position: absolute;

  z-index: 2;

  width: 90px;

  border: none;

  background: transparent;

  color: white;

  font-family: inherit;

  font-size: 10px;

  text-align: center;

  text-shadow:
    1px 1px 3px #427798;

  cursor: pointer;

}


.loose-file span {

  display: block;

  margin-bottom: 3px;

  color:
    #f5fdff;

  font-size: 31px;

  text-shadow:
    0 2px 5px #4382a6;

}


.loose-file:hover {

  background:
    rgba(255,255,255,.14);

}


.dead-file {

  cursor: default;

}


.file-a {

  right: 25px;
  top: 20px;

}


.file-b {

  right: 125px;
  top: 20px;

}


.file-c {

  right: 30px;
  top: 105px;

}


.file-d {

  right: 128px;
  top: 110px;

}


.file-e {

  right: 30px;
  top: 195px;

}


.file-f {

  right: 135px;
  top: 200px;

}



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


.window {

  position: absolute;

  z-index: 20;

  display: none;

  overflow: hidden;

  border:
    1px solid #416f91;

  border-radius:
    8px 8px 3px 3px;

  background:
    rgba(242,251,255,.98);

  box-shadow:

    0 0 0 1px rgba(255,255,255,.9),

    0 8px 25px rgba(37,84,117,.38);

}


.window.active-window {

  display: block;

}


.window-titlebar {

  height: 29px;

  display: flex;

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

  padding-left: 8px;

  color: white;

  font-weight: bold;

  text-shadow:
    1px 1px #2f668b;

  background:

    linear-gradient(
      #9be1fa 0%,
      #5ab1df 43%,
      #368cc1 51%,
      #6bc1e8 100%
    );

  border-bottom:
    1px solid #477795;

  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.82);

}


.drag-handle {

  cursor: move;

}


.window-controls {

  display: flex;

  gap: 2px;

  padding-right: 4px;

}


.window-controls button {

  width: 22px;
  height: 19px;

  padding: 0;

  border:
    1px solid rgba(255,255,255,.8);

  border-radius: 3px;

  color: #52748a;

  background:

    linear-gradient(
      white,
      #d4e8f1
    );

  cursor: pointer;

}


.window-controls button:hover {

  background:
    #ffffff;

}



/* =========================================================
   DIGITALSNOW.EXE
   ========================================================= */


.main-window {

  width: 1100px;

  max-width:
    calc(100vw - 130px);

  max-height:
    calc(100vh - 68px);

  overflow-y: auto;

}


.menu-strip {

  height: 27px;

  display: flex;

  align-items: center;

  gap: 16px;

  padding:
    0 9px;

  background:

    linear-gradient(
      white,
      #e2edf3
    );

  border-bottom:
    1px solid #a7bac6;

}


.menu-spacer {

  flex: 1;

}


.online-dot {

  color:
    #3e87a9;

  font-size: 9px;

}



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


.ds-hero {

  position: relative;

  min-height: 95px;

  display: flex;

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

  padding:
    14px 22px;

  overflow: hidden;

  background:

    repeating-linear-gradient(
      135deg,
      transparent,
      transparent 17px,
      rgba(255,255,255,.26) 18px,
      rgba(255,255,255,.26) 23px
    ),

    linear-gradient(
      115deg,
      #f2fdff,
      #b9ebfa 55%,
      #89caec 82%,
      #d9c9ef
    );

}


.micro-label {

  position: relative;

  z-index: 2;

  color: #6f90a5;

  font-size: 7px;

  letter-spacing: 3px;

}


.ds-hero h1 {

  position: relative;

  z-index: 2;

  margin:
    3px 0;

  color: white;

  font-size: 31px;

  letter-spacing: 4px;

  text-shadow:

    1px 1px #5394b9,

    0 0 6px white;

}


.hero-subtitle {

  position: relative;

  z-index: 2;

  color: #66899e;

  font-size: 9px;

}


.hero-symbols {

  position: relative;

  z-index: 3;

  color: white;

  font-size: 25px;

  letter-spacing: 7px;

}


.hero-glass-circle {

  position: absolute;

  right: -33px;
  top: -65px;

  width: 190px;
  height: 190px;

  border:
    24px solid rgba(255,255,255,.25);

  border-radius: 50%;

  box-shadow:
    inset 0 0 20px rgba(255,255,255,.3);

}



/* =========================================================
   MOVING BANNERS
   ========================================================= */


.ticker {

  height: 23px;

  overflow: hidden;

  white-space: nowrap;

  border-top:
    1px solid white;

  border-bottom:
    1px solid #9cbccc;

  background:

    linear-gradient(
      white,
      #dceff7
    );

}


.ticker-track {

  display: inline-block;

  min-width: max-content;

  padding-top: 5px;

  color: #527e98;

  font-size: 8px;

  letter-spacing: 1px;

  animation:
    tickerMove 28s linear infinite;

}


@keyframes tickerMove {

  from {

    transform:
      translateX(10%);

  }

  to {

    transform:
      translateX(-70%);

  }

}



/* =========================================================
   INTERNAL TABS
   ========================================================= */


.profile-tabs {

  display: flex;

  gap: 2px;

  padding:
    4px 6px 0;

  background:
    #d7eaf4;

  border-bottom:
    1px solid #89aabd;

}


.internal-tab {

  min-width: 100px;

  padding:
    6px 12px;

  border:
    1px solid #94b0c0;

  border-bottom: none;

  border-radius:
    5px 5px 0 0;

  color: #52758c;

  font-family: inherit;

  background:

    linear-gradient(
      white,
      #cce7f4
    );

  cursor: pointer;

}


.internal-tab:hover {

  color:
    #8b70a1;

  background:

    linear-gradient(
      white,
      #ede5f6
    );

}


.internal-tab.active {

  color:
    #2f729b;

  font-weight: bold;

  background:
    white;

}


.internal-page {

  display: none;

  padding: 6px;

  background:
    #e4f2f8;

}


.internal-page.active-page {

  display: block;

}



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


.embedded-player {

  min-height: 82px;

  display: grid;

  grid-template-columns:
    58px
    1fr
    330px;

  gap: 10px;

  align-items: center;

  margin-bottom: 5px;

  padding:
    7px 10px;

  border:
    1px solid #92afc0;

  background:

    linear-gradient(
      110deg,
      white,
      #e3f5fc 68%,
      #f3e9f8
    );

  box-shadow:
    inset 0 1px white;

}


.player-disc {

  width: 52px;
  height: 52px;

  display: flex;

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

  border:
    1px solid #7fa4b8;

  border-radius: 50%;

  color: white;

  font-size: 21px;

  background:

    radial-gradient(
      circle,
      white 0 4px,
      #73c3e6 5px 14px,
      #e7f9ff 15px 21px,
      #559ac5 22px
    );

  box-shadow:

    inset 0 1px 4px white,

    0 2px 5px rgba(53,102,132,.25);

}


.player-disc.playing {

  animation:
    spinDisc 4s linear infinite;

}


@keyframes spinDisc {

  to {

    transform:
      rotate(360deg);

  }

}


.player-label {

  color: #778e9c;

  font-size: 7px;

  letter-spacing: 2px;

}


.player-song {

  margin-top: 2px;

  color:
    #427e9e;

  font-weight: bold;

}


.player-artist {

  margin-top: 2px;

  color:
    #97a6ae;

  font-size: 8px;

}


.codec-display {

  display: inline-block;

  margin-top: 6px;

  padding:
    2px 5px;

  border:
    1px solid #b5cbd6;

  color:
    #65879b;

  font-family:
    "Courier New",
    monospace;

  font-size: 7px;

  background:
    #edf9fd;

}


.proper-controls {

  padding:
    5px 7px;

  border:
    1px solid #b3cbd6;

  border-radius: 5px;

  background:
    rgba(255,255,255,.7);

}


.control-buttons {

  display: flex;

  gap: 4px;

  align-items: center;

}


.control-buttons button {

  min-width: 32px;
  height: 26px;

  border:
    1px solid #89a8b9;

  border-radius: 4px;

  color:
    #467993;

  background:

    linear-gradient(
      white,
      #d4e9f3
    );

  box-shadow:
    inset 0 1px white;

  cursor: pointer;

}


.control-buttons button:hover {

  background:
    #eefaff;

}


.control-buttons .main-play {

  width: 41px;

  color:
    #876da1;

  background:

    linear-gradient(
      white,
      #e9def4
    );

}


.music-bar-row {

  display: grid;

  grid-template-columns:
    25px
    1fr
    25px;

  gap: 4px;

  align-items: center;

  margin-top: 5px;

  color:
    #80949f;

  font-size: 7px;

}


.player-progress {

  height: 8px;

  padding: 1px;

  border:
    1px inset #adc0ca;

  background:
    white;

}


.player-progress div {

  width: 42%;
  height: 100%;

  background:

    repeating-linear-gradient(
      90deg,
      #5faed6,
      #5faed6 6px,
      #9ddcf2 7px,
      #9ddcf2 11px
    );

}


.player-bottom-row {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  margin-top: 4px;

}


.volume-row {

  display: flex;

  align-items: center;

  gap: 5px;

  font-size: 9px;

}


.volume-bar {

  width: 75px;
  height: 5px;

  background:
    #cedee7;

}


.volume-bar div {

  width: 70%;
  height: 100%;

  background:
    #8ca8d1;

}


.equaliser {

  height: 18px;

  display: flex;

  align-items: flex-end;

  gap: 2px;

}


.equaliser span {

  width: 3px;

  background:
    #73b9d7;

  animation:
    equalise .9s ease-in-out infinite alternate;

}


.equaliser span:nth-child(1) {

  height: 5px;

}


.equaliser span:nth-child(2) {

  height: 14px;

  animation-delay:
    -.2s;

}


.equaliser span:nth-child(3) {

  height: 9px;

  animation-delay:
    -.4s;

}


.equaliser span:nth-child(4) {

  height: 17px;

  animation-delay:
    -.1s;

}


.equaliser span:nth-child(5) {

  height: 7px;

  animation-delay:
    -.5s;

}


.equaliser span:nth-child(6) {

  height: 12px;

  animation-delay:
    -.3s;

}


@keyframes equalise {

  to {

    height: 3px;

  }

}



/* =========================================================
   GRID / PANELS
   ========================================================= */


.ds-grid {

  display: grid;

  grid-template-columns:
    175px
    1fr
    175px;

  gap: 5px;

}


.panel {

  margin-bottom: 5px;

  border:
    1px solid #97b3c2;

  background:
    rgba(255,255,255,.96);

}


.panel-title,
.panel-title.dark-title {

  padding:
    5px 7px;

  border-bottom:
    1px solid #7897c4;

  color:
    #ffffff;

  font-size:
    10px;

  font-weight: bold;

  letter-spacing:
    .2px;

  text-shadow:
    1px 1px 1px rgba(72, 83, 145, .55);

  background:

    linear-gradient(
      90deg,
      #6fb9e4 0%,
      #8cbbe6 45%,
      #a99ed9 100%
    );

  box-shadow:

    inset 0 1px 0 rgba(255,255,255,.65),

    inset 0 -1px 0 rgba(87,103,164,.2);

}


.panel-title::before,
.panel-title.dark-title::before {

  content:
    "❄ ";

  color:
    #ffffff;

  text-shadow:
    0 0 4px rgba(255,255,255,.9);

}



/* =========================================================
   PROFILE
   ========================================================= */


.profile-card {

  display: grid;

  grid-template-columns:
    50px
    1fr;

  gap: 7px;

  align-items: center;

  padding: 7px;

}


.profile-img {

  width: 47px;
  height: 47px;

  display: flex;

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

  border:
    1px solid #8eb2c6;

  border-radius: 9px;

  color: white;

  font-size: 22px;

  background:

    linear-gradient(
      135deg,
      #f8fdff,
      #82cce9,
      #c6bcea
    );

}


.profile-card strong {

  color:
    #397da3;

}


.profile-card p {

  margin:
    2px 0;

  color:
    #7e939f;

  font-size: 8px;

}


.text-panel {

  padding: 7px;

  font-size: 9px;

  line-height: 1.4;

}


.text-panel p {

  margin:
    4px 0;

}



/* =========================================================
   LINKS
   ========================================================= */


.personal-links {

  display: flex;

  flex-direction: column;

}


.personal-links a {

  padding:
    6px 7px;

  border-bottom:
    1px solid #d2e0e7;

  color:
    #4e7f9d;

  text-decoration: none;

  background:

    linear-gradient(
      90deg,
      white,
      #edf8fd
    );

}


.personal-links a:hover {

  padding-left:
    12px;

  color:
    #936b8c;

  background:
    #f7e8f1;

}



/* =========================================================
   VISUALS PREVIEW
   ========================================================= */


.visual-preview {

  display: grid;

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

  gap: 4px;

  padding: 7px;

}


.visual-placeholder {

  aspect-ratio: 1;

  display: flex;

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

  border:
    3px double #9dbac9;

  color:
    #7091a5;

  font-size: 8px;

  background:

    linear-gradient(
      135deg,
      #edfaff,
      #93d3ef
    );

}


.pink-visual {

  background:

    linear-gradient(
      135deg,
      #f9eef5,
      #e5bbd4
    ) !important;

}


.purple-visual {

  background:

    linear-gradient(
      135deg,
      #f4effc,
      #c4b5e3
    ) !important;

}



/* =========================================================
   FAVOURITES
   ========================================================= */


.favourite-grid {

  display: grid;

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

  gap: 3px;

  padding: 6px;

}


.favourite-grid div {

  padding:
    5px 2px;

  border:
    1px solid #becfd8;

  color:
    #6b8391;

  font-size: 8px;

  text-align: center;

  background:

    linear-gradient(
      white,
      #eaf6fb
    );

}


.favourite-grid div:nth-child(2),
.favourite-grid div:nth-child(5) {

  background:

    linear-gradient(
      white,
      #f4eaf4
    );

}


.favourite-grid b {

  display: block;

  margin-bottom:
    2px;

  color:
    #61a7d0;

  font-size: 17px;

}



/* =========================================================
   TRANSMISSION / STATS
   ========================================================= */


.transmission {

  padding: 7px;

  font-size: 9px;

}


.transmission span {

  color:
    #91a3ad;

  font-family:
    "Courier New",
    monospace;

  font-size: 8px;

}


.transmission p {

  margin:
    4px 0;

}


.stats-table,
.about-table {

  width: 100%;

  border-collapse:
    collapse;

  font-size: 8px;

}


.stats-table td,
.about-table td {

  padding:
    4px 6px;

  border-bottom:
    1px dotted #c5d8e1;

}


.stats-table td:first-child,
.about-table td:first-child {

  color:
    #7f949f;

}


.stats-table td:last-child {

  color:
    #3d7494;

  font-family:
    "Courier New",
    monospace;

}


.currently {

  padding: 7px;

  font-size: 9px;

}


.tiny-widget {

  display: grid;

  grid-template-columns:
    34px 1fr;

  align-items: center;

  margin-bottom:
    5px;

  padding:
    6px;

  border:
    1px solid #9fb7c4;

  color:
    #557b92;

  background:

    linear-gradient(
      120deg,
      white,
      #d9eff8,
      #eee5f6
    );

}


.tiny-widget div {

  grid-row:
    1 / 3;

  color:
    #67b0d7;

  font-size:
    24px;

}


.tiny-widget span {

  font-size:
    7px;

  letter-spacing:
    1px;

}


.tiny-widget strong {

  color:
    #36789d;

  font-size:
    10px;

}



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


.notes-panel {

  margin-top:
    5px;

}


.notes-subtitle {

  padding:
    5px 8px;

  border-bottom:
    1px dotted #bccfd9;

  color:
    #7c929f;

  font-size:
    8px;

  font-style:
    italic;

}


.fake-notes {

  padding:
    4px 6px;

}


.note-entry {

  display: grid;

  grid-template-columns:
    34px
    1fr;

  gap: 6px;

  padding:
    5px;

  border-bottom:
    1px dotted #c8d9e1;

}


.note-avatar {

  width: 30px;
  height: 30px;

  display: flex;

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

  border-radius:
    5px;

  color:
    white;

}


.note-avatar.pink {

  background:

    linear-gradient(
      #f8deee,
      #d9a3c6
    );

}


.note-avatar.blue {

  background:

    linear-gradient(
      #dff7ff,
      #68add5
    );

}


.note-avatar.purple {

  background:

    linear-gradient(
      #efe8fb,
      #a598cc
    );

}


.note-avatar.aqua {

  background:

    linear-gradient(
      #e7ffff,
      #79c8cb
    );

}


.note-user {

  color:
    #407d9f;

  font-size:
    9px;

  font-weight:
    bold;

}


.note-user .note-date {

  float: right;

  color: #98a7af;

  font-size: 7px;

  font-weight: normal;

}


.insert-name {

  float: none;

  color: #407d9f;

  font-size: 9px;

  font-weight: bold;

}


.note-entry p {

  margin:
    3px 0 0;

  font-size:
    9px;

}


.fake-note-form {

  display: grid;

  grid-template-columns:
    100px 1fr 45px;

  gap: 4px;

  padding:
    6px;

}


.fake-note-form input {

  min-width: 0;

  padding: 5px;

  border:
    1px inset #b7c6ce;

  font-family:
    inherit;

  font-size:
    8px;

}


.fake-note-form button {

  border:
    1px solid #9aaebb;

  color:
    #795e93;

  background:

    linear-gradient(
      white,
      #eadff3
    );

  cursor:
    pointer;

}


.temporary-note-warning {

  padding:
    0 7px 7px;

  color:
    #a3afb5;

  font-size:
    7px;

  text-align:
    right;

}



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


.about-top {

  display: grid;

  grid-template-columns:
    180px
    1fr;

  gap: 7px;

}


.about-photo-large {

  padding:
    8px;

  border:
    1px solid #9eb9c8;

  background:
    white;

}


.about-photo-placeholder {

  height: 185px;

  display: flex;

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

  border:
    5px double #91afbf;

  border-radius:
    10px;

  color:
    #718d9d;

  text-align:
    center;

  background:

    linear-gradient(
      135deg,
      #f0fbff,
      #9bd8f1 55%,
      #e0d4ef
    );

}


.profile-caption {

  margin-top:
    5px;

  padding:
    4px;

  border:
    1px solid #d7c9e5;

  color:
    #826995;

  text-align:
    center;

  background:
    #f1e9f7;

}


.about-copy {

  padding:
    8px;

  font-size:
    9px;

  line-height:
    1.5;

}


.about-copy h2 {

  margin:
    0 0 5px;

  color:
    #4d93bb;

}


.little-status {

  margin-top:
    8px;

  padding:
    5px;

  border:
    1px solid #ead0df;

  color:
    #94617f;

  text-align:
    center;

  background:
    #f9e7f1;

}



/* GIF MARQUEE */


.gif-marquee {

  width:
    100%;

  overflow:
    hidden;

  padding:
    6px 0;

}


.gif-marquee-track {

  display:
    flex;

  width:
    max-content;

  gap:
    5px;

  animation:
    gifScroll 20s linear infinite;

}


.gif-marquee:hover
.gif-marquee-track {

  animation-play-state:
    paused;

}


@keyframes gifScroll {

  from {

    transform:
      translateX(0);

  }

  to {

    transform:
      translateX(-50%);

  }

}


.fake-gif-banner {

  width:
    120px;

  height:
    35px;

  flex-shrink:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    2px outset #d7f1fb;

  color:
    white;

  font-size:
    8px;

  text-shadow:
    1px 1px #447796;

  background:

    repeating-linear-gradient(
      45deg,
      #5dadd6,
      #5dadd6 5px,
      #9ddcf3 6px,
      #9ddcf3 11px
    );

}


.pink-banner {

  background:

    repeating-linear-gradient(
      45deg,
      #d4a0c1,
      #d4a0c1 5px,
      #f2d0e3 6px,
      #f2d0e3 11px
    );

}


.purple-banner {

  background:

    repeating-linear-gradient(
      45deg,
      #9e90cb,
      #9e90cb 5px,
      #d9cff0 6px,
      #d9cff0 11px
    );

}


.aqua-banner {

  background:

    repeating-linear-gradient(
      45deg,
      #6cbec3,
      #6cbec3 5px,
      #b5ecee 6px,
      #b5ecee 11px
    );

}



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


.about-lower-grid {

  display: grid;

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

  gap:
    5px;

}


.tag-cloud {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    4px;

  padding:
    7px;

}


.tag-cloud span {

  padding:
    4px 6px;

  border:
    1px solid #bed1db;

  border-radius:
    9px;

  color:
    #587e95;

  background:
    #eaf7fc;

}


.tag-cloud span:nth-child(2n) {

  border-color:
    #ddc8d9;

  color:
    #8c6a83;

  background:
    #f7e9f2;

}


.cute-list {

  margin:
    6px 6px 8px 23px;

  padding:
    0;

  font-size:
    8px;

}


.status-log {

  padding:
    6px;

  font-size:
    8px;

}


.status-log p {

  margin:
    4px 0;

}


.status-log b {

  display:
    inline-block;

  width:
    38px;

  color:
    #678da4;

}



/* =========================================================
   VISUALS PAGE
   ========================================================= */


.visuals-description {

  padding:
    7px;

  border-bottom:
    1px dotted #c3d5df;

  color:
    #8296a2;

  font-size:
    8px;

  text-align:
    center;

}


.visuals-page-grid {

  display:
    grid;

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

  gap:
    6px;

  padding:
    8px;

}


.visuals-page-grid div {

  aspect-ratio:
    1;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    4px double #9eb9c7;

  color:
    #6c8b9e;

  background:

    linear-gradient(
      135deg,
      #eefbff,
      #9bd8f2
    );

}



/* =========================================================
   BOTTOM MARQUEE
   ========================================================= */


.bottom-banner-scroll {

  overflow:
    hidden;

  white-space:
    nowrap;

  padding:
    5px 0;

  border-top:
    1px solid #98b5c5;

  background:

    linear-gradient(
      90deg,
      #dff3fb,
      #f2e7f6,
      #dff3fb
    );

}


.bottom-banner-scroll div {

  display:
    inline-block;

  min-width:
    max-content;

  color:
    #577e96;

  font-size:
    8px;

  animation:
    bottomMove 34s linear infinite;

}


@keyframes bottomMove {

  from {

    transform:
      translateX(40%);

  }

  to {

    transform:
      translateX(-100%);

  }

}



/* =========================================================
   BROWSER
   ========================================================= */


.browser-window {

  width:
    620px;

}


.browser-toolbar {

  display:
    flex;

  gap:
    4px;

  align-items:
    center;

  padding:
    5px;

  border-bottom:
    1px solid #9eb2be;

  background:

    linear-gradient(
      white,
      #dce7ed
    );

}


.browser-toolbar button {

  min-width:
    27px;

  border:
    1px solid #a1b3bd;

  background:

    linear-gradient(
      white,
      #d5e3ea
    );

}


.browser-address {

  flex:
    1;

  padding:
    4px 7px;

  border:
    1px inset #b5c3cb;

  background:
    white;

}


.fake-google {

  min-height:
    355px;

  padding-top:
    70px;

  text-align:
    center;

  background:
    white;

}


.google-logo {

  margin-bottom:
    20px;

  color:
    #3568c7;

  font:
    46px Arial;

  letter-spacing:
    -4px;

}


#fake-search-form input {

  width:
    400px;

  padding:
    5px;

  border:
    1px solid #7d8c96;

}


#fake-search-form button {

  margin:
    9px 2px;

  padding:
    4px 9px;

  border:
    1px solid #aaa;

  background:
    #eee;

}


.google-links {

  margin-top:
    20px;

  color:
    #426db4;

  font-size:
    10px;

}


.google-footer {

  margin-top:
    65px;

  color:
    #999;

  font-size:
    8px;

}


.frozen-page {

  display:
    none;

  min-height:
    355px;

  padding-top:
    60px;

  text-align:
    center;

  background:

    linear-gradient(
      #effcff,
      #b9e5f7
    );

}


.frozen-symbol {

  color:
    white;

  font-size:
    65px;

  text-shadow:
    0 0 9px #418cbf;

}


.frozen-page h2 {

  color:
    #417d9f;

}


#frozen-query {

  color:
    #718995;

  font-family:
    "Courier New",
    monospace;

}


.frozen-error {

  display:
    inline-block;

  margin:
    10px;

  padding:
    5px;

  border:
    1px solid #9dbac9;

  color:
    #4e7991;

  font-family:
    "Courier New",
    monospace;

  font-size:
    9px;

  background:
    rgba(255,255,255,.5);

}



/* =========================================================
   EXPLORER
   ========================================================= */


.explorer-window {

  width:
    700px;

}


.explorer-toolbar {

  display:
    flex;

  gap:
    4px;

  padding:
    5px;

  border-bottom:
    1px solid #9fb3bf;

  background:
    #e4edf2;

}


.explorer-address {

  flex:
    1;

  padding:
    4px;

  border:
    1px inset #b7c4cc;

  background:
    white;

}


.explorer-body {

  min-height:
    430px;

  display:
    grid;

  grid-template-columns:
    155px 1fr;

  background:
    white;

}


.explorer-sidebar {

  padding:
    10px;

  background:

    linear-gradient(
      #d5ebfb,
      #eef7fc
    );

  border-right:
    1px solid #aebfca;

}


.explorer-side-group {

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  margin-bottom:
    18px;

}


.explorer-side-group b {

  color:
    #3d7398;

}


.explorer-side-group span {

  color:
    #5b7890;

  font-size:
    8px;

}


.explorer-main {

  display:
    grid;

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

  align-content:
    start;

  gap:
    7px;

  padding:
    12px;

}


.file-entry {

  min-height:
    61px;

  display:
    grid;

  grid-template-columns:
    38px 1fr;

  grid-template-rows:
    auto auto;

  align-items:
    center;

  padding:
    5px;

  border:
    1px solid transparent;

}


.file-entry:hover {

  border:
    1px solid #b4d2e2;

  background:
    #eaf7fd;

}


.file-entry span {

  grid-row:
    1 / 3;

  color:
    #63a8ce;

  font-size:
    27px;

  text-align:
    center;

}


.file-entry b {

  color:
    #4e7085;

  font-size:
    8px;

}


.file-entry small {

  color:
    #9aa8af;

  font-size:
    7px;

}


.explorer-statusbar {

  padding:
    4px 7px;

  border-top:
    1px solid #a9bbc5;

  color:
    #728691;

  font-size:
    8px;

  background:
    #edf3f6;

}



/* =========================================================
   MESSENGER
   ========================================================= */


.messenger-window {

  width:
    400px;

}


.messenger-toolbar {

  padding:
    4px 7px;

  border-bottom:
    1px solid #b7c5cd;

  color:
    #5d707d;

  background:
    #edf1f4;

  font-size:
    9px;

}


.messenger-contact {

  position:
    relative;

  min-height:
    70px;

  display:
    grid;

  grid-template-columns:
    52px 1fr 55px;

  gap:
    8px;

  align-items:
    center;

  padding:
    8px;

  border-bottom:
    1px solid #9fb9c8;

  background:

    linear-gradient(
      #edfaff,
      #c7e8f6,
      #e5dced
    );

}


.offline-contact {

  filter:
    saturate(.75);

}


.contact-avatar {

  width:
    48px;

  height:
    48px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    2px solid white;

  border-radius:
    7px;

  color:
    white;

  font-size:
    20px;

  background:

    linear-gradient(
      #b4e9f7,
      #819ccd
    );

  box-shadow:
    0 0 0 1px #8fa8b7;

}


.offline-avatar {

  filter:
    grayscale(.65);

}


.messenger-contact b {

  color:
    #526e82;

}


.offline-status {

  display:
    block;

  margin-top:
    3px;

  color:
    #8f999e;

  font-size:
    8px;

}


.contact-icons {

  color:
    #a787b2;

  font-size:
    14px;

  text-align:
    right;

}


.conversation {

  height:
    315px;

  overflow-y:
    auto;

  padding:
    8px;

  background:
    white;

}


.chat-line {

  margin-bottom:
    9px;

}


.chat-line span {

  display:
    block;

  margin-bottom:
    2px;

  font-size:
    8px;

  font-weight:
    bold;

}


.chat-line.salt span {

  color:
    #846c9e;

}


.chat-line.snow span {

  color:
    #448fb9;

}


.chat-line p {

  margin:
    0;

  line-height:
    1.35;

}


#messenger-error {

  display:
    none;

  grid-template-columns:
    30px 1fr;

  gap:
    5px;

  align-items:
    center;

  margin:
    5px;

  padding:
    6px;

  border:
    1px solid #d8b4c1;

  color:
    #8c5f70;

  background:
    #fbeaf0;

}


#messenger-error > span {

  color:
    #c2778f;

  font-size:
    18px;

  text-align:
    center;

}


#messenger-error b {

  display:
    block;

  font-size:
    9px;

}


#messenger-error small {

  display:
    block;

  margin-top:
    2px;

}


.chat-format-bar {

  padding:
    4px 7px;

  border-top:
    1px solid #b8c8d0;

  border-bottom:
    1px solid #b8c8d0;

  color:
    #657a88;

  background:
    #edf3f6;

}


.chat-compose {

  display:
    grid;

  grid-template-columns:
    1fr 65px;

  gap:
    5px;

  padding:
    6px;

  background:
    #e8f2f7;

}


.chat-compose textarea {

  height:
    55px;

  padding:
    5px;

  resize:
    none;

  border:
    1px inset #b6c5cd;

  font-family:
    inherit;

}


.chat-compose button {

  border:
    1px solid #8fa9b8;

  color:
    #58788c;

  background:

    linear-gradient(
      white,
      #d5e8f1
    );

  cursor:
    pointer;

}


.offline-footer {

  padding:
    4px 7px;

  color:
    #929fa6;

  font-size:
    7px;

  text-align:
    right;

  background:
    #f1f5f7;

}



/* =========================================================
   SNAKE
   ========================================================= */


.snake-window {

  width:
    310px;

}


.snake-top {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  padding:
    6px;

  border-bottom:
    1px solid #a6bcc8;

  color:
    #52768d;

  background:
    #e5f3f9;

}


#snake-canvas {

  display:
    block;

  margin:
    8px auto;

  border:
    3px double #91adbd;

  background:
    #eaf8ff;

}


.snake-help {

  padding:
    0 7px 8px;

  color:
    #85959e;

  font-size:
    8px;

  text-align:
    center;

}



/* =========================================================
   NOTEPAD / RECYCLE
   ========================================================= */


.notepad-window {

  width:
    365px;

}


.notepad-menu {

  padding:
    4px 7px;

  border-bottom:
    1px solid #bbb;

  color:
    #333;

  background:
    #ededed;

}


.notepad-paper {

  min-height:
    250px;

  margin:
    0;

  padding:
    8px;

  color:
    #111;

  background:
    white;

  font:
    12px "Courier New";

  white-space:
    pre-wrap;

}


.recycle-window {

  width:
    330px;

}


.recycle-content {

  min-height:
    175px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

  padding:
    18px;

  color:
    #5e7889;

  background:
    white;

}



/* =========================================================
   TASKBAR
   ========================================================= */


#taskbar {

  position:
    fixed;

  z-index:
    5000;

  left:
    0;

  right:
    0;

  bottom:
    0;

  height:
    43px;

  display:
    grid;

  grid-template-columns:
    115px 1fr 150px;

  border-top:
    1px solid white;

  background:

    linear-gradient(
      #97def8 0%,
      #51a9d8 46%,
      #3888bd 53%,
      #5eb0dd 100%
    );

  box-shadow:

    inset 0 2px 3px rgba(255,255,255,.6),

    0 -2px 7px rgba(43,93,127,.3);

}


#start-button {

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  padding-left:
    10px;

  border:
    none;

  border-radius:
    0 19px 19px 0;

  color:
    white;

  font-family:
    inherit;

  font-style:
    italic;

  font-weight:
    bold;

  text-shadow:
    1px 1px #3b7698;

  background:

    linear-gradient(
      #b9efff,
      #54b2df 52%,
      #718ec5
    );

  box-shadow:

    inset 0 3px 4px rgba(255,255,255,.8),

    2px 0 6px rgba(44,88,116,.3);

  cursor:
    pointer;

}


.start-orb {

  width:
    28px;

  height:
    28px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  color:
    white;

  background:

    radial-gradient(
      circle at 32% 28%,
      white,
      #89dcf7 38%,
      #6888c1 75%
    );

}


#task-apps {

  display:
    flex;

  align-items:
    center;

  gap:
    4px;

  padding-left:
    7px;

  overflow:
    hidden;

}


#task-apps button {

  min-width:
    115px;

  max-width:
    145px;

  height:
    30px;

  padding:
    0 8px;

  overflow:
    hidden;

  border:
    1px solid rgba(255,255,255,.35);

  border-radius:
    4px;

  color:
    white;

  text-align:
    left;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  text-shadow:
    1px 1px #357294;

  background:

    linear-gradient(
      rgba(255,255,255,.23),
      rgba(20,93,143,.32)
    );

}


#system-tray {

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;

  padding-right:
    9px;

  border-left:
    1px solid rgba(255,255,255,.3);

  color:
    white;

  background:
    rgba(29,112,165,.25);

}


.tray-clock {

  min-width:
    72px;

  font-size:
    9px;

  text-align:
    center;

}


.tray-clock small {

  font-size:
    8px;

}



/* =========================================================
   START MENU
   ========================================================= */


#start-menu {

  position:
    fixed;

  z-index:
    5001;

  left:
    4px;

  bottom:
    43px;

  width:
    280px;

  display:
    none;

  overflow:
    hidden;

  border:
    2px solid #4385ad;

  border-radius:
    8px 8px 0 0;

  background:
    white;

  box-shadow:
    4px -4px 17px rgba(38,82,111,.37);

}


#start-menu.open {

  display:
    block;

}


.start-menu-top {

  height:
    63px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    8px 12px;

  color:
    white;

  background:

    linear-gradient(
      #91dbf7,
      #608fc6
    );

}


.start-profile {

  width:
    45px;

  height:
    45px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    2px solid white;

  border-radius:
    8px;

  font-size:
    21px;

  background:
    #bcecff;

}


.start-menu-top small {

  display:
    block;

  margin-top:
    2px;

  opacity:
    .8;

  font-size:
    7px;

}


.start-menu-apps {

  padding:
    5px;

}


.start-menu-apps button {

  width:
    100%;

  padding:
    8px;

  border:
    none;

  color:
    #4e748a;

  font-family:
    inherit;

  text-align:
    left;

  background:
    white;

  cursor:
    pointer;

}


.start-menu-apps button:hover {

  background:
    #dff3fc;

}


.start-menu-bottom {

  display:
    flex;

  justify-content:
    space-between;

  padding:
    7px;

  border-top:
    1px solid #b8ccd8;

  color:
    #668196;

  font-size:
    7px;

  background:
    #e1f0f7;

}



/* =========================================================
   RESPONSIVE
   ========================================================= */


@media (max-width: 950px) {

  .main-window {

    width:
      78%;

  }


  .embedded-player {

    grid-template-columns:
      55px 1fr;

  }


  .proper-controls {

    grid-column:
      1 / -1;

  }


  .ds-grid {

    grid-template-columns:
      1fr 1fr;

  }


  .ds-grid > aside:last-child {

    grid-column:
      1 / -1;

  }


  .about-lower-grid {

    grid-template-columns:
      1fr;

  }

}

/* =========================================================
   WIDE DIGITALSNOW LAYOUT
   ========================================================= */


/*
   Intro page becomes:

   ┌ music player + expandable playlist ┐
   ├ main dashboard ─────────┬ notes ────┤
   └─────────────────────────┴───────────┘
*/


#home-page.active-page {

  display: grid;

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

  grid-template-areas:

    "music music"
    "dashboard notes";

  gap: 6px;

}


#home-page .music-shell {

  grid-area:
    music;

}


#home-page .ds-grid {

  grid-area:
    dashboard;

}


#home-page .notes-panel {

  grid-area:
    notes;

  margin:
    0;

  align-self:
    start;

}



/* main 3-column dashboard */

#home-page .ds-grid {

  grid-template-columns:
    185px
    minmax(290px, 1fr)
    190px;

}



/* notes fit neatly in right column */

#home-page .notes-panel .fake-notes {

  padding:
    3px 5px;

}


#home-page .notes-panel .note-entry {

  grid-template-columns:
    31px
    1fr;

  gap:
    5px;

  padding:
    5px 3px;

}


#home-page .notes-panel .note-avatar {

  width:
    28px;

  height:
    28px;

}


#home-page .notes-panel .fake-note-form {

  grid-template-columns:
    1fr
    52px;

  gap:
    4px;

}


#home-page .notes-panel #note-name {

  grid-column:
    1 / -1;

}


#home-page .notes-panel #note-message {

  grid-column:
    1;

}


#home-page .notes-panel #note-post {

  grid-column:
    2;

}



/* =========================================================
   MUSIC SHELL
   ========================================================= */


.music-shell {

  width:
    100%;

  display:
    grid;

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

  gap:
    0;

  overflow:
    hidden;

  border:
    1px solid #91aec0;

  background:
    white;

  transition:

    grid-template-columns .35s ease,
    gap .35s ease;

}


.music-shell.playlist-open {

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

  gap:
    5px;

}



/*
   remove old outer border from the original player because
   music-shell now provides it
*/

.music-shell .embedded-player {

  min-width:
    0;

  min-height:
    108px;

  margin:
    0;

  border:
    none;

  grid-template-columns:
    60px
    minmax(130px, 1fr)
    340px;

  background:

    linear-gradient(
      110deg,
      #ffffff 0%,
      #e4f6fc 57%,
      #e9e3f6 82%,
      #f7e5ef 100%
    );

}



/* slightly larger disc */

.music-shell .player-disc {

  width:
    55px;

  height:
    55px;

}



/* =========================================================
   PLAYLIST BUTTON
   ========================================================= */


.playlist-toggle {

  margin-left:
    auto;

  padding:
    3px 8px;

  border:
    1px solid #9b9cc7;

  border-radius:
    4px;

  color:
    #746898;

  font-family:
    inherit;

  font-size:
    8px;

  background:

    linear-gradient(
      #ffffff,
      #e8e2f5
    );

  cursor:
    pointer;

}


.playlist-toggle:hover {

  color:
    #587fa5;

  background:

    linear-gradient(
      #ffffff,
      #dff2fa
    );

}



/* =========================================================
   PLAYLIST DRAWER
   ========================================================= */


.playlist-drawer {

  min-width:
    0;

  width:
    100%;

  height:
    108px;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  opacity:
    0;

  border-left:
    0 solid transparent;

  background:

    linear-gradient(
      135deg,
      #f7fdff,
      #e7f4fb 58%,
      #f0e8f7
    );

  transition:

    opacity .25s ease,
    border .3s ease;

}


.music-shell.playlist-open
.playlist-drawer {

  opacity:
    1;

  border-left:
    1px solid #a4b8cb;

}



/* playlist heading */

.playlist-header {

  position:
    sticky;

  z-index:
    2;

  top:
    0;

  height:
    23px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    0 7px;

  color:
    white;

  font-size:
    8px;

  font-weight:
    bold;

  text-shadow:
    1px 1px rgba(72,83,145,.4);

  background:

    linear-gradient(
      90deg,
      #72b8df,
      #989ed8,
      #d5a9cf
    );

  border-bottom:
    1px solid #899dbd;

}


.playlist-header small {

  font-size:
    7px;

  font-weight:
    normal;

  opacity:
    .85;

}



/* individual tracks */

.playlist-track {

  width:
    100%;

  min-height:
    30px;

  display:
    grid;

  grid-template-columns:
    27px
    1fr;

  gap:
    4px;

  align-items:
    center;

  padding:
    3px 5px;

  border:
    none;

  border-bottom:
    1px dotted #c1d2dc;

  color:
    #58768a;

  font-family:
    inherit;

  text-align:
    left;

  background:
    rgba(255,255,255,.58);

  cursor:
    pointer;

}


.playlist-track:hover {

  background:

    linear-gradient(
      90deg,
      #e5f5fb,
      #f3e8f5
    );

}


.playlist-track.active-track {

  color:
    #715f93;

  background:

    linear-gradient(
      90deg,
      #dff3fb,
      #ece6f7,
      #f6e6ef
    );

}


.track-number {

  color:
    #88a3b4;

  font-family:
    "Courier New",
    monospace;

  font-size:
    8px;

  text-align:
    center;

}


.track-info {

  min-width:
    0;

}


.track-info b {

  display:
    block;

  overflow:
    hidden;

  font-size:
    8px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.track-info small {

  display:
    block;

  margin-top:
    1px;

  color:
    #99a7af;

  font-size:
    7px;

}



/* thin icy scrollbar */

.playlist-drawer::-webkit-scrollbar {

  width:
    7px;

}


.playlist-drawer::-webkit-scrollbar-track {

  background:
    #e6f2f7;

}


.playlist-drawer::-webkit-scrollbar-thumb {

  border-radius:
    5px;

  background:

    linear-gradient(
      #8fc7e3,
      #aaa3d6
    );

}



/* =========================================================
   WIDE ABOUT PAGE
   ========================================================= */


.about-top {

  grid-template-columns:
    210px
    1fr;

}


.about-lower-grid {

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

}



/* more visuals across when window is wide */

.visuals-page-grid {

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

}



/* =========================================================
   SMALLER SCREENS FALLBACK
   ========================================================= */


@media (max-width: 1180px) {

  #home-page.active-page {

    grid-template-columns:
      1fr;

    grid-template-areas:

      "music"
      "dashboard"
      "notes";

  }


  .music-shell.playlist-open {

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

  }


  #home-page .ds-grid {

    grid-template-columns:
      175px
      1fr
      175px;

  }


  .visuals-page-grid {

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

  }

}
/* =========================================================
   FINAL PERSONAL ABOUT PAGE OVERRIDES
   ========================================================= */

#about-page {
  padding: 6px;
}


/* top row: profile | bio | basic info */

.about-top-wide {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 220px;
  gap: 6px;
  align-items: stretch;
  margin-bottom: 5px;
}

.compact-profile-photo {
  margin: 0;
  padding: 7px;
}

.compact-profile-photo .about-photo-placeholder {
  height: 148px;
}

.compact-profile-photo .profile-caption {
  margin-top: 5px;
}

.about-welcome-panel,
.basic-info-panel {
  margin: 0;
}

.about-welcome-panel .about-copy {
  padding: 7px 9px;
  font-size: 9px;
  line-height: 1.35;
}

.about-welcome-panel .about-copy h2 {
  margin: 0 0 5px;
  color: #887eb4;
  font-size: 15px;
}

.about-welcome-panel .about-copy p {
  margin: 4px 0;
}

.about-fixation {
  margin-top: 6px !important;
  padding: 4px 6px;
  border: 1px solid #dfc8e4;
  border-radius: 4px;
  color: #836c91;
  background: linear-gradient(
    90deg,
    #edf9fd,
    #f4eaf7,
    #fbeaf2
  );
}

.basic-info-panel {
  position: relative;
  overflow: hidden;
}

.basic-info-panel .about-table {
  width: 100%;
}

.basic-info-panel .about-table td {
  padding: 5px 6px;
}

.basic-info-decor {
  padding: 8px;
  color: #9a98cf;
  font-size: 16px;
  letter-spacing: 8px;
  text-align: center;
  text-shadow: 0 0 5px white;
  background: linear-gradient(
    90deg,
    #edf9fd,
    #eeeaf8,
    #f8eaf2
  );
}


/* moving gif row */

.about-banner-panel {
  margin-bottom: 5px;
}

.about-banner-panel .gif-marquee {
  padding: 4px 0;
}

.about-banner-panel .fake-gif-banner {
  height: 31px;
}


/* bottom row: things/status | games | anime */

.about-info-grid {
  display: grid;
  grid-template-columns: 235px minmax(0, .82fr) minmax(0, 1.38fr);
  gap: 5px;
  align-items: start;
}

.about-info-grid .panel {
  margin-bottom: 5px;
}

.about-side-column,
.media-list-panel {
  min-width: 0;
}


/* things */

.things-list {
  padding: 4px 6px;
}

.things-list p {
  margin: 0;
  padding: 4px 2px;
  border-bottom: 1px dotted #c6d5de;
  font-size: 8px;
  line-height: 1.25;
}

.things-list p:last-child {
  border-bottom: none;
}

.things-list b {
  display: block;
  margin-bottom: 1px;
  color: #667f9b;
  font-size: 7px;
  font-weight: normal;
}

.things-list span {
  color: #596c79;
}

.things-list p:first-child span {
  color: #796c9b;
}

.about-side-column .status-log {
  padding: 5px 6px;
}

.about-side-column .status-log p {
  margin: 3px 0;
}


/* game / anime / movie chips */

.media-panel-subtitle {
  padding: 4px 6px;
  border-bottom: 1px dotted #c6d5de;
  color: #93a1aa;
  font-size: 7px;
  font-style: italic;
}

.media-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 3px;
  padding: 6px;
}

.media-tag-cloud span {
  padding: 3px 5px;
  border: 1px solid #bdd2de;
  border-radius: 7px;
  color: #537b94;
  font-size: 7px;
  line-height: 1.1;
  background: linear-gradient(
    #ffffff,
    #e5f5fb
  );
  box-shadow: inset 0 1px white;
}

.media-tag-cloud span:nth-child(3n + 2) {
  border-color: #c8c2e2;
  color: #756c99;
  background: linear-gradient(
    #ffffff,
    #eee9f8
  );
}

.media-tag-cloud span:nth-child(3n) {
  border-color: #e5c8d8;
  color: #8b6b7f;
  background: linear-gradient(
    #ffffff,
    #f8eaf2
  );
}

.media-group-title {
  padding: 4px 7px;
  border-bottom: 1px dotted #cad7de;
  color: #708aa0;
  font-size: 7px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: linear-gradient(
    90deg,
    #edf9fd,
    #eeeaf8
  );
}

.movie-title {
  border-top: 1px solid #d2dce2;
  background: linear-gradient(
    90deg,
    #eeeaf8,
    #faeaf2
  );
}

.more-media {
  padding: 3px 7px 6px;
  color: #9a879f;
  font-size: 7px;
  font-style: italic;
}


.profile-img {
  width: 47px;
  height: 47px;
  min-width: 47px;
  min-height: 47px;
  overflow: hidden;
  padding: 0;
  border-radius: 9px;
}

.profile-img img {
  width: 47px;
  height: 47px;
  max-width: 47px;
  max-height: 47px;
  display: block;
  object-fit: cover;
  border-radius: 8px;
}

.about-photo-placeholder {
  overflow: hidden;
  padding: 0;
}

.about-photo-placeholder img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* =========================================================
   DIGITAL SNOW
   NIGHT MODE + SNOWSTORM
   ========================================================= */


/* =========================================================
   SMOOTH THEME TRANSITION
   ========================================================= */

#desktop,
#desktop::before,
.window,
.window-titlebar,
.menu-strip,
.panel,
.panel-title,
.panel-title.dark-title,
.ds-hero,
.ticker,
.profile-tabs,
.internal-tab,
.music-shell,
.embedded-player,
.playlist-drawer,
.playlist-track,
#taskbar,
#start-menu,
.browser-toolbar,
.browser-address,
input,
textarea {
  transition:
    background .45s ease,
    background-color .45s ease,
    color .45s ease,
    border-color .45s ease,
    box-shadow .45s ease,
    text-shadow .45s ease,
    filter .45s ease;
}



/* =========================================================
   NIGHT MODE BUTTON
   ========================================================= */

#dark-mode-toggle {
  position: fixed;

  z-index: 16000;

  right: 16px;
  bottom: 54px;

  padding:
    5px 10px;

  border:
    1px solid #7fa4c2;

  border-radius:
    6px;

  color:
    #55758d;

  font-family:
    Tahoma,
    Verdana,
    Arial,
    sans-serif;

  font-size:
    8px;

  font-weight:
    bold;

  letter-spacing:
    .3px;

  background:
    linear-gradient(
      #ffffff,
      #e8f6fc 60%,
      #e7e1f4
    );

  box-shadow:
    inset 0 1px 0 white,
    0 2px 6px rgba(52,93,126,.18);

  cursor:
    pointer;
}


#dark-mode-toggle:hover {
  background:
    linear-gradient(
      #ffffff,
      #dff3fb,
      #e1daf3
    );
}



/* =========================================================
   NIGHT MODE
   MAIN WALLPAPER
   ========================================================= */

body.dark-mode #desktop {
  background:

    radial-gradient(
      circle at 73% 14%,
      rgba(185,224,255,.17) 0 5%,
      rgba(116,169,220,.12) 12%,
      transparent 29%
    ),

    radial-gradient(
      circle at 19% 30%,
      rgba(165,142,223,.18),
      transparent 27%
    ),

    radial-gradient(
      circle at 82% 70%,
      rgba(106,130,203,.12),
      transparent 30%
    ),

    linear-gradient(
      145deg,
      #09162c 0%,
      #102849 40%,
      #25345f 71%,
      #352e61 100%
    );
}


/* snowy floor */

body.dark-mode #desktop::before {
  background:

    linear-gradient(
      rgba(184,215,239,.38),
      rgba(70,91,130,.42)
    );

  box-shadow:

    inset 0 24px 45px
    rgba(219,240,255,.13);
}



/* =========================================================
   NIGHT MODE
   WINDOWS
   ========================================================= */

body.dark-mode .window {
  color:
    #d8e8f7;

  border-color:
    #5e789f;

  background:
    rgba(17,34,59,.97);

  box-shadow:

    inset 0 1px 0
    rgba(255,255,255,.12),

    0 12px 34px
    rgba(0,0,0,.40);
}



body.dark-mode .window-titlebar {
  color:
    #f4f8ff;

  text-shadow:
    1px 1px 2px
    #111c38;

  background:

    linear-gradient(
      90deg,
      #244f75 0%,
      #344973 48%,
      #58477c 100%
    );

  border-color:
    #7085aa;
}



/* =========================================================
   MENUS
   ========================================================= */

body.dark-mode .menu-strip {
  color:
    #bccfe1;

  border-color:
    #506785;

  background:

    linear-gradient(
      #223a59,
      #172c48
    );
}


body.dark-mode .online-dot {
  color:
    #9bd7c8;
}



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

body.dark-mode .ds-hero {
  color:
    #dceafa;

  background:

    radial-gradient(
      circle at 88% 15%,
      rgba(255,255,255,.13),
      transparent 24%
    ),

    linear-gradient(
      110deg,
      #172e4e,
      #263c66 61%,
      #4b3d6d
    );
}


body.dark-mode .ds-hero h1 {
  color:
    #d6ebff;

  text-shadow:
    0 0 9px
    rgba(151,204,248,.25);
}


body.dark-mode .hero-subtitle,
body.dark-mode .micro-label {
  color:
    #abbfd3;
}



/* =========================================================
   MOVING TICKER
   ========================================================= */

body.dark-mode .ticker {
  color:
    #cdddf0;

  border-color:
    #526a8e;

  background:

    linear-gradient(
      90deg,
      #152e4d,
      #303b68,
      #493965
    );
}



/* =========================================================
   INTERNAL TABS
   ========================================================= */

body.dark-mode .profile-tabs {
  border-color:
    #556b8e;

  background:
    #172a45;
}


body.dark-mode .internal-tab {
  color:
    #aebfd3;

  border-color:
    #516783;

  background:

    linear-gradient(
      #253b59,
      #172b46
    );
}


body.dark-mode .internal-tab.active {
  color:
    #f0f6ff;

  background:

    linear-gradient(
      #405b80,
      #263d64
    );
}



/* =========================================================
   PANELS
   ========================================================= */

body.dark-mode .panel {
  color:
    #d2e1ef;

  border-color:
    #526b8e;

  background:
    rgba(22,40,66,.94);
}


body.dark-mode .panel-title,
body.dark-mode .panel-title.dark-title {
  color:
    #f1f6ff;

  border-color:
    #637ba0;

  text-shadow:
    1px 1px 2px
    rgba(5,13,35,.8);

  background:

    linear-gradient(
      90deg,
      #285477 0%,
      #3e517b 45%,
      #655182 100%
    );
}



/* =========================================================
   NORMAL TEXT AREAS
   ========================================================= */

body.dark-mode .text-panel,
body.dark-mode .transmission,
body.dark-mode .profile-card,
body.dark-mode .status-log,
body.dark-mode .about-copy,
body.dark-mode .visuals-description,
body.dark-mode .cute-list,
body.dark-mode .things-list,
body.dark-mode .more-media,
body.dark-mode .media-panel-subtitle {
  color:
    #c9d9e8;
}


body.dark-mode a {
  color:
    #9ac9ef;
}


body.dark-mode a:visited {
  color:
    #b9a6e4;
}



/* =========================================================
   TABLES
   ========================================================= */

body.dark-mode .about-table td {
  color:
    #cfdeed;

  border-color:
    #455c7a;

  background:
    rgba(29,49,78,.70);
}



/* =========================================================
   TAGS
   ========================================================= */

body.dark-mode .tag-cloud span,
body.dark-mode .media-tag-cloud span {
  color:
    #b9d5e9;

  border-color:
    #526e8c;

  background:

    linear-gradient(
      #2d4866,
      #20364f
    );
}


body.dark-mode .tag-cloud span:nth-child(2n),
body.dark-mode .media-tag-cloud span:nth-child(3n + 2) {
  color:
    #d2c2ee;

  border-color:
    #726b9d;

  background:

    linear-gradient(
      #443c6a,
      #302d52
    );
}



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

body.dark-mode .music-shell {
  border-color:
    #506c8d;

  background:
    #12263f;
}


body.dark-mode .music-shell .embedded-player,
body.dark-mode .embedded-player {
  color:
    #d7e6f5;

  background:

    linear-gradient(
      110deg,
      #132a46 0%,
      #183653 54%,
      #35375f 78%,
      #493850 100%
    );
}


body.dark-mode .player-song {
  color:
    #d9eaff;
}


body.dark-mode .player-artist,
body.dark-mode .codec-display {
  color:
    #9bafc5;
}


body.dark-mode .playlist-drawer {
  border-color:
    #536b8e;

  background:

    linear-gradient(
      135deg,
      #122943,
      #193651 58%,
      #332e53
    );
}


body.dark-mode .playlist-track {
  color:
    #b8cce0;

  border-color:
    #3e5875;

  background:
    rgba(25,46,72,.85);
}


body.dark-mode .playlist-track:hover {
  background:

    linear-gradient(
      90deg,
      #234a68,
      #39375f
    );
}


body.dark-mode .playlist-track.active-track {
  color:
    #e5edff;

  background:

    linear-gradient(
      90deg,
      #285270,
      #443f72,
      #5c405f
    );
}


body.dark-mode .player-progress,
body.dark-mode .volume-bar {
  border-color:
    #526986;

  background:
    #101e33;
}



/* =========================================================
   INPUTS
   ========================================================= */

body.dark-mode input,
body.dark-mode textarea {
  color:
    #e1edf8 !important;

  border-color:
    #526987 !important;

  background:
    #142943 !important;
}


body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color:
    #758ba2;
}



/* =========================================================
   BROWSER
   ========================================================= */

body.dark-mode .browser-toolbar {
  border-color:
    #536b88;

  background:

    linear-gradient(
      #263c59,
      #182c46
    );
}


body.dark-mode .browser-toolbar button {
  color:
    #c9dbeb;

  border-color:
    #536c89;

  background:

    linear-gradient(
      #344d69,
      #21364f
    );
}


body.dark-mode .browser-address {
  color:
    #c9ddef;

  border-color:
    #526b88;

  background:
    #12263e;
}


body.dark-mode .fake-google,
body.dark-mode .frozen-page {
  color:
    #cedeed;

  background:
    #172b45;
}



/* =========================================================
   NOTES / MESSENGER / FILES
   ========================================================= */

body.dark-mode .note-entry,
body.dark-mode .fake-notes {
  color:
    #ceddea;

  border-color:
    #425b77;

  background:
    rgba(24,43,68,.92);
}


body.dark-mode .note-user {
  color:
    #a8c9e5;
}


body.dark-mode .note-date {
  color:
    #768ba1;
}



/* =========================================================
   TASKBAR
   ========================================================= */

body.dark-mode #taskbar {
  border-color:
    #607697;

  background:

    linear-gradient(
      #304c70,
      #182f50 56%,
      #10233d
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.14);
}


body.dark-mode #start-button,
body.dark-mode #task-apps button {
  color:
    #dbe9f6;

  border-color:
    #576f90;

  background:

    linear-gradient(
      #385877,
      #203956
    );
}


body.dark-mode #start-menu {
  color:
    #d2e1ed;

  border-color:
    #5c7291;

  background:
    rgba(18,37,61,.98);
}



/* =========================================================
   NIGHT MODE BUTTON WHILE ACTIVE
   ========================================================= */

body.dark-mode #dark-mode-toggle {
  color:
    #f0e7bc;

  border-color:
    #6b72a1;

  background:

    linear-gradient(
      #29385f,
      #1d2a4c
    );

  box-shadow:

    inset 0 1px 0
    rgba(255,255,255,.13),

    0 0 10px
    rgba(171,184,246,.18);
}



/* =========================================================
   SNOWSTORM NOTE
   ========================================================= */

#snowstorm-note {
  position:
    fixed;

  z-index:
    16000;

  right:
    16px;

  bottom:
    92px;

  width:
    156px;

  min-height:
    55px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    7px 8px;

  border:
    1px solid #9eb8c7;

  border-radius:
    3px;

  color:
    #617b8d;

  font-family:
    Tahoma,
    Verdana,
    Arial,
    sans-serif;

  text-align:
    left;

  background:

    linear-gradient(
      135deg,
      #ffffff,
      #effaff 62%,
      #eee8f8
    );

  box-shadow:

    2px 3px 8px
    rgba(49,86,112,.22),

    inset 0 1px 0 white;

  transform:
    rotate(-1deg);

  cursor:
    pointer;
}


#snowstorm-note:hover {
  transform:
    rotate(1deg)
    scale(1.025);
}


.storm-note-icon {
  color:
    #70aed2;

  font-size:
    20px;

  text-shadow:
    0 0 6px
    rgba(133,211,245,.7);
}


.storm-note-copy {
  min-width:
    0;
}


.storm-note-copy b {
  display:
    block;

  margin-bottom:
    2px;

  color:
    #7d6c99;

  font-size:
    8px;
}


.storm-note-copy small {
  display:
    block;

  font-size:
    7px;

  line-height:
    1.25;
}



/* night version of note */

body.dark-mode #snowstorm-note {
  color:
    #bbcddd;

  border-color:
    #5d7290;

  background:

    linear-gradient(
      135deg,
      #233d5b,
      #1c304e 62%,
      #3c365e
    );

  box-shadow:
    2px 3px 10px
    rgba(0,0,0,.28);
}


body.dark-mode .storm-note-copy b {
  color:
    #d4c4ef;
}



/* =========================================================
   SNOWSTORM LAYER
   ========================================================= */

#snowstorm-layer {
  position:
    fixed;

  z-index:
    18000;

  inset:
    0;

  overflow:
    hidden;

  pointer-events:
    none;

  opacity:
    0;

  transition:
    opacity .4s ease;
}


body.snowstorm-active #snowstorm-layer {
  opacity:
    1;

  background:

    linear-gradient(
      120deg,
      rgba(210,240,255,.08),
      rgba(255,255,255,.18),
      rgba(160,207,239,.10)
    );
}



/* blowing snowy fog */

#snowstorm-layer::before {
  content:
    "";

  position:
    absolute;

  inset:
    -20%;

  opacity:
    0;

  background:

    repeating-linear-gradient(
      120deg,
      transparent 0 55px,
      rgba(235,249,255,.11) 65px,
      transparent 85px
    );

  transform:
    translateX(-20%);

  transition:
    opacity .4s ease;
}


body.snowstorm-active
#snowstorm-layer::before {
  opacity:
    1;

  animation:
    stormFog
    .7s
    linear
    infinite;
}



/* =========================================================
   INDIVIDUAL SNOW PARTICLES
   ========================================================= */

.storm-flake {
  position:
    absolute;

  top:
    -12vh;

  left:
    var(--left);

  opacity:
    var(--opacity);

  color:
    white;

  font-size:
    var(--size);

  line-height:
    1;

  text-shadow:

    0 0 5px white,

    0 0 10px
    rgba(164,222,255,.9);

  filter:
    blur(var(--blur));

  animation:

    stormFall
    var(--duration)
    linear
    var(--delay)
    infinite;
}



/* =========================================================
   THE WHOLE DESKTOP REACTS TO THE STORM
   ========================================================= */

body.snowstorm-active #desktop {
  filter:
    brightness(.82)
    saturate(.85)
    contrast(1.04);
}


body.snowstorm-active
#desktop .window {
  animation:
    stormWindowShake
    .38s
    ease-in-out
    infinite
    alternate;
}


body.snowstorm-active
#desktop .desktop-icon,
body.snowstorm-active
#desktop .loose-file {
  animation:
    stormIconBlow
    .75s
    ease-in-out
    infinite
    alternate;
}


body.snowstorm-active
#taskbar {
  animation:
    stormTaskbar
    .45s
    ease-in-out
    infinite
    alternate;
}



/* note shakes because it caused this */

body.snowstorm-active
#snowstorm-note {
  animation:
    guiltyNote
    .18s
    linear
    infinite
    alternate;
}



/* =========================================================
   STORM CALMS DOWN
   ========================================================= */

body.snowstorm-calming
#snowstorm-layer {
  opacity:
    .25;
}


body.snowstorm-calming
#desktop .window,
body.snowstorm-calming
#desktop .desktop-icon,
body.snowstorm-calming
#desktop .loose-file,
body.snowstorm-calming
#taskbar {
  animation-duration:
    1.4s;
}



/* =========================================================
   STORM ANIMATIONS
   ========================================================= */

@keyframes stormFall {

  0% {

    transform:
      translate3d(
        -15vw,
        -10vh,
        0
      )
      rotate(0deg);

  }


  100% {

    transform:
      translate3d(
        var(--drift),
        125vh,
        0
      )
      rotate(760deg);

  }

}



@keyframes stormFog {

  from {

    transform:
      translateX(-20%);

  }


  to {

    transform:
      translateX(20%);

  }

}



@keyframes stormWindowShake {

  from {

    transform:
      translateX(-4px)
      translateY(1px)
      rotate(-.12deg);

  }


  to {

    transform:
      translateX(7px)
      translateY(-2px)
      rotate(.18deg);

  }

}



@keyframes stormIconBlow {

  from {

    transform:
      translateX(-5px)
      rotate(-2deg);

  }


  to {

    transform:
      translateX(24px)
      translateY(-3px)
      rotate(4deg);

  }

}



@keyframes stormTaskbar {

  from {

    transform:
      translateX(-2px);

  }


  to {

    transform:
      translateX(3px);

  }

}



@keyframes guiltyNote {

  from {

    transform:
      rotate(-3deg)
      translateX(-2px);

  }


  to {

    transform:
      rotate(2deg)
      translateX(2px);

  }

}



/* =========================================================
   ACCESSIBILITY:
   don't shake violently if reduced motion is enabled
   ========================================================= */

@media
(prefers-reduced-motion: reduce) {

  body.snowstorm-active
  #desktop .window,

  body.snowstorm-active
  #desktop .desktop-icon,

  body.snowstorm-active
  #desktop .loose-file,

  body.snowstorm-active
  #taskbar,

  body.snowstorm-active
  #snowstorm-note {

    animation:
      none;

  }

}