.email {
  border-radius: 24px;
  position: fixed;
  right: -200px; /* Adjust this value as needed for larger screens */
  z-index: -2;
  transform: rotate(7.5deg);
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.6);
  top: 15%;
  width: 600px; /* Consider making this dynamic or smaller for smaller screens */
}

.email2 {
  border-radius: 24px;
  position: fixed;
  right: -200px; /* Adjust this value as needed for larger screens */
  z-index: -3;
  transform: rotate(10deg);
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.6);
  top: 15%;
  width: 600px; /* Consider making this dynamic or smaller for smaller screens */
}

.email3 {
  border-radius: 24px;
  position: fixed;
  right: -200px; /* Adjust this value as needed for larger screens */
  z-index: -4;
  top: 15%;
  transform: rotate(12.5deg);
  width: 600px; /* Consider making this dynamic or smaller for smaller screens */
}

/* Example media query for screens smaller than 768px (like tablets) */
@media (max-width: 1500px) {
  .email,
  .email2,
  .email3 {
    bottom: unset;
    top: 15%;
    right: -150px;
    width: 550px; /* Smaller width to fit smaller screens */
  }
}

/* Example media query for screens smaller than 480px (like phones) */
@media (max-width: 1180px) {
  .email {
    right: 0%; /* Adjust positioning for very small screens */
    width: 550px; /* Further reduce the width for small screens */
    top: 20%; /* Optionally adjust the vertical positioning */
    filter: blur(2px);
    opacity: 0.1;
  }
  .email2,
  .email3 {
    display: none;
  }
}

body {
  background-color: #1b2838;
  /* Steam store style: blue glow under a navy header band, plus the subtle pattern */
  background-image: radial-gradient(ellipse 80% 420px at 50% 0, rgba(42, 71, 94, 0.55), transparent), linear-gradient(#171a21, #1b2838 360px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='126' height='84' viewBox='0 0 126 84'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.005'%3E%3Cpath d='M126 83v1H0v-2h40V42H0v-2h40V0h2v40h40V0h2v40h40V0h2v83zm-2-1V42H84v40h40zM82 42H42v40h40V42zm-50-6a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM8 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm96 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm-42 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm30-12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM20 54a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm12 24a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM8 54a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM8 78a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm12 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm54 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM50 54a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM50 78a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm54-12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm12 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM92 54a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM92 78a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24-42a4 4 0 1 1 0-8 4 4 0 0 1 0 8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}