:root {
  color-scheme: dark;

  --black: #080304;
  --black-soft: #140709;

  --crimson: #dc143c;
  --deep-crimson: #83001f;
  --dark-crimson: #4e0013;
  --wine: #30000d;

  --pink: #ff7896;
  --cream: #e5c7b8;

  --border: #8f1230;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 100%;
  min-height: 100%;
}

html {
  background: #060203;
}

body {
  overflow-x: auto;

  background:
    repeating-linear-gradient(
      45deg,
      #070203 0,
      #070203 9px,
      #0e0306 9px,
      #0e0306 18px
    );

  color: #d8b9ad;

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

  font-size: 13px;

  cursor: crosshair;
}

a {
  color: #ff5679;
}

a:visited {
  color: #ad5268;
}

a:hover {
  color: white;

  background: #b0002d;
}

button,
input,
textarea {
  font-family:
    Verdana,
    Arial,
    sans-serif;
}


/* noise */

.page-noise {
  position: fixed;
  inset: 0;

  z-index: 1000;

  pointer-events: none;

  opacity: 0.06;

  background:
    repeating-radial-gradient(
      circle,
      white 0 1px,
      transparent 1px 5px
    );
}


/* page shell */

.site-shell {
  width: min(1050px, calc(100% - 10px));

  margin: 8px auto;

  border:
    4px ridge #9a1834;

  background: #100406;
}

.top-warning {
  height: 28px;

  border-bottom:
    3px ridge #8b0c29;

  background:
    #5d0017;

  color: #ffd7df;

  font-family:
    "Courier New",
    monospace;

  font-weight: bold;
  font-size: 12px;
}


/* side rails */

.left-rail,
.right-rail {
  width: 150px;

  vertical-align: top;

  padding: 7px;

  background:
    #190609;
}

.left-rail {
  border-right:
    2px solid #5c0d20;
}

.right-rail {
  border-left:
    2px solid #5c0d20;
}


.rail-box {
  margin-bottom: 10px;

  padding: 8px;

  border:
    2px outset #751128;

  background:
    #20070c;

  color: #cba8a2;

  font-size: 11px;
}

.rail-box b {
  display: block;

  margin-bottom: 7px;

  color: #ff496c;
}

.rail-box a {
  display: block;

  margin:
    4px
    0;
}

.rail-box ul {
  margin:
    6px
    0;

  padding-left: 17px;
}

.center {
  text-align: center;
}


/* visitor counter */

.visitor-box {
  text-align: center;
}

#visitor-counter {
  margin:
    8px
    0;

  padding: 4px;

  border:
    2px inset #5d0a1f;

  background: black;

  color: #ff234f;

  font-family:
    "Courier New",
    monospace;

  font-size: 17px;
  letter-spacing: 2px;
}


/* main */

.main-column {
  min-width: 550px;

  vertical-align: top;

  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(130,0,28,0.18),
      transparent 30%
    ),
    #100406;
}


/* masthead */

.masthead {
  position: relative;

  min-height: 430px;

  overflow: hidden;

  padding:
    40px
    20px
    25px;

  border-bottom:
    5px double #7d1129;

  text-align: center;

  background:
    linear-gradient(
      to bottom,
      #30000d,
      #0f0305
    );
}


.sigil-strip {
  color: #7e1530;

  font-size: 19px;

  letter-spacing: 13px;
}

.masthead h1 {
  margin:
    20px
    0
    7px;

  color: #d10b36;

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

  font-size:
    clamp(
      60px,
      10vw,
      112px
    );

  font-weight: normal;
  line-height: 0.75;

  letter-spacing: -6px;

  text-shadow:
    2px 2px 0 #39000d,
    4px 4px 0 #100000,
    0 0 14px #a7002c;
}


.subtitle {
  color: #cf7b8c;

  font-family:
    "Courier New",
    monospace;

  font-size: 15px;

  letter-spacing: 5px;
}


.tiny-note {
  color: #6f434a;

  font-size: 9px;
}


/* seals */

.seal {
  display: flex;
  align-items: center;
  justify-content: center;

  border:
    4px double #d20b38;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      #650018,
      #1b0007
    );

  color: #e82850;

  font-family:
    Georgia,
    serif;

  box-shadow:
    0 0 12px
    rgba(220, 20, 60, 0.42);
}


.big-seal {
  width: 84px;
  height: 84px;

  margin:
    23px
    auto;

  font-size: 47px;

  animation:
    seal-pulse
    2.7s ease-in-out infinite;
}

.tiny-seal {
  width: 58px;
  height: 58px;

  margin:
    3px
    auto
    8px;

  font-size: 30px;
}

@keyframes seal-pulse {
  50% {
    box-shadow:
      0 0 26px
      rgba(255, 28, 76, 0.8);

    transform:
      scale(1.04);
  }
}


/* ridiculous warning */

.announcement {
  margin: 14px;

  padding: 11px;

  border:
    4px dashed #c10c34;

  background: #270009;

  color: #d7b3aa;

  text-align: center;

  animation:
    warning-border
    0.8s steps(2, end)
    infinite;
}

.announcement span {
  color: #ff3d64;

  font-weight: bold;
}

@keyframes warning-border {
  50% {
    border-color:
      #560015;
  }
}


/* content */

.content-block,
.test-block,
.ritual-machine,
.guestbook,
.petition {
  margin:
    14px;

  padding:
    14px;

  border:
    2px solid #651126;

  background:
    #160609;
}

.content-block h2,
.test-block h2,
.ritual-machine h2,
.guestbook h2 {
  margin:
    -14px
    -14px
    16px;

  padding:
    7px;

  border-bottom:
    2px solid #73132b;

  background:
    #490013;

  color: #e06a81;

  font-family:
    "Courier New",
    monospace;

  font-size: 16px;

  text-align: center;
}


.dropcap p:first-child::first-letter {
  float: left;

  margin:
    3px
    7px
    0
    0;

  color: #d11a42;

  font-family:
    Georgia,
    serif;

  font-size: 55px;
  line-height: 0.75;
}


/* doctrine */

.doctrine-table {
  width: 100%;

  margin-top: 20px;

  border-collapse: collapse;

  font-family:
    "Courier New",
    monospace;
}

.doctrine-table th,
.doctrine-table td {
  border:
    1px solid #5f1023;

  padding: 7px;
}

.doctrine-table th {
  background: #34000e;

  color: #e95473;
}


/* prophecy */

.prophecy {
  margin:
    22px
    0;

  padding:
    11px
    0;

  border-top:
    1px solid #760e27;

  border-bottom:
    1px solid #760e27;

  background:
    #3a000e;

  color: #ff6685;

  font-family:
    Georgia,
    serif;

  font-size: 18px;
}


/* image relics */

.relic-grid {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 12px;
}

.relic-grid figure {
  margin: 0;

  padding: 7px;

  border:
    2px outset #601227;

  background:
    #090304;

  transform:
    rotate(-0.4deg);
}

.relic-grid figure:nth-child(even) {
  transform:
    rotate(0.6deg);
}

.wide-relic {
  grid-column:
    1 / 3;
}

.image-frame {
  min-height: 210px;

  overflow: hidden;

  border:
    6px ridge #4f1722;

  background:
    repeating-linear-gradient(
      45deg,
      #220009,
      #220009 10px,
      #37000e 10px,
      #37000e 20px
    );
}

.wide-relic .image-frame {
  min-height: 300px;
}

.image-frame img {
  width: 100%;
  height: 100%;

  min-height: inherit;

  display: block;

  object-fit: cover;

  filter:
    saturate(1.1)
    contrast(1.08)
    brightness(0.85);
}

figcaption {
  padding:
    8px
    2px
    2px;

  color: #b98d91;

  font-family:
    "Courier New",
    monospace;

  font-size: 10px;
}


/* color test */

.test-block {
  text-align: center;
}

.color-test {
  display: flex;

  justify-content: center;

  gap: 6px;

  margin:
    22px
    0;
}

.swatch {
  width: 80px;
  height: 80px;

  border:
    5px outset #5f2732;

  cursor: pointer;
}

.swatch-one {
  background: #ff2400;
}

.swatch-two {
  background: #dc143c;
}

.swatch-three {
  background: #800020;
}

.swatch-four {
  background: #ff6347;
}

#swatch-answer {
  min-height: 25px;

  color: #ff597a;

  font-family:
    "Courier New",
    monospace;

  font-weight: bold;
}


/* testimonies */

blockquote {
  margin:
    18px
    10px;

  padding:
    10px
    14px;

  border-left:
    5px solid #6c0c23;

  background:
    #0d0305;

  color: #c69c99;

  font-family:
    Georgia,
    serif;

  font-size: 15px;
}

blockquote cite {
  display: block;

  margin-top: 8px;

  color: #814b55;

  font-size: 11px;
}


/* old links */

.old-links {
  padding-left: 23px;
}

.old-links li {
  margin:
    8px
    0;

  list-style:
    square;
}


/* calibrator */

.ritual-machine {
  text-align: center;
}

.machine {
  max-width: 380px;

  margin: auto;

  padding: 15px;

  border:
    4px inset #551127;

  background:
    #070203;
}

.calibrator-color {
  height: 110px;

  margin-bottom: 15px;

  border:
    4px ridge #75203a;

  background:
    #b11236;

  box-shadow:
    inset 0 0 30px
    rgba(0,0,0,0.6);
}

.machine label {
  display: block;

  margin-bottom: 7px;

  color: #9a6970;

  font-family:
    "Courier New",
    monospace;

  font-size: 11px;
}

.machine input {
  width: 90%;
}

#calibrator-reading {
  color: #e53e61;

  font-family:
    "Courier New",
    monospace;

  font-weight: bold;
}


/* guestbook */

.guestbook form {
  border:
    2px inset #5f1326;

  padding: 10px;

  background: #0b0304;
}

.guestbook label {
  display: block;

  margin-bottom: 11px;

  color: #a46570;

  font-size: 10px;
}

.guestbook input,
.guestbook textarea {
  width: 100%;

  margin-top: 4px;

  border:
    2px inset #591326;

  padding: 6px;

  background: #170609;
  color: #d6b8b5;
}

.guestbook textarea {
  min-height: 80px;

  resize: vertical;
}

.guestbook button {
  border:
    3px outset #7d1730;

  padding:
    5px
    14px;

  background: #640019;
  color: white;
}

.guestbook-entries {
  margin-top: 14px;
}

.guestbook-entries > div {
  margin-bottom: 7px;

  border:
    1px solid #4e0d1c;

  padding: 7px;

  background: #0b0304;
}

.guestbook-entries b {
  color: #d63a5b;
}

.guestbook-entries span {
  float: right;

  color: #66434a;

  font-size: 9px;
}

.guestbook-entries p {
  margin:
    5px
    0
    0;
}


/* petition */

.petition {
  padding:
    40px
    20px;

  text-align: center;

  background:
    radial-gradient(
      circle,
      #34000d,
      #100305 70%
    );
}

.petition-seal {
  width: 110px;
  height: 110px;

  margin:
    0
    auto
    25px;

  font-size: 65px;

  animation:
    crooked-spin
    15s linear infinite;
}

.petition h2 {
  color: #d33c5d;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      26px,
      5vw,
      45px
    );
}

.petition p {
  max-width: 580px;

  margin:
    20px
    auto;

  color: #b98c8b;
}

.petition-button {
  border:
    5px outset #9b1738;

  padding:
    13px
    17px;

  background:
    #75001e;

  color: #ffe5e9;

  font-weight: bold;

  animation:
    button-glow
    1.7s ease-in-out infinite;
}

@keyframes button-glow {
  50% {
    box-shadow:
      0 0 20px
      #ad1137;
  }
}


/* right rail weirdness */

.green-light {
  color: #58c36d;
}

.rotating-cross {
  display: block;

  color: #bd173b;

  font-size: 45px;

  animation:
    crooked-spin
    6s linear infinite;
}

@keyframes crooked-spin {
  to {
    transform:
      rotate(360deg);
  }
}


/* flame */

.css-flame {
  position: relative;

  width: 35px;
  height: 55px;

  margin:
    8px
    auto
    12px;

  background:
    #9c0026;

  border-radius:
    80% 20% 60% 40%;

  transform:
    rotate(45deg);

  animation:
    flame
    0.7s ease-in-out infinite alternate;
}

.css-flame span {
  position: absolute;

  width: 17px;
  height: 29px;

  left: 8px;
  top: 18px;

  border-radius:
    80% 20% 60% 40%;

  background:
    #ff315a;
}

@keyframes flame {
  to {
    transform:
      rotate(39deg)
      scaleY(1.12);
  }
}


/* blink because 2004 */

.blink-text {
  color: #ff476a;

  font-weight: bold;

  animation:
    blink
    0.75s steps(1)
    infinite;
}

@keyframes blink {
  50% {
    opacity: 0.25;
  }
}


/* footer garbage */

.footer-junk {
  padding:
    28px
    15px;

  border-top:
    4px double #6f0e26;

  text-align: center;

  color: #70474c;

  font-family:
    "Courier New",
    monospace;
}

.badge-row {
  display: flex;

  flex-wrap: wrap;
  justify-content: center;

  gap: 7px;

  margin:
    15px
    0;
}

.web-badge {
  width: 88px;
  height: 31px;

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

  border:
    2px outset #78152d;

  background:
    #33000d;

  color: #d04764;

  font-family:
    Arial,
    sans-serif;

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

  line-height: 1;
}

.spinning-badge {
  font-size: 19px;

  animation:
    crooked-spin
    4s linear infinite;
}

.copyright {
  font-size: 9px;
}


/* floating C */

.floating-eye {
  position: fixed;

  z-index: 50;

  left: 30px;
  top: 65%;

  width: 35px;
  height: 35px;

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

  border:
    2px solid #7f1130;

  border-radius: 50%;

  background:
    rgba(24,0,6,0.9);

  color: #c92248;

  font-family:
    Georgia,
    serif;

  animation:
    float-around
    12s ease-in-out infinite alternate;

  pointer-events: none;
}

@keyframes float-around {
  0% {
    transform:
      translate(0,0)
      rotate(-8deg);
  }

  35% {
    transform:
      translate(36px,-70px)
      rotate(10deg);
  }

  70% {
    transform:
      translate(-12px,-140px)
      rotate(-14deg);
  }

  100% {
    transform:
      translate(48px,-210px)
      rotate(18deg);
  }
}


/* mobile: not too competent */

@media (max-width: 760px) {

  .site-shell {
    width:
      calc(100% - 4px);

    margin: 2px;
  }

  .left-rail,
  .right-rail {
    display: none;
  }

  .main-column {
    min-width: 0;
  }

  .masthead {
    min-height: 380px;
  }

  .masthead h1 {
    font-size: 72px;
  }

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

  .wide-relic {
    grid-column: auto;
  }

  .color-test {
    flex-wrap: wrap;
  }

  .floating-eye {
    display: none;
  }

}