/* Color palette */
:root {
  --bg: #ffe6f0;
  --header-bg: #ffb3d9;
  --text: #333;
  --accent: #ff66aa;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Times New Roman';
}

.container {
  max-width: 800px;
  margin: 20px auto;
  padding: 10px;
  background: white;
  border: 3px dashed var(--accent);
}

header {
  background: var(--header-bg);
  padding: 10px;
  text-align: center;
}

header h1 {
  margin: 0;
  font-size: 2em;
}

nav a {
  color: var(--accent);
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  text-decoration: underline;
}

main {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.intro {
  flex: 1 1 100%;
  margin-bottom: 20px;
}

.content {
  flex: 2 1 60%;
  padding: 10px;
}

.sidebar {
  flex: 1 1 35%;
  padding: 10px;
  background: var(--bg);
  border-left: 2px dotted var(--accent);
}

footer {
  text-align: center;
  margin-top: 20px;
  font-size: 0.9em;
}
/* Super alarming banner */
.alarm-banner {
  width: 100%;
  background: repeating-linear-gradient(
    45deg,
    #ff0033,
    #ff0033 10px,
    #ff66cc 10px,
    #ff66cc 20px
  );
  border-bottom: 4px solid #ff3399;
  overflow: hidden;
  position: fixed;
  top: 0;
  z-index: 9999;
  height: 50px;
  display: flex;
  align-items: center;
}

/* Scrolling marquee text */
.alarm-marquee {
  white-space: nowrap;
  font-size: 2em;
  font-weight: bold;
  color: yellow;
  text-shadow: 0 0 5px black, 0 0 10px red;
  animation: scroll-left 10s linear infinite, flashColor 1s infinite;
  padding-left: 100%;
}

/* Marquee scroll effect */
@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Flashing text color */
@keyframes flashColor {
  0% {
    color: #ff0;
  }
  50% {
    color: #fff;
  }
  100% {
    color: #ff0;
  }
}

/* Push content down so it’s not hidden behind fixed banner */
body {
  padding-top: 100px; /* Adjust if needed */
}
/* Super alarming banner bottom */
.alarm-banner-bottom {
  width: 100%;
  background: repeating-linear-gradient(
    45deg,
    #ff0033,
    #ff0033 10px,
    #ff66cc 10px,
    #ff66cc 20px
  );
  border-top: 4px solid #ff3399;
  overflow: hidden;
  position: fixed;
  bottom: 0; /* 👈 THIS IS THE KEY DIFFERENCE */
  z-index: 9999;
  height: 50px;
  display: flex;
  align-items: center;
}

/* Clone of alarm-marquee with different animation (optional) */
.alarm-marquee-bottom {
  white-space: nowrap;
  font-size: 2em;
  font-weight: bold;
  color: yellow;
  text-shadow: 0 0 5px black, 0 0 10px red;
  animation: scroll-right 10s linear infinite, flashColor 1s infinite;
  padding-left: 100%;
}

/* Reverse scroll direction (optional for cool effect) */
@keyframes scroll-right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
  /* ================= MARQUEE ANIMATION ================= */

}.alarm-marquee 
{
  white-space: nowrap;
  font-size: 1.4em;
  font-weight: bold;
  animation: scroll-left 10s linear infinite;
  padding-left: 100%;
}

/* Scrolls text from right to left */
@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* ================= TOP BANNER ================= */
.alarm-banner {
  width: 100%;
  background: repeating-linear-gradient(
    45deg,
    #ff0033,
    #ff0033 10px,
    #ff66cc 10px,
    #ff66cc 20px
  );
  border-bottom: 4px solid #ff3399;
  overflow: hidden;
  position: fixed;
  top: 0;
  z-index: 9999;
  height: 50px;
  display: flex;
  align-items: center;
}

/* ================= BOTTOM BANNER ================= */
.alarm-banner-bottom {
  width: 100%;
  background: repeating-linear-gradient(
    45deg,
    #ff0033,
    #ff0033 10px,
    #ff66cc
/* ================= HOPPING PIXEL BUNNY ================= */
{.hopping-bunny {
  position: fixed;
  width: 80px; /* You can adjust as needed */
  z-index: 999; /* Above most elements */
  pointer-events: none; /* So clicks go through to underlying elements */
  animation: hopAround 6s ease-in-out infinite, spin 20s linear infinite;
}

/* Bunny path and hop effect */
@keyframes hopAround {
  0%   { top: 80px; left: 10%; transform: translate(0, 0); }
  25%  { top: 150px; left: 30%; transform: translate(0, -10px); }
  50%  { top: 80px; left: 50%; transform: translate(0, 0); }
  75%  { top: 150px; left: 70%; transform: translate(0, -10px); }
  100% { top: 80px; left: 90%; transform: translate(0, 0); }
}

/* Subtle spin to add extra funkiness */
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

}