/* GeoCities, about 1996.

   Centered everything, Times New Roman, a tiled background, and a horizontal
   rule between every thought. The look comes from four things and they are all
   cheap: the tile, the centering, the rules, and text that is a color rather
   than a shade of grey.

   The tile is drawn with gradients rather than fetched as a GIF. A repeating
   background is the single most recognizable thing about this era and it is
   also the thing most likely to make a page unreadable, so it stays behind a
   solid content panel and never sits under body text. */

:root {
  --gc-ink:    #000080;   /* navy, which is what everything was */
  --gc-link:   #0000ee;
  --gc-visit:  #551a8b;
  --gc-hot:    #cc0000;
  --gc-rule:   #ff9900;
  --gc-panel:  #ffffff;
  --gc-orange: #E87722;
}

body {
  color: #000;
  font: 16px/1.6 "Times New Roman", Times, Georgia, serif;
  /* The tile: a small diagonal weave in two blues, repeated. Deliberately busy,
     and deliberately never underneath a sentence. */
  background-color: #7a94c4;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.14) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(-45deg, rgba(0,0,64,.16)     0 6px, transparent 6px 12px);
  background-size: 24px 24px;
  padding: 18px 12px 40px;
}

.gc {
  max-width: 760px;
  margin: 0 auto;
  background: var(--gc-panel);
  border: 3px ridge #c0c0c0;
  padding: 18px 26px 30px;
  text-align: center;      /* 1996 in one declaration */
}

a { color: var(--gc-link); }
a:visited { color: var(--gc-visit); }

.gc-crumb { font-size: 13px; color: #444; margin: 0 0 12px; font-family: Verdana, Arial, sans-serif; }

/* The under construction sign. The barber pole is a gradient that moves, which
   is what the animated GIF did, and it stops for anyone who asked for reduced
   motion (see base.css). */
.gc-construction { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 18px; }
.gc-bar {
  flex: 1 1 auto; height: 16px; max-width: 150px;
  border: 1px solid #000;
  background: repeating-linear-gradient(45deg, #ffcc00 0 10px, #000 10px 20px);
  background-size: 28px 28px;
  animation: gc-crawl 1.6s linear infinite;
}
@keyframes gc-crawl { to { background-position: 28px 0; } }
.gc-construction-text {
  font: 700 15px/1 Verdana, Arial, sans-serif;
  color: var(--gc-hot);
  white-space: nowrap;
}

.gc h1 {
  font-size: clamp(24px, 5vw, 38px);
  line-height: 1.2;
  color: var(--gc-ink);
  margin: 0 0 14px;
  text-shadow: 2px 2px 0 #ffcc00;   /* the drop shadow every title had */
}
.gc h2 {
  font-size: 22px;
  color: var(--gc-hot);
  margin: 24px 0 8px;
}
.gc h3 { font-size: 17px; color: var(--gc-ink); margin: 16px 0 2px; }
.gc p { margin: 8px 0; }
.gc-lead { font-size: 17px; }

/* The rule. Not an <hr> default: a thick orange bar, because in 1996 the
   horizontal rule was a graphic and it was doing a lot of work. */
.gc-rule {
  border: 0; height: 6px; margin: 22px auto;
  background: linear-gradient(90deg, transparent, var(--gc-rule) 15%, var(--gc-hot) 50%, var(--gc-rule) 85%, transparent);
}

.gc-banner { overflow: hidden; border: 2px inset #c0c0c0; background: #ffffcc; padding: 4px 0; margin: 0 0 14px; }
.gc-scroll {
  display: inline-block; white-space: nowrap; padding-left: 100%;
  animation: gc-drift 20s linear infinite;
  font: 700 15px/1.4 Verdana, Arial, sans-serif; color: var(--gc-ink);
}
@keyframes gc-drift { to { transform: translateX(-200%); } }

/* Body text goes back to the left. Centering a heading is period accurate;
   centering four lines of a paragraph is unreadable, and 1996 is not a good
   enough reason to make somebody work at it. */
.gc-list, .gc-links, .gc-checks, .gc-guestbook, .gc h3, .gc h3 + p { text-align: left; }
/* The standfirst included. It runs to three or four lines, and the rule about
   not centering a paragraph does not have an exception for the first one. */
.gc-lead { text-align: left; max-width: 62ch; margin-left: auto; margin-right: auto; }
.gc-list { display: inline-block; margin: 8px 0; padding: 0 0 0 24px; max-width: 62ch; }
.gc-list li { margin-bottom: 9px; }

.gc-checks {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0;
  font-size: 15px;
}
.gc-checks th, .gc-checks td {
  border: 1px solid #999;
  padding: 9px 11px;
  vertical-align: top;
  text-align: left;
}
.gc-checks th { background: #ffffcc; width: 34%; color: var(--gc-ink); }

/* The guestbook, which is the form. Sunken panel, because everything that took
   input in 1996 was sunken. */
.gc-guestbook {
  border: 3px inset #c0c0c0;
  background: #f4f4ff;
  padding: 16px 20px 20px;
  margin: 10px auto;
  max-width: 520px;
}
.gc-guestbook h2 { margin-top: 0; text-align: center; }
.gc-note { font-size: 14px; color: #333; font-family: Verdana, Arial, sans-serif; }

.gc-field { margin: 0 0 12px; }
.gc-field label { display: block; font-weight: 700; color: var(--gc-ink); font-size: 15px; margin-bottom: 3px; }
.gc-field input, .gc-field textarea {
  width: 100%; padding: 5px 6px;
  font: 15px/1.5 "Times New Roman", Times, serif;
  border: 2px inset #c0c0c0;
  background: #fff;
}
.gc-field input:focus, .gc-field textarea:focus { outline: 2px solid var(--gc-orange); outline-offset: 1px; }
.gc-field.is-bad input, .gc-field.is-bad textarea { border-color: var(--gc-hot); background: #fff5f5; }

.rt-field-err { color: var(--gc-hot); font-size: 14px; font-weight: 700; margin: 4px 0 0; font-family: Verdana, Arial, sans-serif; }
.rt-err {
  border: 2px solid var(--gc-hot); background: #fff5f5; color: #800;
  padding: 9px 11px; font-size: 14px; margin: 0 0 12px;
  font-family: Verdana, Arial, sans-serif;
}

.gc-submit { text-align: center; margin: 16px 0 0; }
.gc-submit button {
  font: 700 16px/1 "Times New Roman", Times, serif;
  padding: 8px 26px;
  border: 3px outset #c0c0c0;
  background: #d4d0c8;
  cursor: pointer;
}
.gc-submit button:hover, .gc-submit button:focus { background: var(--gc-orange); color: #fff; }
.gc-submit button:active { border-style: inset; }

.gc-links { display: inline-block; margin: 8px 0; padding: 0 0 0 24px; }
.gc-links li { margin-bottom: 6px; }

.gc-ring { margin-top: 26px; border-top: 2px dashed #999; padding-top: 14px; }
.gc-ring ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; padding: 0; margin: 10px 0 0; }
.gc-ring a { font-family: Verdana, Arial, sans-serif; font-size: 14px; }

.gc-counter { margin: 22px 0 4px; }
.gc-counter span {
  display: inline-block; width: 20px;
  background: #000; color: #0f0;
  font: 700 20px/1.5 "Courier New", monospace;
  border: 2px inset #666;
}

.gc-midi, .gc-viewed {
  font: 13px/1.5 Verdana, Arial, sans-serif;
  color: #555;
  margin: 10px 0 0;
}

@media (max-width: 560px) {
  .gc { padding: 14px 14px 24px; }
  .gc-checks th, .gc-checks td { display: block; width: auto; }
  .gc-checks th { border-bottom: 0; }
  .gc-construction-text { white-space: normal; }
}