@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap');

:root {
  --pink: #ffcfe6;
  --pink-dark: #e887b8;
  --lavender: #e4d7ff;
  --lavender-dark: #a88ad4;
  --blue: #d9edff;
  --blue-dark: #8db8db;
  --mint: #dff6eb;
  --mint-dark: #8fc9ad;
  --yellow: #fff2bf;
  --yellow-dark: #ddb963;
  --peach: #ffe0d1;
  --peach-dark: #dd9a7c;
  --cream: #fffafd;
  --text: #65577d;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

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

  color: var(--text);

  font-family:
    "MS PGothic",
    "MS Gothic",
    Verdana,
    Arial,
    sans-serif;

  font-size: 12px;
  line-height: 1.45;

  background-color: #fff4fa;

  background-image:
    url("https://i.pinimg.com/736x/14/dd/70/14dd7014df9273145e7ab62f7576287a.jpg");

  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

a {
  color: #a25c8d;
  text-decoration: none;
}

a:hover {
  color: #d35d9b;
  text-decoration: underline;
}

button,
input {
  font: inherit;
}


/* ==============================
   TOP TICKER
   ============================== */

.top-ticker {
  width: 100%;
  min-height: 22px;

  padding: 3px 10px;

  overflow: hidden;

  text-align: center;

  color: #775d89;

  font-size: 10px;
  letter-spacing: .4px;

  border-bottom: 1px solid #d6acd0;

  background:
    linear-gradient(
      to right,
      #ffd3e8,
      #e6d9ff,
      #d9edff,
      #dff6eb,
      #fff2bf,
      #ffd3e8
    );
}


/* ==============================
   SITE
   ============================== */

.site {
  width: 1060px;

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

  margin: 12px auto 24px;
}


/* ==============================
   HEADER
   ============================== */

.masthead {
  position: relative;

  width: 100%;

  margin-bottom: 10px;

  padding: 10px 15px 10px;

  overflow: hidden;

  text-align: center;

  border: 1px solid #c99fca;
  border-radius: 5px;

  box-shadow:
    2px 2px 0 rgba(151, 111, 151, .15);

  background:
    linear-gradient(
      100deg,
      #ffd1e5 0%,
      #f6d8ed 30%,
      #e6dcff 64%,
      #d9edff 100%
    );
}


/* ==============================
   BANNER
   ============================== */

.banner-picture {
  position: relative;

  width: 97%;

  margin: 0 auto 9px;

  padding: 4px;

  overflow: hidden;

  border: 2px solid #d989b6;

  outline: 2px solid #fff;
  outline-offset: -6px;

  border-radius: 5px;

  background: #ffd8ea;

  box-shadow:
    2px 2px 0 rgba(122, 83, 126, .18);
}

.banner-picture img {
  display: block;

  width: 100%;
  height: 135px;

  object-fit: cover;
  object-position: center;

  border: 1px solid #f2b7d3;
  border-radius: 2px;
}


/* ==============================
   TITLE ON GIF
   ============================== */

.banner-title {
  position: absolute;

  top: 50%;
  left: 50%;

  z-index: 2;

  width: 90%;

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

  text-align: center;

  pointer-events: none;
}

.banner-kicker {
  margin-bottom: -2px;

  color: #ad6a9f;

  font-family:
    "Cherry Bomb One",
    Verdana,
    sans-serif;

  font-size: 15px;

  letter-spacing: 5px;

  text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff,
     0 2px 3px rgba(100, 55, 100, .35);
}

.banner-title h1 {
  margin: 0;

  color: #96578e;

  font-family:
    "Cherry Bomb One",
    Verdana,
    sans-serif;

  font-size: 34px;
  font-weight: normal;

  line-height: 1.1;

  letter-spacing: 1px;

  text-shadow:
    -2px -2px 0 #fff,
     2px -2px 0 #fff,
    -2px  2px 0 #fff,
     2px  2px 0 #fff,
     0 3px 4px rgba(91, 57, 99, .35);
}

.masthead p {
  margin: 2px 0 8px;

  color: #806b91;

  font-size: 10px;
}


/* ==============================
   NAVIGATION
   ============================== */

.top-nav {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 4px;
}

.top-nav a,
.top-nav button {
  min-width: 62px;

  padding: 3px 7px;

  color: #725b84;

  font-size: 9px;
  font-weight: bold;

  text-align: center;

  border: 1px solid #b99ec7;
  border-radius: 2px;

  background:
    linear-gradient(
      #fff,
      #f2e9f7
    );

  box-shadow:
    inset 1px 1px 0 #fff;

  cursor: pointer;
}

.top-nav a:hover,
.top-nav button:hover {
  color: #a04c83;

  text-decoration: none;

  background:
    linear-gradient(
      #fff4fa,
      #eadcf3
    );
}


/* ==============================
   MAIN THREE-COLUMN LAYOUT
   ============================== */

.home-grid {
  display: grid;

  grid-template-columns:
    280px
    450px
    310px;

  gap: 10px;

  align-items: start;

  width: 100%;
}

.column {
  min-width: 0;
}


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

.panel {
  width: 100%;

  margin-bottom: 10px;

  overflow: hidden;

  border: 1px solid #bda9c5;
  border-radius: 4px;

  box-shadow:
    2px 2px 0 rgba(121, 92, 130, .10);

  background: var(--cream);
}

.panel-title {
  min-height: 25px;

  padding: 3px 8px;

  display: flex;

  align-items: center;

  color: #715b80;

  font-family:
    "Cherry Bomb One",
    Verdana,
    sans-serif;

  font-size: 14px;
  font-weight: normal;

  line-height: 1.2;

  letter-spacing: .3px;

  border-bottom:
    1px solid rgba(112, 87, 125, .25);

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

.panel-body {
  padding: 9px;

  background:
    rgba(255, 255, 255, .84);
}


/* ==============================
   PANEL COLORS
   ============================== */

.panel.pink {
  border-color: var(--pink-dark);
}

.panel.pink > .panel-title {
  background:
    linear-gradient(
      to right,
      #ffc9e2,
      #ffe3f0
    );
}


.panel.lavender {
  border-color: var(--lavender-dark);
}

.panel.lavender > .panel-title {
  background:
    linear-gradient(
      to right,
      #ddd0ff,
      #eee8ff
    );
}


.panel.blue {
  border-color: var(--blue-dark);
}

.panel.blue > .panel-title {
  background:
    linear-gradient(
      to right,
      #d2eaff,
      #edf7ff
    );
}


.panel.mint {
  border-color: var(--mint-dark);
}

.panel.mint > .panel-title {
  background:
    linear-gradient(
      to right,
      #d8f3e6,
      #effbf5
    );
}


.panel.yellow {
  border-color: var(--yellow-dark);
}

.panel.yellow > .panel-title {
  background:
    linear-gradient(
      to right,
      #ffefb1,
      #fff8da
    );
}


.panel.peach {
  border-color: var(--peach-dark);
}

.panel.peach > .panel-title {
  background:
    linear-gradient(
      to right,
      #ffdac8,
      #fff0e8
    );
}


/* ==============================
   FEATURE / WELCOME
   ============================== */

.feature-panel .panel-body {
  padding: 12px;
}

.feature-panel h2 {
  margin: 0 0 6px;

  color: #9c5f8a;

  font-family:
    "Cherry Bomb One",
    Verdana,
    sans-serif;

  font-size: 24px;
  font-weight: normal;

  line-height: 1.15;
}

.feature-panel p {
  margin: 5px 0;
}


/* ==============================
   UPDATE HISTORY
   ============================== */

.update-list {
  margin: 0;

  padding: 0;

  list-style: none;
}

.update-list li {
  padding: 5px 2px;

  border-bottom:
    1px dotted #d8c7db;
}

.update-list li:last-child {
  border-bottom: 0;
}

.update-date {
  color: #b16091;

  font-weight: bold;
}


/* ==============================
   MEDIA
   ============================== */

.media-grid {
  display: grid;

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

  gap: 6px;
}

.media-card {
  min-width: 0;

  overflow: hidden;

  text-align: center;

  border: 1px solid #cdbdd2;

  background: #fff;
}

.media-placeholder {
  display: flex;

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

  width: 100%;

  aspect-ratio: 1 / 1;

  color: #806787;

  font-family:
    "Cherry Bomb One",
    Verdana,
    sans-serif;

  font-size: 17px;

  border-bottom:
    1px solid #d5c8d8;
}

.pink-placeholder {
  background: #ffd6e8;
}

.lavender-placeholder {
  background: #e6ddff;
}

.blue-placeholder {
  background: #dceeff;
}

.yellow-placeholder {
  background: #fff2c7;
}

.media-card span {
  display: block;

  padding: 4px;

  overflow: hidden;

  font-size: 9px;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* ==============================
   BLINKIES + STAMPS
   ============================== */

.blinkies-panel .panel-body {
  padding: 7px;
}

.blinkies-box {
  display: flex;

  flex-wrap: wrap;

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

  gap: 5px;

  max-height: 180px;

  padding: 5px;

  overflow-y: auto;

  border:
    1px dashed #d6a6c9;

  background:
    rgba(255, 245, 251, .78);
}

.blinkies-box img {
  display: block;

  max-width: 100%;

  height: auto;

  image-rendering: auto;
}


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

.link-list {
  margin: 0;

  padding-left: 16px;
}

.link-list li {
  margin: 3px 0;
}


/* ==============================
   SPOTLIGHT
   ============================== */

.spotlight {
  display: grid;

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

  gap: 10px;

  align-items: start;
}

.spotlight-placeholder {
  display: flex;

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

  width: 110px;
  height: 145px;

  padding: 5px;

  color: #9a7896;

  text-align: center;

  border: 1px solid #af9db8;

  background:
    linear-gradient(
      135deg,
      #ffd8e9,
      #e5dcff,
      #dcefff
    );
}

.spotlight h3 {
  margin: 0 0 4px;

  color: #82629a;

  font-family:
    "Cherry Bomb One",
    Verdana,
    sans-serif;

  font-size: 18px;
  font-weight: normal;
}


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

.current-grid {
  display: grid;

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

  gap: 6px;
}

.current-item {
  min-width: 0;

  padding: 6px;

  border: 1px solid #d0c3d5;

  background:
    rgba(255, 255, 255, .72);
}

.current-item strong {
  display: block;

  margin-bottom: 2px;

  color: #8d6598;

  font-family:
    "Cherry Bomb One",
    Verdana,
    sans-serif;

  font-size: 13px;
  font-weight: normal;
}


/* ==============================
   CALENDAR
   ============================== */

.calendar-holder {
  padding: 9px;

  overflow: hidden;
}

#calendar {
  width: 100% !important;

  height: auto !important;

  min-height: 286px !important;

  padding: 5px !important;

  gap: 3px !important;

  margin: 0 auto !important;

  color: #665673 !important;

  border:
    1px solid #b799d4 !important;

  background:
    #fffafd !important;

  font-family:
    "MS PGothic",
    Verdana,
    sans-serif !important;

  font-size:
    10px !important;
}

#calendarHeader {
  min-height: 34px !important;

  padding: 5px !important;

  overflow: hidden;

  text-align: center !important;

  color: #7f5c91 !important;

  border:
    1px solid #c7a5d8 !important;

  background:
    linear-gradient(
      to right,
      #ffd3e8,
      #e2d8ff,
      #d9edff
    ) !important;

  font-family:
    "Cherry Bomb One",
    Verdana,
    sans-serif !important;

  font-size:
    15px !important;
}

#calendarGrid {
  width: 100% !important;

  gap: 2px !important;
}

.calendarDayOfTheWeek,
.calendarCell {
  min-width: 0 !important;

  height: 30px !important;

  min-height: 30px !important;

  border:
    1px solid #cab8d4 !important;

  font-size:
    10px !important;
}

.calendarDayOfTheWeek {
  color: #725b8e !important;

  background:
    #ece4ff !important;

  font-weight:
    bold;
}

.calendarCell {
  color: #665673 !important;

  background:
    #fffafd !important;
}

.calendarNonMonthDay {
  color: #b9aeb7 !important;

  background:
    #faf6f9 !important;
}

.calendarToday {
  color: #8d4f7a !important;

  font-weight:
    bold !important;

  border:
    2px solid #da76aa !important;

  background:
    linear-gradient(
      135deg,
      #ffc9e1,
      #e0d7ff
    ) !important;
}


/* ==============================
   DESKTOP TITLE BARS
   ============================== */

.desktop-title {
  display: flex;

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

  gap: 6px;
}


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

.music-stack {
  width: 100%;
}

.player-body {
  padding: 7px;

  background:
    linear-gradient(
      #f7fbff,
      #e9f2fb
    );
}

.player-screen {
  display: grid;

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

  gap: 5px;

  margin-bottom: 6px;

  padding: 4px;

  overflow: hidden;

  color: #655876;

  font-family:
    "MS Gothic",
    monospace;

  font-size: 9px;

  border:
    1px inset #b8c0cd;

  background:
    #fbf8fc;
}

#music-cur-time {
  white-space: nowrap;
}

#music-display-title {
  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.music-buttons {
  display: grid;

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

  gap: 3px;

  margin-bottom: 5px;
}

.music-buttons button {
  height: 24px;

  padding: 0;

  color: #665776;

  font-size: 10px;

  border:
    1px solid #aeb5c1;

  background:
    linear-gradient(
      #fff,
      #dce3ed
    );

  box-shadow:
    inset 1px 1px 0 #fff;

  cursor: pointer;
}

.music-buttons button:active {
  background:
    linear-gradient(
      #d8dfe8,
      #fff
    );
}

.range-row {
  display: grid;

  grid-template-columns:
    30px 1fr;

  gap: 4px;

  align-items: center;

  margin: 4px 0;

  font-size: 8px;
}

.range-row input[type="range"] {
  width: 100%;

  min-width: 0;
}


/* ==============================
   MUSIC VISUALIZER
   ============================== */

.visualizer {
  height: 30px;

  display: flex;

  align-items: flex-end;

  gap: 2px;

  padding: 4px;

  margin-top: 5px;

  overflow: hidden;

  border:
    1px inset #b8c0cd;

  background:
    #f9f3fa;
}

.visualizer i {
  width: 100%;

  height: 12%;

  min-height: 2px;

  transition:
    height .12s ease;

  background:
    linear-gradient(
      to top,
      #e779a9,
      #b997df,
      #84badc
    );
}


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

.playlist-wrap {
  max-height: 155px;

  overflow-y: auto;

  background: #fff;
}

.playlist-table {
  width: 100%;

  border-collapse: collapse;

  table-layout: fixed;

  font-size: 9px;
}

.playlist-table th,
.playlist-table td {
  padding: 3px 5px;

  overflow: hidden;

  text-align: left;

  text-overflow: ellipsis;

  white-space: nowrap;

  border:
    1px solid #d0c7d5;
}

.playlist-table th {
  color: #6d5a78;

  background:
    #eee8f2;
}

.playlist-table th:first-child,
.playlist-table td:first-child {
  width: 34px;

  text-align: center;
}

.playlist-row {
  cursor: pointer;
}

.playlist-row:nth-child(even) {
  background:
    #fff7fb;
}

.playlist-row:hover {
  background:
    #f1e6ff;
}

.playlist-row.active {
  color: #8d4d7d;

  font-weight: bold;

  background:
    #ffdced;
}

.empty-playlist {
  margin: 0;

  padding: 12px;

  text-align: center;

  color: #9b819a;

  font-size: 9px;
}


/* ==============================
   HIDDEN YOUTUBE PLAYER
   ============================== */

#youtube-player-shell {
  position: fixed;

  left: -9999px;
  top: -9999px;

  width: 1px;
  height: 1px;

  opacity: 0;

  pointer-events: none;
}


/* ==============================
   TO-DO
   ============================== */

.todo-list {
  margin: 0;

  padding: 0;

  list-style: none;
}

.todo-list li {
  position: relative;

  margin: 5px 0;

  padding-left: 17px;
}

.todo-list li::before {
  content: "□";

  position: absolute;

  left: 0;
  top: 0;

  color: #c1779d;

  font-weight: bold;
}


/* ==============================
   SITE INFO
   ============================== */

.site-info p {
  margin: 3px 0;
}


/* ==============================
   LITTLE MESSAGE
   ============================== */

.little-message {
  color: #9c6c93;

  font-family:
    "Cherry Bomb One",
    Verdana,
    sans-serif;

  font-size: 13px;
}


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

.footer {
  margin-top: 4px;

  padding: 7px;

  text-align: center;

  color: #8d7093;

  font-family:
    "Cherry Bomb One",
    Verdana,
    sans-serif;

  font-size: 12px;

  border:
    1px solid #c7acc7;

  border-radius: 4px;

  background:
    linear-gradient(
      to right,
      #ffd8e9,
      #e7ddff,
      #dcefff
    );
}


/* ==============================
   SITEMAP OVERLAY
   ============================== */

.overlay {
  position: fixed;

  inset: 0;

  z-index: 9999;

  display: none;

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

  padding: 20px;

  background:
    rgba(74, 60, 82, .42);

  backdrop-filter:
    blur(2px);
}

.sitemap-window {
  width: 520px;

  max-width: 95vw;

  max-height: 85vh;

  overflow: hidden;

  border:
    1px solid #917aa2;

  border-radius: 3px;

  box-shadow:
    5px 6px 0 rgba(70, 54, 80, .20);

  background:
    #fffafd;

  transition:
    transform .15s ease,
    opacity .15s ease;
}

.sitemap-window.maximized {
  width:
    calc(100vw - 30px);

  height:
    calc(100vh - 30px);

  max-width: none;

  max-height: none;
}


/* ==============================
   SITEMAP TITLE BAR
   ============================== */

.sitemap-titlebar {
  display: flex;

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

  gap: 8px;

  min-height: 29px;

  padding:
    3px 5px 3px 9px;

  color: #70577e;

  border-bottom:
    1px solid #a990b5;

  background:
    linear-gradient(
      to right,
      #ffcfe6,
      #e4d7ff,
      #d9edff
    );
}

.sitemap-titlebar strong {
  font-family:
    "Cherry Bomb One",
    Verdana,
    sans-serif;

  font-size: 14px;
  font-weight: normal;
}

.sitemap-controls {
  display: flex;

  gap: 3px;
}

.sitemap-controls button {
  width: 24px;
  height: 21px;

  padding: 0;

  color: #67546f;

  line-height: 18px;

  border:
    1px solid #9e8aaa;

  background:
    linear-gradient(
      #fff,
      #e7deed
    );

  cursor: pointer;
}

.sitemap-controls button:hover {
  background:
    #fff0f7;
}


/* ==============================
   SITEMAP CONTENT
   ============================== */

.sitemap-content {
  height: 100%;

  max-height:
    calc(85vh - 29px);

  overflow-y: auto;

  padding: 15px;

  background:
    linear-gradient(
      rgba(255, 255, 255, .88),
      rgba(255, 250, 253, .94)
    );
}

.sitemap-window.maximized
.sitemap-content {
  max-height:
    calc(100vh - 59px);
}

.sitemap-content h2 {
  margin: 0 0 10px;

  color: #95658e;

  font-family:
    "Cherry Bomb One",
    Verdana,
    sans-serif;

  font-size: 23px;
  font-weight: normal;
}

.sitemap-grid {
  display: grid;

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

  gap: 8px;
}

.sitemap-group {
  padding: 8px;

  border:
    1px solid #d0bdd3;

  background:
    rgba(255, 255, 255, .8);
}

.sitemap-group h3 {
  margin: 0 0 5px;

  color: #80618f;

  font-family:
    "Cherry Bomb One",
    Verdana,
    sans-serif;

  font-size: 15px;
  font-weight: normal;
}

.sitemap-group ul {
  margin: 0;

  padding-left: 17px;
}

.sitemap-group li {
  margin: 3px 0;
}


/* ==============================
   SELECTION
   ============================== */

::selection {
  color: #65577d;

  background:
    #ffd1e6;
}


/* ==============================
   SCROLLBAR
   ============================== */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background:
    #f7edf4;
}

::-webkit-scrollbar-thumb {
  border:
    2px solid #f7edf4;

  background:
    #d8b7d3;
}

::-webkit-scrollbar-thumb:hover {
  background:
    #c995c0;
}


/* ==============================
   SMALLER DESKTOPS
   ============================== */

@media (max-width: 1080px) {

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

}


/* ==============================
   TABLETS
   ============================== */

@media (max-width: 900px) {

  .site {
    max-width:
      calc(100vw - 16px);
  }

  .home-grid {
    grid-template-columns:
      1fr
      1fr;
  }

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

    grid-row:
      1;
  }

  .left-column {
    grid-column:
      1;
  }

  .right-column {
    grid-column:
      2;
  }

}


/* ==============================
   PHONES
   ============================== */

@media (max-width: 620px) {

  .site {
    margin-top:
      8px;
  }

  .home-grid {
    grid-template-columns:
      1fr;
  }

  .center-column,
  .left-column,
  .right-column {
    grid-column:
      1;

    grid-row:
      auto;
  }

  .center-column {
    grid-row:
      1;
  }

  .banner-picture img {
    height:
      110px;
  }

  .banner-title h1 {
    font-size:
      27px;
  }

  .banner-kicker {
    font-size:
      12px;

    letter-spacing:
      3px;
  }

  .top-nav a,
  .top-nav button {
    flex:
      1 1 30%;
  }

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

  .spotlight-placeholder {
    width:
      90px;
  }

  .sitemap-grid {
    grid-template-columns:
      1fr;
  }

  .current-grid {
    grid-template-columns:
      1fr;
  }

}