@import url('https://scp-wiki-cn.wikidot.com/local--code/fragment:parallel/1');

@import url('https://scp-wiki-cn.wikidot.com/local--code/fragment:parallel/3');

:root {
  --event-color: 207, 185, 255;
  --skip-color: 255, 157, 149;
  --item-color: 204, 233, 255;
  --boss-color: 253, 228, 76;

  --basalt-bright-element-color: var(--event-color);
  --basalt-dark-element-color: 156, 103, 181;
  --basalt-darker-element-color: 119, 68, 141;

  --basalt-secondary-color: 32, 29, 32;
  --basalt-tertiary-color: 40, 39, 40;
  --basalt-undertone: var(--event-color);
  --basalt-sub-text-color: 162, 154, 162;

}

img::selection {
  background-color: transparent;
}

/* rate box */

div.page-rate-widget-box {
  background-color: rgb(var(--event-color));
}

.page-rate-widget-box .ratedown, .page-rate-widget-box .rateup {
  background-color: rgb(var(--rate-module-background-color));
}

div.page-rate-widget-box span.btn > a {
  border-bottom-color: rgb(var(--event-color));
}

div.page-rate-widget-box .rate-points {
  color: rgb(var(--basalt-primary-color));
}

div.page-rate-widget-box span.cancel.btn > a::before {
  background-color: rgb(var(--basalt-primary-color));
}

/* toc */

div#toc {
  max-width: var(--main-content-width);
  background-color: rgb(var(--basalt-primary-color));
  border: none;
}

div#toc-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 2rem;
  align-items: center;
  justify-content: center;
}

#toc-list div {
  display: none;
}

#toc-list div[style*="1em"] {
  --toc-color: var(--skip-color);
  border: 4px solid rgb(var(--toc-color));
  padding: 0.2em 0.5em;
  width: 70%;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  margin: auto !important;
}

#toc-list div[style*="1em"] a {
  color: rgb(var(--basalt-main-text-color));
  font-size: 1.2rem; 
}

#toc-list div[style*="1em"]::after {
  content: "";
  position: absolute;
  background-color: rgb(var(--toc-color));
  width: 1.5rem;
  height: 1.5rem;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) rotate(-20deg); 
}

#toc-list div[style*="1em"]::before {
  content: counter(toc-num1);
  z-index: 1;
  left: 0;
  top: 0; 
  width: 1.5rem;
  height: 1.5rem;
  transform: translate(-15%, -50%);
  font-size: 1rem;
  color: rgb(var(--basalt-primary-color));
}

#toc #toc-action-bar {
  display: none;
}

#toc .title {
  flex-grow: 0;
  background-color: rgb(var(--skip-color));
  color: rgb(var(--basalt-primary-color));
  width: 15%;
  text-align: center;
  margin: 2em auto;
}

@media (max-width: 48rem) {
  div#toc-list { grid-template-columns: repeat(2, 1fr); }
}

/* h1 */

#page-content {
  counter-reset: main-header;
}

#page-content h1 {
  --h1-color: var(--skip-color);
  counter-increment: main-header;
  text-align: center;
  margin-top: 2em;
  margin-bottom: 2em;
}

#page-content h1 span {
  position: relative;
  padding: 0.2rem 0.5em;
  padding-left: 1.6em;
  background-color: rgb(var(--h1-color));
  color: rgb(var(--basalt-primary-color));
}

#page-content h1 span::before {
  content: "#0" counter(main-header);
  position: absolute;
  left: 0;
  top: 50%;
  height: 1.1em;
  width: fit-content;
  padding: 0 0.5em 0.1em 0.5em;
  color: rgb(var(--basalt-main-text-color));
  background-color: rgb(var(--basalt-primary-color));
  border: 6px solid rgb(var(--h1-color));
  transform: translate(-60%, -60%) rotate(-8deg); 
}

/* dialog */

.dialog {
  align-items: start;
  display: grid;
  --dialog-color: var(--item-color);
  margin: 4rem 0;
}

.dialog.l {
  grid-template-columns: 1fr 5fr;
}

.dialog.r {
  grid-template-columns: 5fr 1fr;
}

.dialog.l .avatar, .dialog.r .diatext {
  grid-area: 1 / 1 / span 1 / span 1;
}

.dialog.l .diatext, .dialog.r .avatar {
  grid-area: 1 / 2 / span 1 / span 1;
}

.dialog .avatar {
  border: 4px solid rgb(var(--dialog-color));
  width: 60%;
  aspect-ratio: 1 / 1;
}

.dialog.l .avatar {
  transform: translate(10%, 0%) rotate(-10deg); 
}

.dialog.r .avatar {
  transform: translate(40%, 0%) rotate(-10deg); 
}

.dialog .diatext {
  border: 4px solid rgb(var(--dialog-color));
  position: relative;
  padding: 0 0.5em;
}

.dialog .diatext::before {
  content: attr(data-title);
  background-color: rgb(var(--dialog-color));
  color: rgb(var(--basalt-primary-color));
  padding: 0.2em 0.5em;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-20%, -70%) rotate(-10deg);
}

@media (max-width: 48rem) {
  .dialog.l { grid-template-columns: 1fr 2fr; }
  .dialog.r { grid-template-columns: 2fr 1fr; }
}

/* hr */

#page-content hr {
  position: relative;
  overflow: visible;
  background: linear-gradient(
    to right,
    rgba(var(--basalt-main-text-color), 0) 0%,
    rgba(var(--basalt-main-text-color), 1) 5% 35%,
    rgba(var(--basalt-main-text-color), 0) 40% 60%,
    rgba(var(--basalt-main-text-color), 1) 65% 95%,
    rgba(var(--basalt-main-text-color), 0) 100%
  );
}

#page-content hr::before {
  content:"◆　◆　◆　◆";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-text-fill-color: transparent;
  background: 
  linear-gradient(
    to right,
    rgb(var(--skip-color)) 0% 25%,
    rgb(var(--event-color)) 25% 50%,
    rgb(var(--item-color)) 50% 75%,
    rgb(var(--boss-color)) 75% 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
}

@media (max-width: 48rem) {
  #page-content hr {
    background: linear-gradient(
    to right,
    rgba(var(--basalt-main-text-color), 0) 0%,
    rgba(var(--basalt-main-text-color), 1) 5% 30%,
    rgba(var(--basalt-main-text-color), 0) 35% 65%,
    rgba(var(--basalt-main-text-color), 1) 70% 95%,
    rgba(var(--basalt-main-text-color), 0) 100%
    );
  }
}

/* cards */

.cardpack {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-content: center;
  row-gap: 2rem;
}

@media (max-width: 48rem) {
  .cardpack { grid-template-columns: repeat(3, 1fr); }
}

a.card {
  --card-color: var(--boss-color);
  display: block;
  background-color: rgb(var(--card-color));
  color: rgb(var(--basalt-primary-color));
  padding: 0.5em;
  width: 60%;
  margin: auto;
  text-align: center;
}

a.card:hover, a.card:active, a.card:focus {
  text-decoration: none;
}

a.card::after {
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: rgb(var(--basalt-primary-color));
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-top: 0.5em;
}

div.fullcard {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--event-color), 0.4);
  z-index: 9;
  --card-color: var(--boss-color);
}

div.fullcard div.cardinfo {
  position: absolute;
  top: 54%;
  left: 50%;
  height: 80%;
  width: 40%;
  transform: translate(-50%, -50%);
  background-color: rgb(var(--basalt-primary-color));
  border: rgb(var(--card-color)) 4px solid;
  padding: 1em;
}

div.fullcard div.cardinfo img {
  width: 50%;
}

div.fullcard .left-arrow {
  position: absolute;
  top: 50%;
  left: 20%;
  height: 4rem;
  width: 4rem;
  transform: translate(-50%, -50%) scaleX(-1);
}

div.fullcard .right-arrow {
  position: absolute;
  top: 50%;
  left: 80%;
  height: 4rem;
  width: 4rem;
  transform: translate(-50%, -50%);
}

div.fullcard :is(div.cardinfo, div.imageinfo) > p:first-of-type {
  display: block;
  text-align: end;
  font-weight: bold;
  font-size: 200%;
  position: absolute;
  right: 1em;
  top: 0.5em;
  margin: 0;
}

div.fullcard div.cardinfo > p:first-of-type a {
  color: rgb(var(--card-color));
}

div.fullcard div.imageinfo > p:first-of-type a {
  color: rgb(var(--basalt-main-text-color));
}

div.cardpack div.fullcard:first-of-type .left-arrow, div.cardpack div.fullcard:last-of-type .right-arrow {
  pointer-events: none;
  keyboard-events: none;
  cursor: not-allowed;
  filter: opacity(10%);
}

@media (max-width: 48rem) {
  div.fullcard div.cardinfo {
    top: 60%;
    left: 50%;
    height: 70%;
    width: 80%;
  }
  div.fullcard .left-arrow, div.fullcard .right-arrow {
    top: 13%;
  }
}

/* images */

.plain-image {
  border: 4px solid rgb(var(--basalt-main-text-color));
  width: 60%;
  aspect-ratio: 1 / 1;
  margin-inline: 20%;
}

div.fullcard div.imageinfo {
  position: absolute;
  top: 14%;
  left: 50%;
  max-height: 80%;
  width: 80%;
  transform: translate(-50%, 0);
  border-top: 6px solid rgb(var(--basalt-main-text-color));
  border-bottom: 6px solid rgb(var(--basalt-main-text-color));
  background-color: rgb(var(--basalt-primary-color));
  padding: 1em;
}

.flexy {
  display: flex;
}

.flex-image {
  flex: 2;
  align-self: center;
}

.flex-desc {
  flex: 3;
  align-self: start;
  overflow-y: scroll;
  margin-top: 2em;
}

@media (max-width: 48rem) {
  .flexy { display: block; }
  .flex-image {
    width: 50%; 
    margin: auto;
  }
}

/* footnote block */

.bibitems, .footnotes-footer {
  background-color: rgb(var(--basalt-primary-color));
}

.bibitems::before, .footnotes-footer::before {
  display: none;
}

.footnotes-footer .title {
  background-color: rgb(var(--skip-color));
  color: rgb(var(--basalt-primary-color));
  transform: translate(50%, 0) rotate(-8deg);
}

.bibitems .bibitem, .footnotes-footer .footnote-footer {
  margin-top: 0.7em;
  margin-bottom: 0.7em;
}

.footnotes-footer .footnote-footer > a:first-child {
  background-color: rgb(var(--skip-color));
  color: rgb(var(--basalt-primary-color));
}