:root {
  --primary-color: #fff;
  --background-color: pink;
  --gradient-start: #0e63ec;
  --gradient-end: #eb0d71;
  --hover-color1: #eb0d71;
  --hover-color2: #0e63ec;
  --hover-color3: #1751af;
  --hover-color-rgba: rgba(0, 194, 203, 0.2);
  --glitch-color: rgba(236, 34, 37, 0.2);
  --glitch-color-alt: rgba(0, 194, 203, 0.2);
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--primary-color);
  height: 100vh;
  width: 100%;
  background: var(--background-color);
  display: grid;
  place-items: center;
  overflow-x: hidden; /* Prevent horizontal scroll on mobile */
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: black;
  }

  html,
  body {
    background: var(--background-color);
  }
}

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  text-align: center; /* Ensures all text remains centered */
}

.text-h1 {
  font-size: 10rem; /* Default for larger screens */
  font-weight: 900;
  text-align: center;
  margin: 0;
  padding: 0;
  word-wrap: break-word; /* Prevents long words from breaking layout */
}

.contact-text {
  margin-top: -5px;
  font-size: 0.8rem;
  text-align: center;
  letter-spacing: 0.1rem;
  padding: 0 10px; /* Padding to prevent text from sticking to edges */
}

.contact-text a {
  font-weight: 900;
}

.animated-text {
  background: radial-gradient(
    circle,
    var(--gradient-start),
    var(--gradient-end)
  );
  color: transparent;
  -webkit-background-clip: text; /* Edge, Chrome */
  background-clip: text; /* Safari, FF */
  animation: gradientAnimation 15s linear infinite;
  animation-direction: alternate;
  background-size: 300% 200%;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

h1 {
  position: relative;
  font-size: 150px;
}

h1:hover {
  text-shadow: 0.05em 0 0 var(--hover-color1),
    -0.025em -0.05em 0 var(--hover-color2), 0.025em 0.05em 0 var(--hover-color3);
  color: var(--hover-color-rgba);
}

h1:before,
h1:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.8;
}

h1:hover::before {
  animation: glitch 650ms infinite;
  clip-path: polygon(0 0, 100% 0, 100% 25%, 0 45%);
  transform: translate(-0.025em, -0.0125em);
}

h1:hover::after {
  animation: glitch 375ms infinite;
  clip-path: polygon(0 65%, 100% 20%, 100% 100%, 0 20%);
  transform: translate(0.0125em, 0.025em);
}

@keyframes glitch {
  0% {
    color: var(--glitch-color);
    text-shadow: 0.05em 0 0 var(--hover-color1),
      -0.025em -0.05em 0 var(--hover-color2),
      0.025em 0.05em 0 var(--hover-color3);
  }
  14% {
    text-shadow: 0.05em 0 0 var(--hover-color1),
      -0.025em -0.05em 0 var(--hover-color2),
      0.025em 0.05em 0 var(--hover-color3);
  }
  15% {
    color: var(--hover-color3);
    text-shadow: -0.05em -0.025em 0 var(--hover-color1),
      0.025em -0.025em 0 var(--hover-color2),
      -0.05em -0.05em 0 var(--hover-color3);
  }
  49% {
    text-shadow: -0.05em -0.025em 0 var(--hover-color1),
      0.025em -0.025em 0 var(--hover-color2),
      -0.05em -0.05em 0 var(--hover-color3);
  }
  50% {
    text-shadow: 0.025em 0.05em 0 var(--hover-color1),
      -0.025em 0.05em 0 var(--hover-color2), 0 -0.05em 0 var(--hover-color3);
  }
  99% {
    color: var(--hover-color2);
    text-shadow: 0.025em 0.05em 0 var(--hover-color1),
      -0.025em 0.05em 0 var(--hover-color2), 0 -0.05em 0 var(--hover-color3);
  }
  100% {
    text-shadow: -0.025em 0 0 var(--hover-color1),
      -0.025em -0.025em 0 var(--hover-color2),
      -0.025em -0.05em 0 var(--hover-color3);
  }
}

/* Responsive styles for mobile viewports */
@media (max-width: 768px) {
  .text-h1 {
    font-size: 22vw; /* Fluid font size for mid-size devices */
    line-height: 1.1; /* Adjust line height for better readability */
    margin: 0 10px; /* Add margin for extra spacing on mobile */
  }
  .contact-text {
    font-size: 1rem; /* Slightly larger for readability on mobile */
    margin-top: 20px; /* Reduce negative margin */
  }
}

@media (max-width: 480px) {
  .text-h1 {
    font-size: 22vw; /* Further scale down for small devices */
    line-height: 1.2; /* Slightly taller line-height to prevent overlapping */
    margin: 0 15px; /* Ensure margin to avoid text hitting edges */
  }
  .contact-text {
    font-size: 1rem; /* Maintain readable size */
    margin-top: 10px; /* Adjust margin for small devices */
    padding: 0 20px; /* Add more padding for narrow devices */
  }

  /* Ensure container adapts well to smaller screens */
  .container {
    padding: 0 10px; /* Extra padding to prevent cramped layout */
  }
}

@media (max-width: 320px) {
  .text-h1 {
    font-size: 22vw; /* Ensure very small devices still display text well */
  }
  .contact-text {
    font-size: 0.9rem; /* Slight reduction for very narrow screens */
  }
}