@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&family=Quicksand:wght@600;700&display=swap");

/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

* {
  box-sizing: border-box;
}

:root {
  --ink: #0f0d14;
  --paper: #f6f3ff;
  --paper-alt: #ece7fa;
  --accent-red: #a10000;
  --accent-gold: #a1a100;
  --accent-blue: #004182;
  --accent-jade: #008141;
  --accent-purple: #631db4;
  --aradia: #a10000;
  --nepeta: #416600;
  --kanaya: #008141;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 0 12px 12px;
  background-color: var(--ink);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(161, 0, 0, 0.22) 0, rgba(161, 0, 0, 0) 34%),
    radial-gradient(circle at 78% 26%, rgba(65, 102, 0, 0.2) 0, rgba(65, 102, 0, 0) 32%),
    radial-gradient(circle at 55% 85%, rgba(0, 129, 65, 0.16) 0, rgba(0, 129, 65, 0) 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.035) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.035) 50%, rgba(255, 255, 255, 0.035) 75%, transparent 75%, transparent);
  background-size: auto, auto, auto, clamp(16px, 2vw, 24px) clamp(16px, 2vw, 24px);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  color: var(--paper);
  font-family: "Nunito", sans-serif;
  line-height: 1.5;
}

.top-banner {
  width: calc(100% + 24px);
  height: 190px;
  margin: 0 0 32px -12px;
  padding: 14px 12px 18px;
  border: 3px solid #191919;
  border-top: 0;
  box-shadow: 6px 6px 0 #111111;
  background-image: url("images/aradiamoney.png");
  background-repeat: repeat-x;
  background-position: top left;
  background-size: auto 100%;
  animation: banner-scroll 24s linear infinite;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
}

@keyframes banner-scroll {
  from {
    background-position: 1265px 0;
  }
  to {
    background-position: 0 0;
  }
}

.Intro {
  width: min(100%, 800px);
  margin: 0;
  position: relative;
  z-index: 1;
  text-align: center;
  background-color: #1d0a0a;
  color: #ffecec;
  border: 3px solid var(--aradia);
  border-radius: 0;
  padding: 20px;
  box-shadow: 8px 8px 0 var(--aradia);
}

.main-layout {
  width: min(100%, 1600px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.main-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: start;
}

.content-row {
  width: 100%;
  display: flex;
  gap: 20px;
  align-items: stretch;
}

.content-row > .links {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}

.sidebar-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.links {
  width: 100%;
  margin: 0;
  background-color: var(--paper-alt);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 0;
  padding: 16px;
  box-shadow: 6px 6px 0 #2a2a2a;
}

.update-log,
.tweet-panel {
  background: #fdb302;
  color: #1a1a1a;
  border: 3px solid #191919;
  box-shadow: 6px 6px 0 #111111;
  padding: 8px;
  font-family: "Courier New", monospace;
}

.update-toggle {
  padding: 2px 8px;
  min-width: 24px;
  border: 1px solid #1f1f1f;
  background: #f4df62;
  color: #111111;
  font-family: "Nunito", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.update-toggle:hover {
  background: #ffe57a;
}

.update-log.is-collapsed .update-log-content {
  display: none;
}

.tweet-panel {
  min-height: 540px;
}

.tweet-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.tweet-card {
  display: grid;
  gap: 10px;
  padding: 10px;
  background: #fffef8;
  border: 2px inset #e4d470;
}

.tweet-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tweet-card__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tweet-card__name {
  font-family: "Nunito", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f0f0f;
}

.tweet-card__handle {
  font-family: "Nunito", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #7a6a24;
}

.tweet-card__date {
  font-size: 0.74rem;
  font-weight: 700;
  color: #2a2a2a;
  white-space: nowrap;
}

.tweet-card__image {
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid #1f1f1f;
  background: #ffffff;
}

.tweet-card__body {
  margin: 0;
  font-family: "Nunito", sans-serif;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #1a1a1a;
  white-space: pre-wrap;
}

.tweet-card__footer {
  display: block;
  padding-top: 2px;
  border-top: 1px dashed #c8b13c;
}

.tweet-card__source {
  display: block;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #c8b13c;
  background: #fff8c7;
  text-align: center;
  font-family: "Nunito", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #004182;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.tweet-card__source:hover {
  color: #a10000;
  text-decoration-style: solid;
}

.tweet-feed__empty {
  padding: 10px;
  background: #fffef8;
  border: 2px inset #e4d470;
  font-family: "Nunito", sans-serif;
  font-size: 0.88rem;
  color: #2a2a2a;
}

.pc-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 6px 8px;
  color: #0f0f0f;
  font-family: "Nunito", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #ececec 100%);
  border: 2px solid #1f1f1f;
}

.pc-visitor-count {
  margin-bottom: 8px;
  padding: 6px 8px;
  background: #fff8c7;
  border: 2px solid #3a3a3a;
  font-size: 0.78rem;
  font-weight: 700;
  color: #2a2a2a;
}

.pc-transcript {
  margin-bottom: 8px;
  padding: 6px;
  background: #fffef8;
  border: 2px inset #e4d470;
}

.update-log ul {
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #ffffff;
  border: 1px solid #7d7d7d;
  min-height: 120px;
  font-size: 0.86rem;
  line-height: 1.35;
}

.update-log li {
  margin-bottom: 8px;
}

.update-log li:not(.date-spacer)::before {
  content: "[DE]:";
  margin-right: 8px;
  color: #a10000;
  font-weight: 700;
}

.update-log .date-spacer {
  margin: 4px 0 10px;
  padding: 3px 6px;
  border-top: 1px solid #bababa;
  border-bottom: 1px solid #bababa;
  font-size: 0.78rem;
  font-weight: 700;
  color: #004182;
  text-align: center;
  letter-spacing: 0.4px;
  background: #f8f8f8;
}

.update-log .date-spacer::before {
  content: "";
}

.update-log li:last-child {
  margin-bottom: 0;
}

.update-log strong {
  color: #004182;
  font-weight: 700;
}

.pc-status {
  margin-bottom: 6px;
  padding: 5px 8px;
  background: #ffffff;
  border: 2px solid #2f2f2f;
  font-size: 0.74rem;
  color: #2f2f2f;
}

.pc-input {
  padding: 6px 8px;
  background: #ffffff;
  border: 2px inset #dddddd;
  color: #7a7a7a;
  font-size: 0.8rem;
  font-style: italic;
}

#about-me {
  background-color: #121a0b;
  color: #edf7df;
  border-color: var(--nepeta);
  box-shadow: 6px 6px 0 var(--nepeta);
}

#latest-captions a,
#latest-captions button {
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 6px 10px;
  border: 2px solid var(--kanaya);
  background-color: rgba(7, 34, 24, 0.88);
  border-radius: 2px;
  color: #dcffef;
  text-decoration-color: var(--kanaya);
  text-underline-offset: 2px;
}

#latest-captions button {
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

#latest-captions a:hover,
#latest-captions button:hover {
  background-color: rgba(10, 58, 39, 0.95);
  color: #f3fff9;
  text-decoration-color: #dcffef;
}

#projects {
  background-color: #0a1919;
  color: #e2f7f7;
  border-color: #008282;
  box-shadow: 6px 6px 0 #008282;
}

#latest-captions {
  background-color: #0c1d16;
  color: #e3f9ee;
  border-color: var(--kanaya);
  box-shadow: 6px 6px 0 var(--kanaya);
}

#requests-status {
  background-color: #0a1020;
  color: #e5ecff;
  border-color: #005682;
  box-shadow: 6px 6px 0 #005682;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: "Quicksand", sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

a {
  color: var(--accent-blue);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-style: dotted;
}

a:hover {
  color: var(--accent-purple);
  text-decoration-style: solid;
}

.rainbow {
  display: inline-block;
  color: var(--accent-red);
  font-weight: 700;
  background-image: repeating-linear-gradient(
    90deg,
    #a10000 0px,
    #a13800 24px,
    #a17600 48px,
    #8c9100 72px,
    #548100 96px,
    #1c8141 120px,
    #006b60 144px,
    #004182 168px,
    #1430ac 192px,
    #3f23bc 216px,
    #631db4 240px,
    #75138f 264px,
    #8d0a6d 288px,
    #a1004f 304px,
    #a10000 320px
  );
  background-size: 320px 100%;
  background-repeat: repeat-x;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  animation: rainbow-shift 8s linear infinite;
}

@keyframes rainbow-shift {
  from {
    background-position: 0 50%;
  }
  to {
    background-position: -320px 50%;
  }
}

@media (max-width: 860px) {
  .main-layout {
    grid-template-columns: 1fr;
  }

  .content-row {
    flex-direction: column;
  }

  .sidebar-column {
    width: 100%;
  }

  .tweet-panel {
    width: 100%;
    min-height: 420px;
  }
}