/* ==================================================
   Y2K SLYTHERIN WEBSITE
================================================== */


/* ==========================================
   RESET
========================================== */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  padding: 0;

  background-color: #e9e9e5;

  color: #555b55;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 11px;

  line-height: 1.5;

}



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

a {

  color: #53654e;

  text-decoration: none;

}


a:hover {

  color: #263c28;

  text-decoration: underline;

}



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

.browser-bar {

  width: 100%;

  height: 25px;

  padding:
    5px 10px;

  display: flex;

  justify-content: space-between;

  background:
    linear-gradient(
      #ffffff,
      #d7d8d4
    );

  border-bottom:
    1px solid #999d98;

  color: #666b66;

  font-family:
    Arial,
    sans-serif;

  font-size: 9px;

}



/* ==========================================
   WEBSITE WRAPPER
========================================== */

.wrapper {

  width: 1050px;

  max-width:
    calc(100% - 20px);

  margin:
    12px auto;

  background:
    #f8f8f5;

  border:
    1px solid #8f968d;

  box-shadow:
    2px 2px 0 #c5c7c2;

}



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

.site-header {

  border-bottom:
    1px solid #899287;

  background:
    linear-gradient(
      to bottom,
      #ffffff 0%,
      #f2f3ef 50%,
      #dfe3dc 51%,
      #f8f8f5 100%
    );

}


.header-top {

  display:
    flex;

  justify-content:
    space-between;

  padding:
    4px 8px;

  background:
    #5c6c59;

  color:
    #ffffff;

  font-family:
    Arial,
    sans-serif;

  font-size:
    8px;

  letter-spacing:
    1px;

}


.header-main {

  min-height:
    100px;

  padding:
    15px 25px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

}


.header-main h1 {

  margin:
    0;

  color:
    #4e604c;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    30px;

  font-weight:
    normal;

  letter-spacing:
    2px;

  text-shadow:
    1px 1px 0 #ffffff;

}


.header-main p {

  margin:
    3px 0;

  color:
    #8b9089;

  font-size:
    10px;

}


.snake-decoration {

  font-size:
    38px;

  filter:
    grayscale(30%);

}


.sparkles {

  color:
    #899587;

  font-size:
    18px;

}



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

.marquee {

  height:
    21px;

  overflow:
    hidden;

  padding:
    3px 0;

  background:
    #e6e9e3;

  border-top:
    1px solid #c0c6bd;

  border-bottom:
    1px solid #b9beb7;

  color:
    #61705e;

  white-space:
    nowrap;

  font-size:
    9px;

}


.marquee span {

  display:
    inline-block;

  padding-left:
    100%;

  animation:
    marquee 18s linear infinite;

}


@keyframes marquee {

  0% {

    transform:
      translateX(0);

  }

  100% {

    transform:
      translateX(-100%);

  }

}



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

.main-nav {

  display:
    flex;

  flex-wrap:
    wrap;

  background:
    linear-gradient(
      #ffffff,
      #d9dcd8
    );

  border-bottom:
    1px solid #999f98;

}


.main-nav a {

  min-width:
    80px;

  padding:
    6px 12px;

  border-right:
    1px solid #b6bab4;

  color:
    #596557;

  font-family:
    Arial,
    sans-serif;

  font-size:
    9px;

  font-weight:
    bold;

  text-align:
    center;

  letter-spacing:
    .5px;

}


.main-nav a:hover {

  background:
    #eef1ec;

  color:
    #354531;

  text-decoration:
    none;

}



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

.layout {

  padding:
    12px;

  display:
    grid;

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

  gap:
    10px;

  align-items:
    start;

}



/* ==========================================
   Y2K BOX
========================================== */

.y2k-box {

  margin-bottom:
    10px;

  background:
    #ffffff;

  border:
    1px solid #aeb4ac;

  box-shadow:
    1px 1px 0 #d3d5d0;

}


.box-title {

  min-height:
    23px;

  padding:
    5px 7px;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  background:
    linear-gradient(
      #ffffff,
      #e0e2de
    );

  border-bottom:
    1px solid #b7bcb5;

  color:
    #566352;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    8px;

  font-weight:
    bold;

  letter-spacing:
    1px;

  text-transform:
    uppercase;

}


.y2k-box > p,
.y2k-box > ul {

  margin-left:
    10px;

  margin-right:
    10px;

}


.y2k-box > p {

  font-size:
    10px;

}



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

.profile-box {

  padding-bottom:
    10px;

  text-align:
    center;

}


.profile-pic {

  width:
    105px;

  height:
    105px;

  margin:
    12px auto 7px;

  padding:
    4px;

  background:
    #ffffff;

  border:
    2px solid #aeb5aa;

  border-radius:
    50%;

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

  overflow:
    hidden;

}


.profile-pic img {

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  border-radius:
    50%;

}


.profile-box h2 {

  margin:
    2px 0;

  color:
    #50614e;

  font-family:
    Georgia,
    serif;

  font-size:
    20px;

  font-weight:
    normal;

}


.username {

  color:
    #9a9d98;

  font-size:
    9px;

}


.online {

  display:
    inline-block;

  margin:
    6px 0;

  padding:
    2px 7px;

  background:
    #e8eee6;

  border:
    1px solid #b8c4b4;

  color:
    #62725e;

  font-size:
    8px;

  font-weight:
    bold;

}


.tiny {

  color:
    #929691;

  font-size:
    9px;

  line-height:
    1.45;

}


.center {

  text-align:
    center;

}


.mini-stats {

  margin:
    8px;

  padding:
    5px;

  background:
    #f3f4f1;

  border:
    1px dotted #c1c6bf;

  color:
    #727b70;

  font-size:
    8px;

  line-height:
    1.8;

}



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

.sidebar-links {

  display:
    flex;

  flex-direction:
    column;

}


.sidebar-links a {

  padding:
    5px 8px;

  border-bottom:
    1px dotted #c9cec7;

  font-size:
    9px;

}


.sidebar-links a:last-child {

  border-bottom:
    none;

}


.sidebar-links a:hover {

  padding-left:
    12px;

  background:
    #edf1eb;

  text-decoration:
    none;

}



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

.currently {

  padding:
    2px 9px 8px;

}


.currently p {

  margin:
    7px 0;

  font-size:
    9px;

}


.currently b {

  color:
    #62705f;

  font-size:
    8px;

}



/* ==========================================
   FAVORITES
========================================== */

.favorites {

  margin:
    0;

  padding:
    8px 20px 10px;

  list-style:
    none;

}


.favorites li {

  padding:
    3px 0;

  color:
    #657061;

  border-bottom:
    1px dotted #d0d4ce;

  font-size:
    9px;

}



/* ==========================================
   Y2K BADGE
========================================== */

.badge-box {

  text-align:
    center;

}


.y2k-badge {

  width:
    105px;

  height:
    42px;

  margin:
    12px auto;

  padding:
    4px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  background:
    linear-gradient(
      135deg,
      #f8faf7,
      #d5ddd1
    );

  border:
    2px outset #b7beb3;

  color:
    #53634f;

  font-family:
    Arial,
    sans-serif;

  font-size:
    8px;

  font-weight:
    bold;

  letter-spacing:
    1px;

}


.y2k-badge strong {

  font-size:
    12px;

}



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

.welcome {

  padding:
    10px;

}


.welcome-banner {

  padding:
    12px;

  margin-bottom:
    10px;

  background:
    linear-gradient(
      135deg,
      #eef1ec,
      #dce2d9
    );

  border:
    1px solid #aab4a5;

  text-align:
    center;

}


.welcome-banner span {

  display:
    block;

  color:
    #52634e;

  font-family:
    Georgia,
    serif;

  font-size:
    20px;

  font-weight:
    bold;

}


.welcome-banner small {

  color:
    #7f877d;

  font-size:
    9px;

}


.welcome p {

  margin:
    8px 4px;

  font-size:
    10px;

}


.notice {

  margin-top:
    12px;

  padding:
    6px;

  background:
    #f0f3ed;

  border:
    1px dashed #9fac98;

  color:
    #5e6e5a;

  text-align:
    center;

  font-size:
    8px;

  font-weight:
    bold;

  letter-spacing:
    1px;

}



/* ==========================================
   QUOTE WINDOW
========================================== */

.quote-window {

  margin-bottom:
    10px;

  border:
    1px solid #8e968d;

  box-shadow:
    1px 1px 0 #c7cac5;

}


.window-title {

  padding:
    5px 7px;

  display:
    flex;

  justify-content:
    space-between;

  background:
    linear-gradient(
      #6e7b6b,
      #526250
    );

  color:
    #ffffff;

  font-family:
    Arial,
    sans-serif;

  font-size:
    8px;

  font-weight:
    bold;

}


.quote-content {

  padding:
    14px;

  background:
    #f8f9f6;

  text-align:
    center;

}


.quote-big {

  color:
    #a3ada0;

  font-family:
    Georgia,
    serif;

  font-size:
    25px;

}


.quote-content p {

  margin:
    5px 0 8px;

  color:
    #596257;

  font-family:
    Georgia,
    serif;

  font-size:
    13px;

  font-style:
    italic;

  line-height:
    1.6;

}


.quote-content small {

  color:
    #999;

  font-size:
    8px;

}



/* ==========================================
   DIVIDER
========================================== */

.divider {

  margin:
    12px 0;

  color:
    #a1aa9d;

  text-align:
    center;

  font-size:
    8px;

}



/* ==========================================
   UPDATES
========================================== */

.update {

  display:
    grid;

  grid-template-columns:
    60px
    1fr;

  gap:
    7px;

  margin:
    0 9px;

  padding:
    7px 0;

  border-bottom:
    1px dotted #c8cdc6;

}


.update:last-child {

  border-bottom:
    none;

}


.update span {

  color:
    #788474;

  font-size:
    8px;

  font-weight:
    bold;

}


.update p {

  margin:
    0;

  font-size:
    9px;

}



/* ==========================================
   CHARACTER
========================================== */

.character-content {

  padding:
    10px;

  display:
    grid;

  grid-template-columns:
    125px
    1fr;

  gap:
    12px;

  align-items:
    center;

}


.character-content img {

  width:
    125px;

  height:
    145px;

  display:
    block;

  object-fit:
    cover;

  border:
    1px solid #afb5ae;

}


.character-content h2 {

  margin:
    0;

  color:
    #566451;

  font-family:
    Georgia,
    serif;

  font-size:
    17px;

  font-weight:
    normal;

}


.rating {

  color:
    #768570;

  font-size:
    11px;

}


.character-content p {

  font-size:
    9px;

}



/* ==========================================
   DIARY
========================================== */

.diary {

  padding-bottom:
    8px;

}


.search-area {

  margin:
    8px;

  padding:
    5px;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  background:
    #ecefea;

  border:
    1px solid #bfc5bd;

}


.search-area span {

  color:
    #687365;

  font-size:
    8px;

  font-weight:
    bold;

}


.search-area input {

  min-width:
    0;

  width:
    100%;

  height:
    22px;

  padding:
    3px 6px;

  background:
    #ffffff;

  border:
    1px inset #b8bdb7;

  outline:
    none;

  color:
    #555c55;

  font-family:
    Arial,
    sans-serif;

  font-size:
    9px;

}


.search-area input:focus {

  border-color:
    #879580;

}


.search-area input::placeholder {

  color:
    #aaa;

}



/* ==========================================
   SCROLLING DIARY
========================================== */

.diary-scroll {

  height:
    330px;

  margin:
    0 8px;

  padding:
    0 7px 0 3px;

  overflow-y:
    auto;

  overflow-x:
    hidden;

}


.blog-post {

  padding:
    10px 4px;

  border-bottom:
    1px dotted #c8cdc6;

}


.blog-post:last-child {

  border-bottom:
    none;

}


.post-date {

  color:
    #899387;

  font-size:
    8px;

  font-weight:
    bold;

}


.blog-post h3 {

  margin:
    2px 0;

  color:
    #596657;

  font-family:
    Arial,
    sans-serif;

  font-size:
    10px;

}


.blog-post p {

  margin:
    3px 0;

  color:
    #626861;

  font-size:
    9px;

  line-height:
    1.6;

}



/* SCROLLBAR */

.diary-scroll::-webkit-scrollbar {

  width:
    9px;

}


.diary-scroll::-webkit-scrollbar-track {

  background:
    #e4e6e2;

  border:
    1px solid #c4c9c2;

}


.diary-scroll::-webkit-scrollbar-thumb {

  background:
    linear-gradient(
      #c7cec3,
      #9faa99
    );

  border:
    1px outset #a8b0a4;

}


.diary-scroll {

  scrollbar-width:
    thin;

  scrollbar-color:
    #aab5a4
    #e4e6e2;

}



/* ==========================================
   GALLERY
========================================== */

.photo-grid {

  padding:
    9px;

  display:
    grid;

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

  gap:
    6px;

}


.photo {

  height:
    105px;

  padding:
    3px;

  background:
    #e8e9e5;

  border:
    1px outset #b8bdb6;

  overflow:
    hidden;

}


.photo img {

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  transition:
    transform .2s ease;

}


.photo:hover img {

  transform:
    scale(1.08);

}



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

.music {

  text-align:
    center;

  overflow:
    hidden;

}


.cd-player {

  position:
    relative;

  width:
    165px;

  height:
    165px;

  margin:
    14px auto;

  cursor:
    pointer;

}


.cd-cover {

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    165px;

  height:
    165px;

  object-fit:
    cover;

  background:
    #ffffff;

  border:
    3px solid #bfc5bd;

  box-shadow:
    2px 2px 0 #d8dad6;

  z-index:
    2;

}


.cd-disc {

  position:
    absolute;

  top:
    0;

  left:
    90px;

  width:
    165px;

  height:
    165px;

  object-fit:
    contain;

  z-index:
    1;

  animation:
    spin 4s linear infinite;

  animation-play-state:
    paused;

}


.cd-player.playing .cd-disc {

  animation-play-state:
    running;

}


@keyframes spin {

  from {

    transform:
      rotate(0deg);

  }

  to {

    transform:
      rotate(360deg);

  }

}


.music-display {

  margin:
    6px 8px;

  padding:
    5px;

  background:
    #eef1ec;

  border:
    1px inset #c2c8bf;

  color:
    #63705f;

  font-size:
    8px;

  line-height:
    1.7;

}



/* ==========================================
   TOP 8
========================================== */

.top-eight {

  margin:
    0;

  padding:
    8px 25px 10px;

}


.top-eight li {

  padding:
    3px 0;

  color:
    #667263;

  border-bottom:
    1px dotted #d0d4ce;

  font-size:
    9px;

}


.top-eight li::marker {

  color:
    #839080;

}



/* ==========================================
   STATUS
========================================== */

.status-section {

  padding-bottom:
    7px;

}


.status-line {

  display:
    flex;

  justify-content:
    space-between;

  margin:
    5px 9px;

  padding-bottom:
    4px;

  border-bottom:
    1px dotted #d0d4ce;

  font-size:
    9px;

}


.status-line span {

  color:
    #999;

}


.status-line b {

  color:
    #63715e;

}



/* ==========================================
   MINI QUOTE
========================================== */

.mini-quote {

  text-align:
    center;

}


.mini-quote p {

  margin:
    10px 0 3px;

  color:
    #687366;

  font-family:
    Georgia,
    serif;

  font-size:
    19px;

  font-style:
    italic;

}


.mini-quote small {

  color:
    #999;

  font-size:
    8px;

}



/* ==========================================
   GUESTBOOK
========================================== */

.guestbook {

  padding-bottom:
    8px;

}


.guestbook-heading {

  margin:
    7px;

  padding:
    5px;

  background:
    #eef1ec;

  border:
    1px dashed #aeb8aa;

  color:
    #64715f;

  text-align:
    center;

  font-size:
    8px;

  font-weight:
    bold;

}


.guestbook iframe {

  display:
    block;

  width:
    100%;

  border:
    none;

  background:
    #ffffff;

}



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

.cool-links {

  display:
    flex;

  flex-direction:
    column;

}


.cool-links a {

  padding:
    5px 8px;

  border-bottom:
    1px dotted #cbd0c9;

  font-size:
    9px;

}


.cool-links a:last-child {

  border-bottom:
    none;

}


.cool-links a:hover {

  background:
    #edf0eb;

  text-decoration:
    none;

}



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

.site-info {

  text-align:
    center;

}


.site-info p {

  margin:
    5px;

  color:
    #929691;

  font-size:
    8px;

}


.browser-badge {

  margin:
    8px auto;

  padding:
    5px;

  width:
    105px;

  background:
    #e4e7e1;

  border:
    2px outset #b9beb6;

  color:
    #667261;

  font-size:
    7px;

  font-weight:
    bold;

  line-height:
    1.2;

}



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

footer {

  padding:
    15px;

  background:
    linear-gradient(
      #e8eae6,
      #f9f9f6
    );

  border-top:
    1px solid #9da39b;

  text-align:
    center;

  color:
    #8b908b;

  font-size:
    8px;

}


.footer-decoration {

  color:
    #778573;

  font-size:
    10px;

}


footer p {

  margin:
    4px;

}



/* ==========================================
   TABLET
========================================== */

@media (max-width: 900px) {

  .wrapper {

    width:
      96%;

  }


  .layout {

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

  }


  .right-column {

    grid-column:
      1 / -1;

    display:
      grid;

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

    gap:
      10px;

  }


  .right-column .y2k-box {

    margin-bottom:
      0;

  }

}



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

@media (max-width: 650px) {

  body {

    font-size:
      10px;

  }


  .wrapper {

    width:
      calc(100% - 10px);

    max-width:
      none;

    margin:
      5px auto;

  }


  .header-main {

    min-height:
      80px;

    padding:
      12px;

  }


  .header-main h1 {

    font-size:
      22px;

  }


  .header-main p {

    font-size:
      8px;

  }


  .snake-decoration {

    font-size:
      27px;

  }


  .sparkles {

    font-size:
      12px;

  }


  .main-nav {

    justify-content:
      center;

  }


  .main-nav a {

    min-width:
      auto;

    flex:
      1 1 auto;

    padding:
      6px 5px;

    font-size:
      8px;

  }


  .layout {

    display:
      block;

    padding:
      7px;

  }


  .left-column,
  .center-column,
  .right-column {

    width:
      100%;

  }


  .right-column {

    display:
      block;

  }


  .right-column .y2k-box {

    margin-bottom:
      10px;

  }


  .character-content {

    grid-template-columns:
      100px
      1fr;

  }


  .character-content img {

    width:
      100px;

    height:
      125px;

  }


  .photo-grid {

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

  }


  .photo {

    height:
      115px;

  }


  .diary-scroll {

    height:
      300px;

  }


  .quote-content p {

    font-size:
      12px;

  }


  .browser-bar {

    font-size:
      8px;

  }

}

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

.music-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 7px 8px 2px;
}

.music-controls button {
  width: 25px;
  height: 22px;
  padding: 0;
  border: 1px solid #aeb8aa;
  background: linear-gradient(#ffffff, #e8ece5);
  color: #5f6d5c;
  font-family: Arial, sans-serif;
  font-size: 8px;
  line-height: 20px;
  cursor: pointer;
  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #d0d5cd;
}

.music-controls button:hover {
  background: #dfe6dc;
}

.music-controls button:active {
  box-shadow: inset -1px -1px #ffffff, inset 1px 1px #c5ccc1;
}

#progressBar {
  flex: 1;
  min-width: 0;
  height: 5px;
  accent-color: #9ca995;
  cursor: pointer;
}

.music-time {
  display: flex;
  justify-content: space-between;
  margin: 2px 8px 0;
  color: #999;
  font-family: Arial, sans-serif;
  font-size: 7px;
  letter-spacing: .5px;
}

/* ==========================================
   TOP 8 HOVER IMAGES
========================================== */

.top-eight .hover-character {
  position: relative;
  cursor: help;
}

.top-eight .hover-character img {
  position: absolute;
  left: 105%;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  height: 200px;
  object-fit: cover;
  padding: 3px;
  background: #fff;
  border: 1px solid #aeb8aa;
  box-shadow: 2px 2px 0 #d4d8d1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 999;
}

.top-eight .hover-character:hover img {
  opacity: 1;
  visibility: visible;
}


/* ==========================================
   MINIBLOG IMAGES
========================================== */

.blog-image {
  display: block;
  width: 150px;
  height: 120px;
  margin: 8px 0 4px;
  padding: 3px;
  background: #ffffff;
  border: 1px solid #aeb8aa;
  box-shadow: 2px 2px 0 #d4d8d1;
  object-fit: cover;
}