/* ===== Normal Technology, LLC - geocities edition ===== */

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: #001a4d url("assets/bg-bubbles.jpg") repeat;
  font-family: "Times New Roman", Times, serif;
  color: #ffff00;
  text-align: center;
  padding: 0 0 30px 0;
}

/* yellow text is legible on anything with a hard black outline */
h1, h2, p, li, a, marquee, .tagline, .copy, .retro {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* ===== top marquee ===== */
.marquee-bar {
  background: #000080 url("assets/darkblue.jpg") repeat;
  border-bottom: 3px ridge #ffff00;
  padding: 6px 0;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-weight: bold;
  font-size: 16px;
  color: #ffff00;
}
.marquee-bar .mq {
  height: 28px;
  vertical-align: middle;
}

/* ===== main card ===== */
.card {
  max-width: 860px;
  margin: 24px auto;
  background: #000a2e url("assets/darkblue.jpg") repeat;
  border: 6px ridge #ffff00;
  border-radius: 6px;
  padding: 18px 26px 28px 26px;
  box-shadow: 0 0 0 3px #000080, 0 8px 30px rgba(0,0,0,.6);
}

/* ===== header ===== */
.site-header { margin: 6px 0 2px 0; }
.title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.title-gif {
  width: 50px;
  height: 46px;
}
h1 {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 40px;
  margin: 0;
  color: #ffff00;
  letter-spacing: 1px;
}
.tagline {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 17px;
  margin: 8px 0 0 0;
}

/* ===== dividers ===== */
.divider { margin: 14px 0; }
.div-star {
  width: 42px;
  height: 42px;
}

/* ===== hero ===== */
.hero { margin: 6px 0 10px 0; }
.hero-gif {
  width: 240px;
  height: 240px;
}

/* ===== panels ===== */
.panel { margin: 10px 0; }
h2 {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 26px;
  margin: 6px 0 12px 0;
  color: #ffff00;
}

.flank-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.flank-gif {
  width: 100px;
  height: auto;
  flex: 0 0 auto;
}
.flank-gif.small { width: 70px; }
.flank-gif.tall  { width: 120px; }
.flank-gif.wide  { width: 150px; }

.body-text {
  flex: 1 1 auto;
  max-width: 520px;
  font-size: 19px;
  line-height: 1.5;
  text-align: center;
}
.services {
  display: inline-block;
  text-align: left;
  font-size: 18px;
  margin: 6px auto;
  line-height: 1.7;
}

/* ===== contact ===== */
.contact-details { font-size: 18px; }
.email-line { font-size: 22px; font-weight: bold; }
a {
  color: #ffff00;
  text-decoration: underline;
}
a:hover { color: #fff8a0; }

/* ===== footer ===== */
.site-footer { margin-top: 8px; }
.footer-gif {
  width: 300px;
  height: auto;
}
.copy {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 15px;
  margin: 10px 0 2px 0;
}
.retro {
  font-size: 13px;
  margin: 2px 0 0 0;
  color: #ffff00;
}

/* ===== small screens ===== */
@media (max-width: 640px) {
  h1 { font-size: 28px; }
  .card { margin: 12px 8px; padding: 12px 12px 20px 12px; }
  .flank-row { flex-wrap: wrap; gap: 12px; }
  .hero-gif { width: 180px; height: 180px; }
  .footer-gif { width: 220px; }
}