Organize selectors

diff --git a/style.css b/style.css
index c26abd69c27e003188db73fb390b5601ad564a70..459ce3ef28d14624997306bd2943d8b17d1a017a 100644 (file)
--- a/style.css
+++ b/style.css
@@ -14,6 +14,10 @@ footer {
   justify-content: center;
 }
 
+footer {
+  margin-block: 8px;
+}
+
 main {
   inline-size: min(1080px, 100% - 16px);
   margin-inline: auto;
@@ -34,6 +38,12 @@ input {
   transition: filter 800ms;
 }
 
+input:hover,
+input:focus-within {
+  filter: drop-shadow(0 0 8px hsl(222deg 50% 50%));
+  transition: filter 400ms;
+}
+
 div#visualizations {
   inline-size: fit-content;
   margin-inline: auto;
@@ -43,16 +53,6 @@ div#visualizations {
   justify-content: center;
 }
 
-input:hover,
-input:focus-within {
-  filter: drop-shadow(0 0 8px hsl(222deg 50% 50%));
-  transition: filter 400ms;
-}
-
-footer {
-  margin-block: 8px;
-}
-
 a {
   line-height: 0;
   background: hsl(222deg 50% 30%);
@@ -87,6 +87,7 @@ a>svg {
   transition: opacity 200ms;
 }
 
+/* These keyframes are used in the al-point-visualization template styling, but must be declared globally */
 @keyframes slideIn {
   from {
     transform: translateY(-100%);