#bg-video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100; /* Keeps the video behind your text and content */
  object-fit: cover; /* Ensures the video stretches without distorting */
}

.press-start-2p-regular {
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
}
/* ============ TOM DOBIS FOR PRESIDENT — style.css ============ */
/* Hand-crafted in Notepad. Do not steal. (You may steal.) */

body {
  background-color: #000040;
  background-image:
    radial-gradient(#ffffff 1px, transparent 1.5px),
    radial-gradient(#99ccff 1px, transparent 1.5px),
    radial-gradient(#ffffff 1.2px, transparent 1.8px);
  background-size: 80px 80px, 120px 120px, 200px 200px;
  background-position: 0 0, 40px 60px, 90px 20px;
  font-family: "Times New Roman", Times, serif;
  color: #000080;
  margin: 0;
  cursor: crosshair;
}

#page {
  width: 780px;
  margin: 24px auto;
  background: #ffffee;
  border: 6px ridge #d4af37;
  box-shadow: 0 0 30px #ff0000, 0 0 60px #0000ff;
}

/* ---------- header ---------- */
.flag-stripes {
  height: 20px;
  background: repeating-linear-gradient(to bottom,
    #b22234 0px, #b22234 6px,
    #ffffff 6px, #ffffff 12px);
  border-bottom: 3px solid #3c3b6e;
}

header { text-align: center; padding: 10px 0 0; }

.top-marquee {
  background: #3c3b6e;
  color: #ffd700;
  font-weight: bold;
  padding: 4px 0;
  border-top: 2px solid #ffd700;
  border-bottom: 2px solid #ffd700;
}

h1 {
  font-family: Impact, "Arial Black", fantasy;
  font-size: 54px;
  letter-spacing: 4px;
  margin: 12px 0 0;
  color: #d4af37;
  text-shadow: 2px 2px 0 #b22234, 4px 4px 0 #3c3b6e;
}

.eagle { display: inline-block; font-size: 48px; text-shadow: none; }

.subtitle {
  font-style: italic;
  font-weight: bold;
  color: #b22234;
  letter-spacing: 2px;
  margin: 4px 0 10px;
}

/* spinning campaign seal */
.seal-wrap { margin: 6px 0; }
.seal {
  width: 90px; height: 90px;
  margin: 0 auto;
  border-radius: 50%;
  border: 5px double #ffd700;
  background: radial-gradient(circle, #3c3b6e 40%, #1a1a4e 100%);
  color: #ffd700;
  font-family: Impact, "Arial Black", fantasy;
  font-size: 14px;
  line-height: 1.2;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  animation: spin 8s linear infinite;
}

.news-marquee {
  background: #b22234;
  color: #ffffff;
  font-weight: bold;
  padding: 4px 0;
  border-top: 2px solid #fff;
}

/* ---------- nav ---------- */
nav { text-align: center; padding: 10px 4px; background: #3c3b6e; border-top: 3px solid #b22234; }

.btn {
  display: inline-block;
  background: #c0c0c0;
  color: #000;
  border: 3px outset #e8e8e8;
  padding: 5px 10px;
  margin: 3px;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-weight: bold;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: #ffd700; }
.btn:active { border-style: inset; }
.btn.danger { color: #b22234; }

/* ---------- layout ---------- */
table.layout td { border: none; }
.sidebar { background: #dbe4ff; border-left: 2px dashed #3c3b6e !important; border-right: 2px dashed #3c3b6e !important; }

.box {
  border: 3px groove #3c3b6e;
  background: #ffffff;
  margin: 8px;
  padding: 8px;
}
.box-title {
  background: linear-gradient(to right, #b22234, #3c3b6e);
  color: #ffd700;
  font-family: "Comic Sans MS", cursive;
  font-weight: bold;
  text-align: center;
  padding: 3px;
  margin: -8px -8px 8px;
  letter-spacing: 1px;
}
.center { text-align: center; }
.gold { color: #b8860b; }

a { color: #0000ee; }
a:visited { color: #551a8b; }

/* ---------- classic effects ---------- */
.blink { animation: blink 1s step-start infinite; color: #b22234; font-weight: bold; }
@keyframes blink { 50% { opacity: 0; } }

.new-badge {
  color: #ff0000;
  font-weight: bold;
  font-size: 12px;
  display: inline-block;
  animation: bounceNew .6s ease-in-out infinite alternate;
}
@keyframes bounceNew { from { transform: translateY(0) } to { transform: translateY(-3px) } }

.spin    { animation: spin 4s linear infinite; }
.spin-rev{ animation: spinRev 4s linear infinite; }
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes spinRev { to { transform: rotate(-360deg); } }

.big-flag { font-size: 72px; display: inline-block; cursor: pointer; }
.wave { animation: wave 2s ease-in-out infinite; transform-origin: left center; }
@keyframes wave {
  0%,100% { transform: rotate(-6deg) scaleX(1); }
  50%     { transform: rotate(6deg)  scaleX(0.92); }
}

hr.rainbow {
  border: 0; height: 8px; margin: 0;
  background: linear-gradient(to right, #b22234, #ff8c00, #ffd700, #228b22, #3c3b6e, #8b008b);
}

.construction { animation: bounceNew .5s ease-in-out infinite alternate; }
.midi { text-align: center; font-family: "Comic Sans MS", cursive; }

/* ---------- counter + clock ---------- */
.counter {
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 22px;
  background: #000;
  color: #00ff00;
  display: inline-block;
  padding: 4px 10px;
  border: 3px inset #555;
  letter-spacing: 3px;
}
.clock { font-family: "Courier New", monospace; font-weight: bold; color: #b22234; }

/* ---------- guestbook ---------- */
#guestbook .entry {
  border-bottom: 1px dotted #3c3b6e;
  margin: 4px 0; padding-bottom: 4px;
}

/* ---------- footer ---------- */
footer { text-align: center; padding: 12px; background: #3c3b6e; color: #fff; }
footer small { color: #cfd3ff; }
.webring { font-family: "Comic Sans MS", cursive; color: #ffd700; }

.badge {
  display: inline-block;
  border: 2px outset #e8e8e8;
  background: #c0c0c0;
  color: #000;
  font-family: Verdana, sans-serif;
  font-size: 10px;
  font-weight: bold;
  padding: 3px 6px;
  margin: 3px;
}

/* ---------- JS sparkle trail + fireworks ---------- */
.trail-star {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  animation: trailFade .8s ease-out forwards;
}
@keyframes trailFade {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(30px) scale(.3); }
}

.firework {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-size: 28px;
  animation: boom 1s ease-out forwards;
}
@keyframes boom {
  from { opacity: 1; transform: translate(0,0) scale(.5); }
  to   { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.6); }
}