body {
  font-family: "Jersey 10", sans-serif;
  background-color: #ffffff; /* Background color from 'bgcolor' attribute */
  color: #fff; /* Text color from 'text' attribute */
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.6;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32"><text y="24" font-size="24">%F0%9F%96%8C%EF%B8%8F</text></svg>'),
    auto;
}

canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1; /* Ensures it's behind your existing content */
}

#emoji-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Place behind the interactive content */
  pointer-events: auto; /* Ensure it doesn't block clicks */
}

.container {
  /* Centering styles as before */
  position: absolute;
  margin: 0px auto;
  padding: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%; /* Adjust as needed */
  z-index: 2; /* Higher z-index to appear above emojis */
}

h1,
h2,
p,
ul,
address {
  margin: 10px auto;
}

ul {
  list-style-type: none; /* Remove bullets */
  padding: 0;
  margin: 0;
}

li {
  margin-bottom: 10px;
}

hr {
  width: 50%; /* Adjust as needed */
  margin: 20px auto;
}

a {
  position: relative;
  z-index: 3; /* Ensure links are on top of other layers */
  pointer-events: auto; /* Allow clicks */
}

/* Link colors from the 'link', 'vlink', and 'alink' attributes */
/* a:link {
  color: whitesmoke;
} */
a:visited {
  color: #551a8b;
}
a:active {
  color: green;
}

/* Style for the phone link */
.phone-link {
  position: relative;
  color: whitesmoke; /* Default link color */
  text-decoration: none; /* Remove underline */
  font-weight: bold;
  pointer-events: auto; /* Ensure links receive pointer events */
  z-index: 3;
  animation: colorChange 4s infinite ease-in-out;
}

/* Change color on hover */
.phone-link:hover {
  color: rgb(42, 150, 42); /* 'alink' color */
}

/* Adjust font sizes for better mobile readability */
h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

p,
li,
address {
  font-size: 1.3em;
}

/* Responsive adjustments using media queries */
@media (max-width: 480px) {
  h1 {
    font-size: 1.5em;
  }
  h2 {
    font-size: 1.2em;
  }
  p,
  li,
  address {
    font-size: 0.9em;
  }
  hr {
    width: 90%;
  }
}

.emoji {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 24px;
  pointer-events: none; /* Prevent interference with events */
}

@keyframes buzzing {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-5deg);
  }
  40% {
    transform: rotate(5deg);
  }
  60% {
    transform: rotate(-5deg);
  }
  80% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* Apply the animation to the call-text */
.call-text {
  display: inline-block;
  animation: buzzing 0.5s infinite;
  transform-origin: center;
}

@keyframes mailbox {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-5px);
  }
  40% {
    transform: translateY(0);
  }
  60% {
    transform: translateY(-5px);
  }
  80% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

/* Apply the animation to the email-text */
.email-text {
  display: inline-block;
  animation: mailbox 2s infinite;
  z-index: 3;
}

/* Optionally, style the email-link */
.email-link {
  position: relative;
  color: whitesmoke; /* Default link color */
  text-decoration: none; /* Remove underline */
  font-weight: bold;
  pointer-events: auto;
  z-index: 3; /* Ensure links receive pointer events */
  animation: colorChange 4s infinite ease-in-out;
}

.email-link:hover {
  color: rgb(211, 0, 0); /* 'alink' color */
  text-decoration: underline;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Keyframes for Slide In from Left */
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Keyframes for Scale Up */
@keyframes scaleUp {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Keyframes for Rotate In */
@keyframes rotateIn {
  from {
    transform: rotate(-360deg);
    opacity: 0;
  }
  to {
    transform: rotate(0deg);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes flipIn {
  from {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  to {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

/* Apply animations to list items */
.ul-animations li {
  opacity: 0;
}

.ul-animations li:nth-child(1) {
  animation: fadeIn 1.5s ease-in-out forwards;
  animation-delay: 0s;
}

.ul-animations li:nth-child(2) {
  animation: fadeIn 1s ease-in-out forwards;
  animation-delay: 0.5s;
}

.ul-animations li:nth-child(3) {
  animation: fadeIn 1s ease-in-out forwards;
  animation-delay: 1s;
}

.ul-animations li:nth-child(4) {
  animation: fadeIn 1s ease-in-out forwards;
  animation-delay: 1.5s;
}
.ul-animations li:nth-child(5) {
  animation: flipIn 1s ease-in-out forwards;
  animation-delay: 2.4s;
}

/* Hover effect */
.ul-animations li:hover {
  transform: scale(1.05);
  transition: transform 0.3s;
}

@keyframes colorChange {
  0% {
    color: #ff5733;
  } /* Vibrant Red */
  25% {
    color: #ffc300;
  } /* Vibrant Yellow */
  50% {
    color: #28a745;
  } /* Vibrant Green */
  75% {
    color: #007bff;
  } /* Vibrant Blue */
  100% {
    color: #ff5733;
  } /* Loop back to Vibrant Red */
}

/* Keyframes for smooth jumping */
@keyframes jump {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* Style for h2 letters */
h2.h2-animation span {
  display: inline-block;
  animation: colorChange 4s infinite ease-in-out, jump 1.5s infinite ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: calc(var(--char-index) * 0.1s);
  /* Optional: Add text shadow for better readability */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

h2.h2-animation span {
  animation-play-state: running;
}

address {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 10px 0;
}

.token-link {
  position: relative;
  text-decoration: none; /* Remove underline */
  font-weight: bold;
  pointer-events: auto;
  z-index: 3; /* Ensure links receive pointer events */
  animation: colorChange 4s infinite ease-in-out;
}