/* === FREAKY INDUSTRIES === */
/* Best viewed in Netscape Navigator 4.0+ at 1024x768 */

@keyframes blink-text { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes marquee-scroll { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
@keyframes rainbow-text {
  0% { color: #FF0000; } 16% { color: #FF7F00; } 33% { color: #FFFF00; }
  50% { color: #00FF00; } 66% { color: #0000FF; } 83% { color: #4B0082; } 100% { color: #FF0000; }
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes pulse-border { 0%, 100% { border-color: #FFFF00; } 50% { border-color: #FF00FF; } }
@keyframes glow-green { 0%, 100% { text-shadow: 0 0 4px #00FF00; } 50% { text-shadow: 0 0 12px #00FF00, 0 0 20px #00FF00; } }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Courier New', Courier, monospace;
  background: #1a1a2e;
  color: #00FF00;
  font-size: 12px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

.site-wrapper {
  max-width: 960px;
  margin: 0 auto;
  background: #000080;
  border-left: 4px ridge #C0C0C0;
  border-right: 4px ridge #C0C0C0;
  box-shadow: 0 0 40px rgba(0,0,0,0.8);
  overflow-x: hidden;
}

.blink { animation: blink-text 1.2s step-end infinite; }
.rainbow { animation: rainbow-text 4s linear infinite; font-weight: bold; }
.spin { animation: spin 8s linear infinite; display: inline-block; }
.glow { animation: glow-green 2s ease-in-out infinite; }

a { color: #FFFF00; text-decoration: underline; }
a:visited { color: #FF00FF; }
a:hover { background: #FFFF00; color: #000080; }

/* TOP MARQUEE */
.top-marquee {
  background: #000;
  color: #FFFF00;
  border-bottom: 2px solid #C0C0C0;
  overflow: hidden;
  white-space: nowrap;
  padding: 4px 0;
  font-size: 12px;
  max-width: 100%;
}

.top-marquee .scroll-text {
  display: inline-block;
  padding-left: 100%;
  animation: marquee-scroll 30s linear infinite;
}

/* HEADER */
.site-header {
  background: #000080;
  padding: 18px 16px 10px;
  text-align: center;
  border-bottom: 3px ridge #C0C0C0;
}

.site-header .established {
  font-size: 11px;
  color: #00FFFF;
  letter-spacing: 3px;
}

.site-header h1 {
  font-family: 'Times New Roman', serif;
  font-size: 64px;
  font-weight: bold;
  color: #FFFF00;
  text-shadow: 3px 3px 0 #FF00FF, 6px 6px 0 #000;
  letter-spacing: 6px;
  margin: 4px 0;
}

.site-header .slogan {
  font-size: 14px;
  color: #FFFFFF;
  margin-top: 4px;
}

.site-header .subtitle {
  font-size: 10px;
  color: #C0C0C0;
  margin-top: 8px;
}

/* NAV */
.nav-bar {
  background: #C0C0C0;
  color: #000;
  padding: 6px;
  text-align: center;
  border-bottom: 2px solid #000;
  font-size: 13px;
}

/* WIN95 BUTTON */
.win95-btn {
  display: inline-block;
  background: #C0C0C0;
  color: #000;
  border: 2px outset #FFF;
  padding: 4px 14px;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  margin: 2px;
}

.win95-btn:hover { background: #DCDCDC; color: #000; }
.win95-btn:active { border-style: inset; }

.win95-btn-big {
  font-size: 15px;
  padding: 8px 22px;
  background: #FFFF00;
  color: #000;
}

/* FAKE WINDOWS */
.fake-window {
  background: #C0C0C0;
  border: 2px outset #FFF;
  color: #000;
  margin-bottom: 10px;
  max-width: 100%;
  box-sizing: border-box;
}

.fake-window-title {
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #FFF;
  padding: 2px 6px;
  font-weight: bold;
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}

.fake-window-body {
  padding: 8px;
  font-size: 11px;
  overflow: hidden;
  word-wrap: break-word;
}

/* SECTION BEVEL */
.section-bevel {
  border: 3px outset #C0C0C0;
  background: #000040;
  padding: 14px;
  margin-bottom: 12px;
  max-width: 100%;
  box-sizing: border-box;
}

/* UNDER CONSTRUCTION */
.under-construction {
  background: repeating-linear-gradient(45deg, #FFFF00, #FFFF00 10px, #000 10px, #000 20px);
  height: 14px;
  margin: 8px 0;
}

/* LAYOUT */
.page-grid {
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  gap: 10px;
  padding: 14px;
  max-width: 100%;
}

.page-grid > * {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 800px) {
  .page-grid {
    grid-template-columns: 1fr;
  }
  .site-header h1 {
    font-size: 40px;
    letter-spacing: 3px;
  }
  .site-header .slogan {
    font-size: 11px;
  }
  .nav-bar {
    padding: 4px;
  }
  .win95-btn {
    padding: 3px 8px;
    font-size: 10px;
    margin: 1px;
  }
  .stat-grid {
    grid-template-columns: 1fr 1fr;
  }
  .pillar-grid {
    grid-template-columns: 1fr;
  }
  .section-title {
    font-size: 16px;
  }
  .cta-band h2 {
    font-size: 20px;
  }
  .contact-grid {
    grid-template-columns: 1fr !important;
  }
}

.page-full {
  padding: 14px;
}

/* COUNTER DISPLAY */
.counter-display {
  display: inline-block;
  background: #000;
  color: #FF0000;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: 18px;
  padding: 4px 8px;
  border: 2px inset #C0C0C0;
  letter-spacing: 2px;
}

/* STAT BOXES */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.stat-box {
  background: #000;
  border: 2px inset #C0C0C0;
  padding: 8px;
  text-align: center;
}

.stat-box .label {
  font-size: 9px;
  color: #C0C0C0;
}

.stat-box .value {
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: bold;
}

/* FOOTER */
.site-footer {
  background: #C0C0C0;
  color: #000;
  padding: 12px;
  text-align: center;
  font-size: 11px;
  border-top: 3px outset #FFF;
}

.site-footer .legal {
  font-size: 9px;
  color: #555;
  margin-top: 4px;
}

.site-footer .badges {
  margin-top: 6px;
}

.site-footer .badges span {
  display: inline-block;
  padding: 1px 6px;
  margin: 2px;
  font-size: 10px;
}

/* CTA BAND */
.cta-band {
  background: #000;
  border-top: 3px ridge #C0C0C0;
  border-bottom: 3px ridge #C0C0C0;
  padding: 16px;
  text-align: center;
}

.cta-band h2 {
  font-family: 'Times New Roman', serif;
  font-size: 26px;
  color: #FF00FF;
  text-shadow: 2px 2px 0 #00FFFF;
}

/* TABLE STYLES */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin: 10px 0;
}

table th {
  background: #000080;
  color: #FFFF00;
  padding: 4px 8px;
  border: 1px solid #C0C0C0;
  text-align: left;
  font-size: 10px;
}

table td {
  padding: 4px 8px;
  border: 1px solid #808080;
  color: #00FF00;
  background: #000040;
}

table tr:nth-child(even) td {
  background: #000060;
}

/* SECTION TITLE */
.section-title {
  color: #FFFF00;
  font-family: 'Times New Roman', serif;
  font-size: 20px;
  border-bottom: 2px dashed #00FFFF;
  padding-bottom: 4px;
  margin: 0 0 12px;
}

/* PILLAR CARDS */
.pillar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.pillar-card {
  background: #000080;
  border: 2px ridge #C0C0C0;
  padding: 10px;
  text-align: center;
}

.pillar-card .icon { font-size: 32px; }
.pillar-card .title { font-weight: bold; font-size: 12px; margin: 4px 0; }
.pillar-card p { color: #FFF; font-size: 11px; line-height: 1.4; }

/* GUESTBOOK */
.guestbook-scroll {
  max-height: 420px;
  overflow-y: auto;
  border: 2px inset #C0C0C0;
  padding: 8px;
  background: #000020;
}

.guestbook-scroll::-webkit-scrollbar {
  width: 16px;
}

.guestbook-scroll::-webkit-scrollbar-track {
  background: #C0C0C0;
  border: 1px solid #808080;
}

.guestbook-scroll::-webkit-scrollbar-thumb {
  background: #C0C0C0;
  border: 2px outset #FFF;
}

.guestbook-scroll::-webkit-scrollbar-thumb:hover {
  background: #DCDCDC;
}

.guestbook-scroll::-webkit-scrollbar-button {
  background: #C0C0C0;
  border: 2px outset #FFF;
  height: 16px;
}

.guestbook-entry {
  border: 1px dashed #C0C0C0;
  padding: 8px;
  margin-bottom: 8px;
  background: #000040;
}

.guestbook-entry .gb-name { color: #FFFF00; font-weight: bold; }
.guestbook-entry .gb-date { color: #808080; font-size: 10px; float: right; }
.guestbook-entry .gb-msg { color: #00FFFF; margin-top: 4px; }

/* ERROR / CONTACT MODAL */
.error-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,128,0.8);
  z-index: 9999;
}
.error-overlay.show { display: flex; align-items: center; justify-content: center; }

.error-box {
  background: #C0C0C0;
  border: 3px outset #FFF;
  max-width: 480px;
  width: 90%;
  font-family: 'Courier New', monospace;
}

.error-box-title {
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #FFF;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}

.error-box-body {
  padding: 16px;
  color: #000;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.error-box-body .icon { font-size: 32px; }
.error-box-body p { font-size: 12px; line-height: 1.5; }

.error-box-footer {
  padding: 8px 16px 14px;
  text-align: center;
}

/* AWARD BADGES */
.award-box {
  border: 2px ridge;
  padding: 4px;
  margin-bottom: 6px;
  font-weight: bold;
  font-size: 10px;
  text-align: center;
}

/* ASCII ART PRE */
.ascii-art {
  background: #000;
  border: 2px inset #C0C0C0;
  padding: 10px;
  color: #00FF00;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  line-height: 1.3;
  overflow-x: auto;
  white-space: pre;
}

/* TIMELINE */
.timeline-item {
  padding: 6px 0 6px 16px;
  border-left: 2px solid #00FFFF;
  margin-bottom: 8px;
  position: relative;
}

.timeline-item::before {
  content: '►';
  position: absolute;
  left: -7px;
  top: 6px;
  color: #FFFF00;
  font-size: 10px;
}

.timeline-item .year {
  color: #FF00FF;
  font-weight: bold;
}

.timeline-item .event {
  color: #00FF00;
  font-size: 11px;
}

/* FORM STYLES */
.retro-input {
  width: 100%;
  border: 2px inset #FFF;
  padding: 4px 6px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  background: #FFF;
  color: #000;
  margin: 4px 0 10px;
}

.retro-textarea {
  width: 100%;
  border: 2px inset #FFF;
  padding: 4px 6px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  background: #FFF;
  color: #000;
  margin: 4px 0 10px;
  resize: vertical;
}

.retro-select {
  border: 2px inset #FFF;
  padding: 3px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  background: #FFF;
  color: #000;
  margin: 4px 0 10px;
  width: 100%;
}