adding any-hover

src/components/ThemeToggle.astro

@@ -5,7 +5,7 @@ import MoonIcon from "@/icons/moon.astro"
 
 <button
   id="themeToggle"
-  class="inline-flex text-primary transition md:hover:scale-125 md:hover:opacity-70"
+  class="inline-flex text-primary transition any-hover:scale-125 any-hover:opacity-70"
 >
   <SunIcon
     class="opacity-100 transition-transform dark:-rotate-90 dark:opacity-0"

src/sections/Footer.astro

@@ -8,7 +8,7 @@ import XIcon from "@/icons/x.astro"
   class="mt-20 w-full border-primary border-t-2 flex flex-col md:flex-row place-items-center md:justify-between pt-6 pb-20"
 >
   <span class="text-primary text-center">
-    &copy; 2024 La Velada del Año <span
+    &#169; 2024 La Velada del Año <span
       aria-hidden="true"
       class="hidden md:inline">|</span
     ><br aria-hidden="true" class="block md:hidden" /> Todos los derechos reservados.
@@ -25,7 +25,7 @@ import XIcon from "@/icons/x.astro"
           rel="noopener"
           aria-label="Instagram de la velada"
           href="https://www.instagram.com/infolavelada"
-          class="md:hover:scale-125 md:hover:opacity-70 transition inline-block"
+          class="any-hover:scale-125 any-hover:opacity-70 transition inline-block"
         >
           <InstagramIcon class="text-primary" />
         </a>
@@ -36,7 +36,7 @@ import XIcon from "@/icons/x.astro"
           rel="noopener"
           aria-label="X de la velada"
           href="https://x.com/infoLaVelada"
-          class="md:hover:scale-125 md:hover:opacity-70 transition inline-block"
+          class="any-hover:scale-125 any-hover:opacity-70 transition inline-block"
         >
           <XIcon class="text-primary" />
         </a>

tailwind.config.mjs

@@ -13,5 +13,7 @@ export default {
 		},
 	},
 	darkMode: 'class',
-	plugins: [animations],
+	plugins: [animations, function ({ addVariant }) {
+		addVariant("any-hover", "@media (any-hover: hover) { &:hover }")
+	}],
 }