body, h3, h1, h4, span, h5, h6, p{
    font-family: "Press Start 2P", system-ui;
      font-weight: 400;
  font-style: normal;
}

 #meme-img {
      max-width: 300px;
      transition: transform 0.2s ease;
    }
    .spit {
      transform: rotate(-10deg) scale(1.1);
    }

    .next-btn{
            font-family: "Press Start 2P", system-ui;
      font-weight: 400;
  font-style: normal;
    }
     .btn-like {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.3s, box-shadow 0.3s;
  }
  .btn-like:hover, 
  .btn-like:focus {
    background-color: #343a40; 
    color: white;
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
    outline: none; 
  }
  .btn-like:focus-visible {
    outline: 2px solid #0d6efd; 
    outline-offset: 2px;
  }

    .img-box {
    width: 100%;
    aspect-ratio: 1 / 1; 
    border-radius: 8px;
  }

  .img-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
  }

  .img-box img:hover {
    transform: scale(1.05);
  }

    header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: white;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 10px 40px;
  }

  header a {
    text-decoration: none;
    color: black;
  }

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

  .social-icons svg,
  .social-icons img {
    transition: transform 0.2s;
  }

  .social-icons svg:hover,
  .social-icons img:hover {
    transform: scale(1.1);
  }

  .nav-link {
    margin-left: 20px;
    font-weight: 600;
    font-size: 16px;
  }

  .buy-btn {
    margin-left: 20px;
    font-size: 16px;
    padding: 10px 20px;
  }

  body {
    padding-top: 80px;
  }

  .how-to-buy-section h2 {
  font-family: 'Press Start 2P', system-ui;
  font-size: 24px;
  font-weight: 400;
}

.step-box {
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

.step-box:hover {
  transform: scale(1.03);
  background-color: #f8f9fa;
}

#paint-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
}

.img-box img:hover {
  transform: scale(1.03) rotate(-0.2deg);
}

@keyframes wiggle {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(1deg); }
  30% { transform: rotate(-1.5deg); }
  45% { transform: rotate(1.5deg); }
  60% { transform: rotate(-1deg); }
  75% { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}

#next-btn:hover {
  animation: wiggle 0.4s ease-in-out;
}

@keyframes pulse-up {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05) translateY(-3px); }
}

#next-btn {
  animation: pulse-up 2s infinite ease-in-out;
}

#memes-grid .col {
  padding: 25px !important; 
}