/* SUCK IT CONSULTING — OFFICIAL STYLESHEET v1.0 — DO NOT STEAL */
/* Made by Dwayne K. using FrontPage Express and a lot of patience */

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

body {
  background: #000080;
  font-family: 'Comic Sans MS', 'Comic Neue', cursive;
  color: #ffffff;
  font-size: 13px;
}

a { color: #88aaff; text-decoration: underline; cursor: pointer; }
a:hover { color: #ffff00; }

/* ── ANIMATIONS ── */
.blink { animation: blink 0.7s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.marquee-wrap { overflow: hidden; white-space: nowrap; }
.marquee-inner { display: inline-block; animation: marquee 20s linear infinite; }
.marquee-inner.rev { animation-direction: reverse; animation-duration: 25s; }
@keyframes marquee { 0%{transform:translateX(100%)} 100%{transform:translateX(-150%)} }

.fire { animation: fire 0.35s infinite alternate; font-weight: bold; }
@keyframes fire { 0%{color:#ff0} 50%{color:#ff6600} 100%{color:#ff0000} }

.rainbow { animation: rb 1s linear infinite; font-weight: bold; }
@keyframes rb {
  0%{color:#f00}16%{color:#f80}32%{color:#ff0}48%{color:#0f0}64%{color:#0ff}80%{color:#00f}100%{color:#f00}
}

.spin { animation: spin 8s linear infinite; display: inline-block; }
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

.twinkle { animation: twinkle 2s infinite alternate; }
@keyframes twinkle { 0%{opacity:0.2} 100%{opacity:1} }

/* ── HEADER ── */
.site-header {
  background: #000010;
  position: relative;
  overflow: hidden;
  height: 110px;
}
#starfield {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.header-inner {
  position: relative; z-index: 2;
  display: flex; align-items: center;
  height: 110px; padding: 0 16px; gap: 10px;
  max-width: 1200px; margin: 0 auto;
}
.logo-emoji { font-size: 44px; flex-shrink: 0; }
.logo-text-wrap { flex: 1; }
.logo-main {
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: 38px;
  color: #ff0000;
  text-shadow: 3px 3px 0 #000, -1px -1px 0 #ffff00;
  line-height: 1;
}
.logo-sub {
  font-size: 12px; color: #00ffff;
  font-style: italic; text-shadow: 1px 1px 0 #000080;
}
.header-right { text-align: center; flex-shrink: 0; }
.hit-counter {
  background: #000; color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 16px; padding: 2px 8px;
  border: 2px inset #00ff00;
  letter-spacing: 4px; display: inline-block;
}
.header-meta { font-size: 9px; color: #888; font-family: Tahoma, sans-serif; }

/* ── TICKER ── */
.ticker {
  background: #000040; padding: 3px 0;
  border-top: 2px solid #ffff00;
  border-bottom: 2px solid #ffff00;
  color: #00ffff; font-size: 12px; font-weight: bold;
}

/* ── NAV ── */
.main-nav { width: 100%; border-collapse: collapse; }
.main-nav td {
  background: #004080;
  border: 2px outset #8080ff;
  padding: 5px 10px;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  color: #ffff00;
}
.main-nav td:hover, .main-nav td.active {
  background: #002266; color: #ffffff;
}
.main-nav td a {
  color: inherit; text-decoration: none; display: block;
}

/* ── UNDER CONSTRUCTION BANNER ── */
.under-con {
  background: repeating-linear-gradient(
    45deg, #ffff00, #ffff00 10px, #000000 10px, #000000 20px
  );
  color: #000; font-weight: bold;
  text-align: center; padding: 4px;
  font-size: 12px;
}

/* ── LAYOUT ── */
.page-layout { display: flex; align-items: flex-start; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.main-col { flex: 1; padding: 10px; min-width: 0; }
.sidebar { width: 260px; flex-shrink: 0; padding: 8px; border-left: 2px groove #4444ff; }

/* ── CONTENT BOXES ── */
.content-box {
  background: #00003a;
  border: 2px inset #4444ff;
  padding: 10px;
  margin-bottom: 10px;
  line-height: 1.75;
  color: #e8e8ff;
}
.section-title {
  font-size: 18px; font-weight: bold;
  color: #ffff00; text-align: center;
  border-bottom: 2px dashed #ffff00;
  padding-bottom: 5px; margin-bottom: 10px;
}
.pixel-hr { border: none; border-top: 4px double #ffff00; margin: 8px 0; }

/* ── SIDEBAR BOXES ── */
.sidebar-box {
  background: #0a0a40;
  border: 2px solid #4444ff;
  padding: 8px; margin-bottom: 8px;
}
.sidebar-title {
  color: #ffff00; font-weight: bold; font-size: 12px;
  border-bottom: 1px dashed #ffff00;
  margin-bottom: 6px; padding-bottom: 3px;
  text-align: center;
}

/* ── WIN98 ELEMENTS ── */
.win98-btn {
  background: #c0c0c0;
  border-top: 2px solid #fff; border-left: 2px solid #fff;
  border-right: 2px solid #808080; border-bottom: 2px solid #808080;
  color: #000; font-family: 'Comic Sans MS', cursive;
  font-size: 11px; padding: 3px 10px; cursor: pointer; font-weight: bold;
}
.win98-btn:active {
  border-top: 2px solid #808080; border-left: 2px solid #808080;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
}
.win98-window {
  background: #c0c0c0;
  border-top: 2px solid #fff; border-left: 2px solid #fff;
  border-right: 2px solid #404040; border-bottom: 2px solid #404040;
  margin-bottom: 8px;
}
.win98-titlebar {
  background: linear-gradient(to right, #000080, #1084d0);
  color: #fff; font-size: 11px; font-weight: bold;
  padding: 2px 4px; display: flex; align-items: center;
  justify-content: space-between; font-family: Tahoma, sans-serif;
}
.win98-body { padding: 6px; font-size: 11px; font-family: Tahoma, sans-serif; color: #000; }

/* ── SERVICE BOXES ── */
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 10px; }
.service-box {
  background: #001a4d; border: 2px solid #4444ff;
  padding: 8px; text-align: center; font-size: 11px;
}
.service-box:hover { background: #002266; border-color: #ffff00; }
.service-icon { font-size: 28px; margin-bottom: 4px; }
.service-name { color: #ffff00; font-size: 12px; font-weight: bold; margin-bottom: 3px; }

/* ── TESTIMONIALS ── */
.testimonial {
  background: #1a0033; border-left: 4px solid #ff00ff;
  padding: 6px 10px; font-style: italic;
  font-size: 12px; margin: 6px 0; color: #ddd;
}
.testimonial-attr { color: #888; margin-top: 2px; font-size: 10px; font-style: normal; }

/* ── BLOG ── */
.blog-post-card {
  background: #00001a; border: 2px solid #333366;
  padding: 10px; margin-bottom: 10px;
}
.blog-post-title { font-size: 16px; font-weight: bold; color: #ffff00; margin-bottom: 4px; }
.blog-post-title a { color: #ffff00; }
.blog-post-title a:hover { color: #ff6600; }
.blog-meta { font-size: 10px; color: #888; font-family: Tahoma, sans-serif; margin-bottom: 6px; }
.blog-excerpt { font-size: 12px; color: #ccc; line-height: 1.6; }
.read-more {
  display: inline-block; margin-top: 6px;
  background: #002266; border: 2px outset #4466aa;
  color: #aaccff; font-size: 11px; padding: 3px 10px;
  text-decoration: none; font-family: 'Comic Sans MS', cursive;
}
.read-more:hover { background: #003399; color: #fff; }

/* ── COMMENTS ── */
.comment-block {
  background: #00001a; border: 1px solid #333366;
  padding: 8px; margin-bottom: 6px;
}
.comment-author { color: #ffff00; font-weight: bold; font-size: 11px; }
.comment-date { color: #888; font-size: 10px; font-family: Tahoma, sans-serif; }
.comment-body { color: #ccc; font-size: 12px; margin-top: 4px; line-height: 1.5; }

/* ── FORMS ── */
.retro-input {
  width: 100%; padding: 3px; background: #000030;
  color: #fff; border: 1px inset #4444ff;
  font-family: 'Comic Sans MS', cursive; font-size: 12px;
}
.retro-textarea {
  width: 100%; padding: 3px; background: #000030;
  color: #fff; border: 1px inset #4444ff;
  font-family: 'Comic Sans MS', cursive; font-size: 12px;
  resize: vertical;
}
.form-label { font-size: 11px; color: #aaa; margin-bottom: 2px; display: block; }

/* ── AWARD BADGE ── */
.award-badge {
  background: radial-gradient(#ffdd00, #ff8800);
  border: 3px solid #ffdd00; border-radius: 50%;
  width: 70px; height: 70px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; text-align: center;
  font-size: 9px; color: #000; font-weight: bold;
  font-family: Impact, sans-serif; line-height: 1.1;
}

/* ── TAG PILLS ── */
.tag-pill {
  background: #002266; border: 1px solid #4466ff;
  color: #aabbff; font-size: 10px; padding: 1px 6px;
  display: inline-block; margin: 2px 1px;
  font-family: Tahoma, sans-serif;
}

/* ── FOOTER ── */
.site-footer {
  border-top: 3px double #ffff00;
  background: #000020; padding: 4px 8px;
}
.footer-copy {
  text-align: center; font-size: 9px;
  color: #444; font-family: Tahoma, sans-serif;
}

/* ── BREADCRUMB ── */
.breadcrumb {
  background: #000020; padding: 3px 8px;
  font-size: 10px; color: #888;
  font-family: Tahoma, sans-serif;
  border-bottom: 1px solid #222;
}

/* ── WEBRING ── */
.webring {
  border: 2px solid #666; background: #111;
  padding: 4px; text-align: center;
  font-size: 10px; color: #aaa;
  font-family: Tahoma, sans-serif;
}

/* ── GUESTBOOK ── */
.guestbook-entry {
  background: #00001a; border: 1px dashed #444466;
  padding: 8px; margin-bottom: 8px;
}
.gb-author { color: #ffff00; font-weight: bold; font-size: 12px; }
.gb-location { color: #888; font-size: 10px; font-family: Tahoma, sans-serif; }
.gb-msg { color: #ddd; font-size: 12px; margin-top: 4px; line-height: 1.5; }

/* ── STATUS INDICATOR ── */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.status-red { background: #ff0000; animation: blink 1s step-end infinite; }
.status-green { background: #00ff00; }

/* ── PRICING TABLE ── */
.price-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.price-table th {
  background: #003366; color: #ffff00; padding: 6px;
  border: 1px solid #4444ff; text-align: left;
}
.price-table td { padding: 5px 6px; border: 1px solid #222255; color: #ccc; }
.price-table tr:nth-child(even) td { background: #00001a; }
.price-table tr:hover td { background: #001133; }
.price-amount { color: #ffff00; font-weight: bold; font-family: 'Courier New', monospace; }

/* ── TIP / WARNING BOXES ── */
.tip-box {
  background: #001a00; border: 2px dashed #00ff00;
  padding: 8px; margin: 10px 0; font-size: 12px; color: #aaffaa;
}
.warning-box {
  background: #1a0000; border: 2px dashed #ff4444;
  padding: 8px; margin: 10px 0; font-size: 12px; color: #ffaaaa;
}

/* ── POPUP ── */
.popup-ad {
  background: #330000; border: 2px solid #ff4444;
  text-align: center; padding: 6px; margin-bottom: 8px;
}

/* ── 404 ── */
.error-code {
  font-family: Impact, sans-serif;
  font-size: 120px; color: #ff0000;
  text-shadow: 5px 5px 0 #000, -2px -2px 0 #ffff00;
  text-align: center; line-height: 1;
}