/* fake-2004 blog vibes: mostly default, just colors + layout */

body {
  margin: 0;
  padding: 0;
  background-color: #000;
  background-image: url("/noise.png");
  background-repeat: repeat;
  color: #eee;
  font-family: "Times New Roman", serif;
  font-size: 16px;
}

.page {
  max-width: 640px;
  margin: 8px;
  padding-bottom: 40px;
}

#header h1 {
  margin: 0;
  padding: 0;
  font-size: 36px;
  color: #33ff33;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.letter {
  display: inline-block;
}

/* per-letter retro rainbow-ish colors */
#blog-title .letter:nth-child(1) { color: #ff5555; }  /* b */
#blog-title .letter:nth-child(2) { color: #ffaa00; }  /* l */
#blog-title .letter:nth-child(3) { color: #ffee00; }  /* o */
#blog-title .letter:nth-child(4) { color: #55ff55; }  /* o */
#blog-title .letter:nth-child(5) { color: #00ffaa; }  /* o */
#blog-title .letter:nth-child(6) { color: #00ddff; }  /* o */
#blog-title .letter:nth-child(7) { color: #5599ff; }  /* o */
#blog-title .letter:nth-child(8) { color: #aa66ff; }  /* o */
#blog-title .letter:nth-child(9) { color: #ff66ff; }  /* o */
#blog-title .letter:nth-child(10) { color: #ff6699; } /* o */
#blog-title .letter:nth-child(11) { color: #ffffff; } /* g */

#header h1:hover .letter {
  animation: bounce-letter 0.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.05s);
}

@keyframes bounce-letter {
  0%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-4px);
  }
  60% {
    transform: translateY(2px);
  }
}

.title-banana {
  height: 32px;
  width: auto;
}

.smoking-title {
  height: 56px;
  width: auto;
}

#header .tiny {
  font-size: 12px;
  color: #aaaaaa;
}

/* removed header-decals decorative squares */
/*
.header-decals {
  margin-top: 4px;
  display: flex;
  gap: 4px;
}

.deco-square {
  width: 10px;
  height: 10px;
  border: 1px solid #444;
}

.deco-one {
  background: #ffcc00;
}

.deco-two {
  background: #33ff33;
}

.deco-three {
  background: #ff66ff;
}
*/

.go-back-wrap {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.back-arrow {
  height: 14px;
  width: auto;
}

.go-back {
  font-size: 13px;
  color: #0000ff;
  text-decoration: underline;
}

.go-back:visited {
  color: #ff0000;
}

.above-hr-gif {
  display: block;
  margin-top: 4px;
}

.post {
  margin-top: 16px;
}

.post h2 {
  font-size: 24px;
  margin: 0 0 4px 0;
  color: #ffdd33;
}

.post h3 {
  font-size: 18px;
  margin: 14px 0 4px 0;
  color: #ff9933;
}

.meta {
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
}

.meta-note {
  color: #66ff66;
}

p {
  margin: 6px 0;
}

ul {
  margin: 6px 0 6px 18px;
  padding: 0;
}

li {
  margin-bottom: 4px;
}

a {
  color: #ff5555;
}

a:hover {
  color: #ffffff;
}

hr {
  border: none;
  border-top: 1px solid #444;
  margin: 12px 0;
}

/* top-right gif */

.corner-gif {
  float: right;
  display: block;
  padding: 4px;
  z-index: 99;
  text-align: right;
}

.corner-top-row {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 4px;
}

.corner-gif img {
  display: block;
  margin-left: auto;
}

.corner-gif img[alt="spinning cube gif"] {
  width: 140px;
  height: auto;
}

.corner-side-gif {
  width: 80px;
  height: auto;
}

.corner-below-side-gif {
  width: 80px;
  height: auto;
  margin-top: 4px;
}

.stacked-gif {
  width: 120px;
  height: auto;
}

.computer-mind-gif {
  width: 120px;
  height: auto;
  margin-top: 100px;
}

/* divider + side gifs */

.hr-gif-wrap {
  display: inline-block;
}

.top-side-gifs {
  margin-top: 6px;
  margin-bottom: 2px;
}

.side-gif-row {
  display: flex;
  gap: 4px;
}

.side-gif {
  width: 40px;
  height: auto;
}

/* bottom bar */

#bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4px 8px;
  background: #111;
  color: #ccc;
  font-size: 11px;
  text-align: center;
  border-top: 1px solid #333;
}

/* breakdance gif bottom-right */

.breakdance-gif {
  position: fixed;
  right: 4px;
  bottom: 24px;
  width: 80px;
  height: auto;
  z-index: 98;
}

/* mobile tweaks for tiny viewports */
@media (max-width: 480px) {
  .page {
    margin: 6px;
  }

  #header h1 {
    font-size: 30px;
  }

  .corner-gif img[alt="spinning cube gif"] {
    width: 110px;
  }

  .stacked-gif,
  .computer-mind-gif {
    width: 100px;
  }

  .breakdance-gif {
    width: 64px;
  }
}