body {
  background-color: #111;
  color: #f5f5f5;
  font-family: monospace;
  font-size: 1rem; /* Base font size */
}

.btn-primary {
  background-color: #bb0000;
  border-color: #bb0000;
  font-weight: bold;
}

.btn-primary:hover {
  background-color: #dd0000;
  border-color: #dd0000;
}

.response-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #666;
}

h2 {
  font-weight: 700;
  color: #bb0000;
  font-size: 2rem; /* Base h2 font size */
}

footer {
  font-size: 0.95rem; /* Base footer font size */
}

footer .footer-link {
  color: #ccc;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

footer .footer-link:hover {
  color: #ff4444;
}

.bg-dark {
  background-color: #111 !important;
}

.btn-outline-danger {
  border-color: #bb0000;
  color: #bb0000;
}

.btn-outline-danger:hover {
  background-color: #bb0000;
  color: white;
}

.ad-banner img {
  object-fit: cover;
  max-width: 100%;
}

footer a:hover {
  color: #ff4444 !important;
}


/* Media Query for smaller screens */
@media (max-width: 768px) {
  body {
    font-size: 0.9rem; /* Smaller font size for mobile */
  }

  h2 {
    font-size: 1.5rem; /* Smaller h2 font size for mobile */
  }

  footer {
    font-size: 0.85rem; /* Smaller footer font size for mobile */
  }

  .response-avatar {
    width: 50px; /* Slightly smaller avatar */
    height: 50px;
  }

  .response-box {
    padding: 0.8rem; /* Adjust padding if needed */
  }
}

@media (max-width: 480px) {
  body {
    font-size: 0.85rem; /* Even smaller font size for very small screens */
  }

  h2 {
    font-size: 1.3rem; /* Smaller h2 for very small screens */
  }

  footer {
    font-size: 0.8rem; /* Smaller footer for very small screens */
  }
}