/* Global reset */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Main content area styling */
.main-content {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 10vw;
    pointer-events: none;
    filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0));  /* Simulate inner shadow effect */
}

/* Gradient text for first line */
.main-content h2 .line-1 {
    /* Gradient for first line */
    background: linear-gradient(45deg, #ffffff, #ffffff85);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 5rem;
    color: transparent;
    pointer-events: auto;
}

/* Gradient text for second line */
.main-content h2 .line-2 {
    /* Gradient for second line */
    background: linear-gradient(45deg, #60b6e5, #4157fd85);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 5rem;
    pointer-events: auto;
}

/* Text selection styling for both lines */
.main-content h2 .line-1::selection,
.main-content h2 .line-2::selection {
    background: rgba(71, 118, 230, 0.5);  /* Semi-transparent blue */
    color: white;
    text-shadow: none;
}

/* Paragraph styling */
.main-content p {
    font-size: 1.5em;
    color: #ffffff95;
    pointer-events: none;      /* Mouse events pass through */
    user-select: none;         /* Text can't be selected */
}

::selection {
  background: rgba(71, 118, 230, 0.4);
  color: white;
}

/* Emoji image styling */
.emoji-img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

/* Button container layout */
.button-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

/* Animated button styling */
.button {
  position: relative;
  overflow: hidden;
  background-color: transparent;
  color: #fff;
  border: 2px solid transparent;  /* Needed for border-image to work */
  padding: 10px 20px;
  font-size: 1.2em;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  width: 200px;
  transition: color 0.3s ease, border-image 0.4s ease;
  pointer-events: auto;
  z-index: 1;
  border-image: linear-gradient(45deg, #ffffff95, #ffffff95) 1;
}

/* Button hover effect */
.button:hover {
  border-image: linear-gradient(45deg, #60b6e570, #4157fd70) 1;
}

/* Button pseudo-element for animation */
.button::before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 150%;
  background: linear-gradient(45deg, #60b6e570, #4157fd70);
  z-index: -1;
  transition: transform 0.4s ease;
  transform: translateY(100%);
}

/* Button animation states */
.button.slide-in::before {
  transform: translateY(-20%);
}

.button.slide-out::before {
  transform: translateY(-150%);
}

/* =================== MEDIA QUERIES =================== */

/* Very Small Devices (up to 320px - old mobiles) */
@media (max-width: 320px) {
  .main-content h2 .line-1,
  .main-content h2 .line-2 {
    font-size: 2rem;
  }

  .main-content p {
    font-size: 1em;
  }

  .button {
    width: 140px;
    padding: 8px 12px;
    font-size: 1em;
  }
}

/* Small Devices (321px to 480px) */
@media (min-width: 321px) and (max-width: 480px) {
  .main-content h2 .line-1,
  .main-content h2 .line-2 {
    font-size: 2.5rem;
  }

  .main-content p {
    font-size: 1.1em;
  }

  .button {
    width: 150px;
    padding: 10px 14px;
    font-size: 1.05em;
  }
}

/* Medium Devices (481px to 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .main-content {
    margin-top: 14vw;
    padding: 0 5vw;
  }

  .main-content h2 .line-1,
  .main-content h2 .line-2 {
    font-size: 3rem;
  }

  .main-content p {
    font-size: 1.2em;
  }

  .button {
    width: 160px;
    font-size: 1.1em;
  }
}

/* Tablets & Small Laptops (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .main-content {
    margin-top: 12vw;
  }

  .main-content h2 .line-1,
  .main-content h2 .line-2 {
    font-size: 3.5rem;
  }

  .main-content p {
    font-size: 1.3em;
  }

  .button {
    width: 180px;
    font-size: 1.15em;
  }
}

/* Standard Laptops (1025px to 1280px) */
@media (min-width: 1025px) and (max-width: 1280px) {
  .main-content {
    margin-top: 10vw;
  }

  .main-content h2 .line-1,
  .main-content h2 .line-2 {
    font-size: 5rem;
  }

  .main-content p {
    font-size: 1.4em;
  }
}

/* Large Screens (1281px to 1536px) */
@media (min-width: 1281px) and (max-width: 1536px) {
  .main-content h2 .line-1,
  .main-content h2 .line-2 {
    font-size: 4.5rem;
  }
}

/* Ultra-Wide Monitors (above 1536px) */
@media (min-width: 1537px) {
  .main-content {
    max-width: 1100px;
  }

  .main-content h2 .line-1,
  .main-content h2 .line-2 {
    font-size: 5.5rem;
  }

  .main-content p {
    font-size: 1.6em;
  }

  .button {
    width: 220px;
    font-size: 1.3em;
  }
}