<style>
main ul li a {
  display: block;
  padding: 15px 20px;
  margin-bottom: 10px;
  text-decoration: none;
  border-radius: 20px; /* Pill shape */
  transform: scale(1);
  transition: background-color 0.3s ease, transform 0.2s ease-in-out;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  display: flex; /* Use flexbox for alignment */
  align-items: center; /* Vertically align items in the center */
}

main ul li a span.emoji {
  margin-right: 15px; /* Add some space between the emoji and text */
  font-size: 1.2em; /* Adjust emoji size if needed */
}

main ul li a span.link-text {
  flex-grow: 1; /* Allow the text to take up remaining space */
  text-align: center; /* Center the text horizontally */
}

main ul li a:hover {
  transform: scale(1.05); /* Slightly scale up on hover */
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
  opacity: 0.8; /* Slightly fade on hover */
}

main ul li:nth-child(1) a {background: linear-gradient(to right, #007bff, #66a3ff); border: 2px solid #d3a006}
main ul li:nth-child(1) a:hover {border-color: #ea9c0b;}

main ul li:nth-child(2) a {background: linear-gradient(to right, #1da1f2, #72bfef); border: 2px solid #c2d306}
main ul li:nth-child(2) a:hover {border-color: #d5df63;}

main ul li:nth-child(3) a {background: linear-gradient(to right, #444444, #8e8e8f); border: 2px solid #d3a006}
main ul li:nth-child(3) a:hover {border-color: #e7ee0c;}

/** ETC For all li elements **/
</style>


<main>
        <p>Intro Text</p>
        <ul>

            <li><a href="#"><span class="emoji">🧵</span><span class="link-text"><span class="link-text">Link 1</span></a></li>
            <li><a href="#"><span class="emoji">☁️</span><span class="link-text"><span class="link-text">link 2</span></a></li>
            <li><a href="#"><span class="emoji">✒️</span><span class="link-text"><span class="link-text">Link 3</span></a></li>
            <!-- More Links-->
        </ul>
</main>