/* Original CSS */
body, html {
  background-color: #111118;
  color: #ffffff;
  text-align: center;
  line-height: 1.4;
  overflow: hidden;
  font-family: 'Mona Sans', sans-serif;
}

a, a:link, a:visited, a:hover, a:active, a:focus {
  color: #ffffff; /* Replace #yourColor with your actual color code */
  text-decoration: none; /* Assuming you want to keep links without underlines */
}


@font-face {
  font-family: 'Mona Sans';
  src:        url('fonts/MonaSans-Regular.woff2') format('woff2'), /* Super Modern Browsers */
}

.ball-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ball {
  height: 50%;
  aspect-ratio: 1 / 1;
  border-radius: 60%;
  background: radial-gradient(circle, rgba(84,203,134,0.3) 40%, rgba(86,193,213,0.4) 70%);
  filter: blur(600px);
  transform: translate(-50%, -50%);
  animation: pulse 12s linear infinite;
  transition: all 0.5s;
  -webkit-filter: blur(800px); /* For Safari */
  filter: blur(800px);
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}

.logo {
  width: 20rem;
}

.logo img {
  width: 100%;
  display: block;
}

main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  text-align: center; /* Center align the content */
}



.gradient-button {
  display: block;
  position: relative;
  padding: .5em 1.25em;
  color: transparent;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-fill-color: transparent;
  border: 1px solid transparent;
  border-image: linear-gradient(-90deg, #5ee878, #00c3ff);
  border-image-slice: 1;
  background: linear-gradient(-90deg, #5ee878, #00c3ff);
  -webkit-background-clip: text;
  cursor: pointer;
  transition: .3s;
  border-radius: 20px; /* Rounded corners */
}


.gradient-button:hover {
  color: rgba(255,255,255,.95);
}

.gradient-button:hover::before {
  opacity: 1;
}

.gradient-button::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(0,195,255,0.2) 0%, rgba(94,232,120,0.2) 100%);
  opacity: 0;
  transition: .3s ease;
}

.gradient2-button {
  display: inline-block; /* Ensures the button is only as wide as its content */
  position: relative; /* Necessary for absolute positioning of the span's ::after */
  padding: .5em 1.25em;
  color: #fff; /* White text */
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-decoration: none; /* Removes underline from links if used as a link */
  background: none; /* Clear any previous background settings */
  cursor: pointer;
  transition: .3s;
  border: none; /* Remove border */
}

.gradient2-button span {
  position: relative;
  display: inline-block; /* Ensures the span is only as wide as its content */
}

.gradient2-button span::after {
  content: '';
  position: absolute;
  width: 100%; /* Matches the width of the span content */
  height: 1px; /* Adjust the thickness of the underline */
  background-color: #fff; /* Color of the underline */
  bottom: -5px; /* Adjust distance from the bottom of the text */
  left: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease-in-out;
  visibility: hidden;
}

.gradient2-button:hover span::after {
  visibility: visible;
  transform: scaleX(1);
}


.secondary-button {
  display: inline-block; /* Ensures the button is only as wide as its content */
  position: fixed;
  bottom: 40px; /* Adjust this value as needed */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Adjust for precise centering */
  padding: .5em 1.25em;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: .3s;
  overflow: hidden;
}

.secondary-button span {
  position: relative;
  display: inline-block; /* Ensures the span is only as wide as its content */
}

.secondary-button span::after {
  content: '';
  position: absolute;
  width: 100%; /* Matches the width of the span content */
  height: 1px; /* Adjust the thickness of the underline */
  background-color: #fff; /* Color of the underline */
  bottom: -5px; /* Adjust distance from the bottom of the text */
  left: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease-in-out;
  visibility: hidden;
}

.secondary-button:hover span::after {
  visibility: visible;
  transform: scaleX(1);
}

.secondary-button svg {
  margin-right: 8px; /* Adjust this value to increase or decrease the space */
}


/* Adjustments for Small Screens */
@media (max-width: 768px) {
  .content {
    padding: 20px; /* Add some padding for better spacing */
    text-align: center; /* Center align the content */
  }
  .logo {
    width: 60%; /* Make the logo responsive */
  }
}

/* Increase Tap Target Size */
.gradient-button {
  display: inline-block; /* Change to inline-block to occupy full width */
  padding: 1em 2em; /* Increase padding for larger tap target */
  margin-top: 20px; /* Add some spacing */
}