html {
  scroll-behavior: smooth;
}

body {
  background: #fffcfe;
}

body::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 32px;

  background-image: url("/img/hearttrim.png");
  background-repeat: repeat-x;
  background-position: top left;
  background-size: auto 32px;

  pointer-events: none;

  z-index: 20;
}

/* selection */

::selection {
  color: #ffc4d4;
}

/* media page */

.media-page {
  width: 1100px;
  margin: 95px auto 40px;

  color: #8a7070;

  font-family: Verdana, sans-serif;
  font-size: 10px;
  line-height: 1.6;
}

.media-page *,
.media-page button {
  font-family: Verdana, sans-serif;
}

/* two separate boxes */

.media-layout {
  position: relative;

  display: grid;
  grid-template-columns: 185px 1fr;
  gap: 18px;

  align-items: start;

  padding-top: 20px;
}

/* navigation box */

.media-nav-box {
  height: 650px;

  box-sizing: border-box;

  border: 8px solid transparent;
  border-image:
    url("/img/laceborder.png")
    8 fill round;
}

.media-nav {
  height: 634px;

  box-sizing: border-box;

  padding: 50px 20px;

  display: flex;
  flex-direction: column;
  gap: 12px;

  background: #ffffff;
}

/* navigation buttons */

.media-tab {
  width: 100%;

  padding: 7px 10px;

  color: #a48787;
  background: transparent;

  border: 0;

  font-size: 10px;
  text-align: left;

  cursor: url("/img/key2.png"), pointer;
  position: relative;
}

.media-tab::before {
  content: "";

  position: absolute;

  left: -14px;
  top: 50%;

  width: 12px;
  height: 12px;

  background-image: url("/img/paw2.gif");
  background-repeat: no-repeat;
  background-size: contain;

  transform: translateY(-50%);

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.2s ease;
}

.media-tab:hover::before {
  opacity: 1;
}

.media-tab:hover {
  color: #d88faa;
}

.media-tab.active {
  color: #d88faa;

  text-decoration: underline dotted;
  text-underline-offset: 4px;
}

/* main media box */

.media-main-box {
  height: 650px;

  box-sizing: border-box;

  background: #fffafd;

  border: 8px solid transparent;
  border-image:
    url("/img/laceborder.png")
    8 fill round;
}

/* patterned inside area */

.media-inner {
  position: relative;

  height: 634px;

  padding: 28px;

  overflow: hidden;

  box-sizing: border-box;
}

.media-inner::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.72),
      rgba(255, 255, 255, 0.72)
    ),
    url("/img/polkabg.gif");

  background-repeat: repeat;
  background-position: top left;

  pointer-events: none;

  z-index: 0;
}

.media-inner::after {
  content: "";

  position: absolute;
  inset: 0;

  border: 1px dashed #f0d3df;

  pointer-events: none;

  z-index: 0;
}

.media-inner > * {
  position: relative;
  z-index: 1;
}

/* panels */

.media-panel {
  display: none;
}

.media-panel.active {
  display: block;
}

/* filter toolbar */

.media-toolbar {
  height: 34px;

  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px 24px;

  margin-bottom: 18px;

  overflow: hidden;

  box-sizing: border-box;
}

.media-filter {
  position: relative;

  padding: 1px 0 10px;

  color: #c8b4ba;
  background: transparent;

  border: 0;

  font-size: 9px;
  font-weight: normal;
  line-height: 1.2;

  cursor: url("/img/key2.png"), pointer;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.media-filter:hover {
  color: #ad8995;

  transform: translateY(-1px);
}

.media-filter.active {
  color: #bd8298;

  text-decoration: none;
}

.media-filter.active::after {
  content: "\2661";

  position: absolute;

  left: 50%;
  bottom: -1px;

  color: #e4b4c5;

  font-size: 8px;
  line-height: 1;

  transform: translateX(-50%);
}

/* media grid */

.media-grid {
  height: 526px;

  padding: 2px 8px 10px 2px;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: max-content;
  gap: 16px 14px;

  align-content: start;
  align-items: start;

  overflow-x: hidden;
  overflow-y: auto;

  box-sizing: border-box;
}

/* filter transitions */

.media-grid {
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.media-grid.is-changing {
  opacity: 0;
  transform: translateY(5px);

  pointer-events: none;
}

.media-card.card-fade-in {
  animation:
    mediaCardFadeIn
    0.45s ease both;
}

@keyframes mediaCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-grid,
  .media-card.card-fade-in {
    animation: none;
    transition: none;
  }
}

/* media cards */

.media-card {
  position: relative;
  top: 0;

  width: 100%;
  height: auto;
  min-width: 0;

  display: block;

  padding: 6px;

  overflow: visible;

  color: #8a7070;
  background: #fffafd;

  border: 9px solid transparent;
  border-image:
    url("/img/laceborder.png")
    8 fill round;

  box-sizing: border-box;

  appearance: none;
  -webkit-appearance: none;

  text-align: left;

  cursor: url("/img/key2.png"), pointer;

  transition:
    top 0.28s ease;
}

.media-card:hover,
.media-card:focus-visible {
  top: -3px;
}

/* card cover */

.media-card-cover-frame {
  position: relative;

  width: 100%;
  height: 220px;
  min-height: 220px;

  display: block;

  overflow: hidden;

  background: #fff7fa;

  border: 1px solid #f0d3df;

  box-sizing: border-box;
}

.media-card-cover-frame::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 2;

  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 252, 254, 0.18) 48%,
      rgba(255, 250, 253, 0.82) 76%,
      rgba(255, 250, 253, 0.97) 100%
    );

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 0.35s ease;
}

.media-card:hover
.media-card-cover-frame::after,
.media-card:focus-visible
.media-card-cover-frame::after {
  opacity: 1;
}

.media-card-cover {
  width: 100%;
  height: 100%;
  min-height: 220px;

  display: block;

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

  filter: saturate(0.58);

  transition:
    filter 0.4s ease;
}

.media-card:hover .media-card-cover,
.media-card:focus-visible
.media-card-cover {
  filter: saturate(1);
}

.media-card-cover-placeholder {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  background: #fff7fa;

  box-sizing: border-box;
}

/* hover information */

.media-card-information {
  position: absolute;

  z-index: 4;

  left: 20px;
  right: 20px;
  bottom: 20px;

  min-width: 0;

  padding: 0;

  color: #8a7070;
  background: transparent;

  border: 0;

  box-sizing: border-box;

  text-align: center;

  opacity: 0;
  transform: translateY(7px);

  pointer-events: none;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.media-card:hover
.media-card-information,
.media-card:focus-visible
.media-card-information {
  opacity: 1;

  transform: translateY(0);
}

/* hover title */

.media-card-title {
  min-height: 0;

  margin: 0 0 5px;

  overflow-wrap: anywhere;

  color: #9f7f87;

  font-family: Verdana, sans-serif;
  font-size: 10px;
  font-weight: normal;
  line-height: 1.4;

  text-align: center;
}

/* hover status */

.media-card-status {
  margin: 0 0 4px;

  color: #bd929f;

  font-family: Verdana, sans-serif;
  font-size: 8px;
  line-height: 1.4;

  text-align: center;
  text-transform: lowercase;
}

/* hover progress and rating */

.media-card-details {
  margin: 0;

  color: #b99da6;

  font-family: Verdana, sans-serif;
  font-size: 8px;
  line-height: 1.45;

  text-align: center;
}

/* loading and empty messages */

.media-loading,
.media-error,
.media-empty {
  grid-column: 1 / -1;

  min-height: 170px;

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

  padding: 30px;

  color: #b79aa3;

  font-size: 9px;
  line-height: 1.6;
  text-align: center;

  box-sizing: border-box;
}

.media-error {
  color: #c990a3;
}

/* collection and details */

.media-collection-view {
  height: 100%;
}

.media-details-view {
  height: 578px;

  padding: 0 8px 10px 0;

  overflow-x: hidden;
  overflow-y: auto;

  box-sizing: border-box;
}

.media-details-view:not([hidden]) {
  display: block;
}

/* make hidden elements actually disappear */

.media-details-view [hidden] {
  display: none !important;
}

/* back button */

.media-details-back {
  display: block;

  margin: 0 0 16px;
  padding: 0;

  color: #b98f9d;
  background: transparent;

  border: 0;

  font-size: 10px;
  line-height: 1.4;

  cursor: url("/img/key2.png"), pointer;
}

.media-details-back:hover {
  color: #dd95ae;
}

/* top details area */

.media-details-top {
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr);
  gap: 20px;

  align-items: stretch;

  margin-bottom: 18px;
}

/* cover */

.media-details-cover-frame {
  position: relative;

  width: 205px;
  height: 300px;

  padding: 6px;

  overflow: hidden;

  background: #fffafd;

  border: 9px solid transparent;
  border-image:
    url("/img/laceborder.png")
    8 fill round;

  box-sizing: border-box;
}

.media-details-cover {
  width: 100%;
  height: 100%;

  display: block;

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

  border: 1px solid #f0d3df;

  box-sizing: border-box;

  filter: saturate(0.72);
}

.media-details-cover-placeholder {
  width: 100%;
  height: 100%;

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

  padding: 15px;

  color: #c7a8b3;
  background: #fff7fa;

  border: 1px solid #f0d3df;

  font-size: 9px;
  text-align: center;

  box-sizing: border-box;
}

/* favourite heart */

.media-details-heart {
  position: absolute;

  z-index: 3;

  top: 12px;
  right: 12px;

  width: 27px;
  height: 27px;

  background-image:
    url("/img/myheart.png");

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  color: transparent;

  font-size: 0;
  line-height: 0;

  pointer-events: none;
}

/* information box */

.media-details-information {
  min-width: 0;
  height: 300px;

  padding: 23px 25px;

  overflow-x: hidden;
  overflow-y: auto;

  background: #ffffff;

  border: 9px solid transparent;
  border-image:
    url("/img/laceborder.png")
    8 fill round;

  box-sizing: border-box;
}

/* title area */

.media-details-heading {
  padding-bottom: 15px;
  margin-bottom: 16px;

  border-bottom: 1px dashed #f0d3df;
}

.media-details-title {
  margin: 0;

  overflow-wrap: anywhere;

  color: #9f7f87;

  font-family: lovely, sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.5;

  text-align: left;
}

.media-details-subtitle {
  margin: 5px 0 0;

  color: #bc98a5;

  font-family: Verdana, sans-serif;
  font-size: 8px;
  line-height: 1.5;
}

/* information rows */

.media-details-list {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 11px 24px;

  margin: 0;
}

.media-details-row {
  min-width: 0;

  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 9px;

  align-items: start;
}

.media-details-row dt {
  color: #bf95a6;

  font-size: 9px;
  font-weight: normal;
  line-height: 1.55;
}

.media-details-row dd {
  min-width: 0;

  margin: 0;

  overflow-wrap: anywhere;

  color: #8a7070;

  font-size: 9px;
  line-height: 1.55;
}

/* longer information */

#media-details-genres-row {
  grid-column: 1 / -1;

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

/* synopsis inside information box */

.media-details-inline-section {
  margin-top: 22px;
  padding-top: 17px;

  border-top: 1px dashed #f0d3df;
}

.media-details-inline-section
.media-details-section-title {
  padding: 0;
  margin: 0 0 11px;

  border-bottom: 0;
}

.media-details-inline-section
.media-details-section-text {
  line-height: 1.8;
}

/* thoughts box */

.media-details-section {
  width: 100%;

  padding: 21px 24px;

  background: #ffffff;

  border: 9px solid transparent;
  border-image:
    url("/img/laceborder.png")
    8 fill round;

  box-sizing: border-box;
}

#media-details-review-section {
  height: 270px;
  min-height: 270px;

  margin-bottom: 0;

  display: flex;
  flex-direction: column;
}

.media-details-section-title {
  flex: 0 0 auto;

  padding-bottom: 10px;
  margin: 0 0 13px;

  color: #a48787;

  border-bottom: 1px dashed #f0d3df;

  font-family: Verdana, sans-serif;
  font-size: 10px;
  font-weight: normal;
  line-height: 1.4;
}

.media-details-section-text {
  margin: 0;

  color: #8a7070;

  font-family: Verdana, sans-serif;
  font-size: 9px;
  line-height: 1.9;

  white-space: pre-wrap;
}

#media-details-review {
  flex: 1;
  min-height: 0;

  overflow-x: hidden;
  overflow-y: auto;

  padding-right: 6px;

  box-sizing: border-box;
}

.media-details-section-text p {
  margin: 0 0 11px;
}

.media-details-section-text p:last-child {
  margin-bottom: 0;
}

/* media transitions */

.media-panel.active {
  animation:
    mediaPanelFade
    0.4s ease backwards;
}

@keyframes mediaPanelFade {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.media-grid {
  opacity: 1;
  transform: translateY(0);

  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.media-grid.is-changing {
  opacity: 0;
  transform: translateY(5px);

  pointer-events: none;
}

.media-card.card-fade-in {
  animation:
    mediaCardFadeIn
    0.45s ease backwards;
}

@keyframes mediaCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-panel.active,
  .media-grid,
  .media-card.card-fade-in {
    animation: none;
    transition: none;
  }
}

/* favourite heart */

.media-card-cover-frame {
  position: relative;
}

.media-card-heart {
  position: absolute;

  z-index: 10;

  top: 8px;
  right: 8px;

  width: 24px;
  height: 24px;

  background-image: url("/img/myheart.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  color: transparent;
  font-size: 0;
  line-height: 0;

  pointer-events: none;
}

/* details page opening and closing animation */

#media-details-view.is-opening {
  animation:
    media-details-open
    420ms
    cubic-bezier(.22, 1, .36, 1)
    both;
}

#media-details-view.is-closing {
  animation:
    media-details-close
    260ms
    ease-in
    both;
}

@keyframes media-details-open {
  from {
    transform:
      translateY(18px)
      scale(.985);
  }

  to {
    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes media-details-close {
  from {
    transform:
      translateY(0)
      scale(1);
  }

  to {
    transform:
      translateY(12px)
      scale(.99);
  }
}

.sidebar-area {
  position: relative;
}

.sidebar-trim {
  position: absolute;

  top: 0px;
  left: 50%;

  transform: translateX(-50%);

  width: 185px;

  pointer-events: none;

  z-index: 20;
}

.sidebar-trim-bottom {
  position: absolute;

  bottom: 0;
  left: 50%;

  width: 185px;

  transform: translateX(-50%);

  pointer-events: none;

  z-index: 20;
}

.sidebar-profile {
  margin-top: 50px;
  margin-bottom: 30px;

  text-align: center;
  position: relative;
}

.sidebar-pfp {
  position: relative;
  top: 25px;

  width: 135px;

  display: block;

  margin: 0 auto;

  padding: 4px;

  border: 1px dashed #f0d3df;

  background: #fff;
}

.sidebar-bubble {
  position: absolute;

  top: 55px;
  right: 200px;

  width: 140px;

  padding: 8px;

  background: #fff;

  border: 1px dashed #f0d3df;

  color: #8a7070;

  font-size: 10px;
  line-height: 1.5;

  text-align: center;

  opacity: 0;

  transform: translateX(8px);

  pointer-events: none;

  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.sidebar-bubble::after {
  content: "";

  position: absolute;

  top: 50%;
  right: -8px;

  width: 10px;
  height: 10px;

  background: #fff;

  border-top: 1px dashed #f0d3df;
  border-right: 1px dashed #f0d3df;

  transform:
    translateY(-50%)
    rotate(45deg);
}

.sidebar-profile:hover .sidebar-bubble {
  opacity: 1;

  transform: translateX(0);
}

.chiisit {
  position: absolute;

  right: -75px;
  bottom: -25px;

  width: 115px;

  pointer-events: none;

  z-index: 20;

 animation:
  chiisit-tilt
  6s
  ease-in-out
  infinite;
}

@keyframes chiisit-tilt {
  0%,
  70%,
  100% {
    transform: rotate(0deg);
  }

  78% {
    transform: rotate(-2deg);
  }

  86% {
    transform: rotate(1deg);
  }

  93% {
    transform: rotate(0deg);
  }
}

/* custom right-click menu */

#context_menu {
  position: absolute;
  display: none;
  z-index: 999;
  width: 70px;
  background: #fef8fc;
  border: 1px dotted #aaaaaa;
  font-size: 8px;
  letter-spacing: 1px;
}

#context_menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#context_menu li {
  padding: 4px;
  color: #787878;
  text-align: center;
  cursor: url("/img/key.png"), progress;
}

#context_menu li:hover {
  background: #fef8fc;
  color: #848484;
}