/* ===== GLOBAL ===== */
    body {
  margin: 0;
  font-family: "Comic Sans MS", Tahoma, Arial, sans-serif;

  background-color: #7a005c;
  background-image:
    linear-gradient(45deg, #300a53 25%, transparent 25%),
    linear-gradient(-45deg, #300a53 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #300a53 75%),
    linear-gradient(-45deg, transparent 75%, #300a53 75%);
  background-size: 60px 60px;
  background-position: 0 0, 0 30px, 30px -30px, -30px 0;
    }

    a {
      color: #150336;
      font-weight: bold;
    }

    /* ===== TOP NAV ===== */
    .top-bar {
      background: #300a53;
      border-bottom: 4px ridge #270e49;
      padding: 10px;
      text-align: center;
    }

    .nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }

    .nav a {
      background: #1d73d6;
      border: 3px outset #75003b;
      padding: 6px 14px;
      text-transform: uppercase;
      font-size: 14px;
    }

    .nav a:active {
      border: 3px inset #ff0000;
    }

    /* ===== PAGE WRAPPER ===== */
    .container {
      max-width: 1100px;
      margin: 20px auto;
      background: #ffffff;
      border: 5px ridge #000;
      padding: 10px;
    }

    h1 {
      text-align: center;
      background: #300a53;
      color: #ffff00;
      border: 4px double #000;
      padding: 10px;
      font-size: 26px;
      text-shadow: 2px 2px #000;
    }

    /* ===== BADGES ===== */
    .badges {
      text-align: center;
      margin: 15px 0;
    }

    .badges img {

      margin: 4px;
      border: 2px solid #000;
    }

    /* ===== CONTENT ===== */
    .content {
      display: flex;
      gap: 15px;
    }

    .flex-wrap {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.flex-wrap img {
  border: 2px solid #000;
}

@media (max-width: 700px) {
  .flex-wrap {
    flex-direction: column;
  }
}


    .box {
      flex: 1;
      background: #f0f0f0;
      border: 3px solid #000;
      padding: 10px;
    }

    /* ===== HOVER IMAGE SWAP ===== */
    .hover-img {
      position: relative;
      width: 100%;
      max-width: 300px;
      margin: 0 auto 10px;
      border: 3px solid #000;
    }

    .hover-img img {
      width: 100%;
      display: block;
    }

    .hover-img .hover {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: opacity 0.2s linear;
    }

    /* Desktop hover */
    .hover-img:hover .hover {
      opacity: 1;
    }

    /* Mobile tap support */
    .hover-img:active .hover {
      opacity: 1;
    }

    /* ===== FOOTER ===== */
    .footer {
      margin-top: 20px;
      padding: 10px;
      text-align: center;
      font-size: 12px;
      background: #cccccc;
      border-top: 3px solid #000;
    }

    /* ===== MOBILE ===== */
    @media (max-width: 750px) {
      .content {
        flex-direction: column;
      }

      h1 {
        font-size: 22px;
      }
    }

    .visitor-counter {
  margin-top: 10px;
  font-family: "Courier New", monospace;
  background: #000;
  color: #00aeff;
  padding: 6px 10px;
  display: inline-block;
  border: 2px inset #333;
}

.bounce {
  position: relative;
  animation: bounce 2s infinite;
  text-align: center;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(50px); }
}