finished

css/felexdev-themes.css

@@ -7,6 +7,21 @@
     --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     --font-family: 'Arial', sans-serif;
     --text-shadow: 0 2px 4px rgba(150, 150, 150, 0.3);
+    --width: 80vw;
+    --font-size: 1rem;
+}
+
+@media (max-width: 756px) {
+    :root {
+        --font-size: 1.1rem;
+        --width: 92vw;
+    }
+}
+@media (min-width: 757px) and (max-width: 1024px) {
+    :root {
+        --font-size: 1rem;
+        --width: 90vw;
+    }
 }
 
 /* Settings for dark system theme, same as color-sheme-dark */
@@ -46,19 +61,31 @@
     --font-family: Monospace;
 }
 
-html {
+body {
+    margin: auto;
     background-color: var(--bg-color);
     color: var(--text-color);
-    transition: background-color 0.3s ease, color 0.3s ease;
     text-shadow: var(--text-shadow);
     font-family: var(--font-family);
+    transition: background-color 0.3s ease, color 0.3s ease, font-size 0.3s ease;
+    width: var(--width);
+    font-size: var(--font-size);
 }
 a {
     color: var(--text-color);
     transition: background-color 0.3s ease, color 0.3s ease;
     text-shadow: var(--text-shadow);
-    text-decoration: underline;
     font-family: var(--font-family);
+    font-weight: bold;
+    transition:transform 0.3s ease, color 0.3s ease;
+    text-decoration:underline;
+    display:inline-block;
+}
+a:hover, a:focus {
+    transform: scale(1.05);
+    color:var(--accent-color);
+    text-shadow: var(--accent-color);
+    text-decoration: none;
 }
 .button {
     background-color: var(--accent-color);
@@ -72,11 +99,20 @@ a {
 
 #flxd-tm-btn-toggle {
     position: fixed;
-    width: 20px;
-    height: 20px;
-    border-radius: 10px;
+    width: 30px;
+    height: 30px;
     right: 15px;
     top: 15px;
+    border-radius: 18px;
+    padding: 2px;
     filter: drop-shadow(var(--text-shadow));
-    cursor: move;
+    cursor: pointer;
+    background-color: rgba(150, 150, 150, 0.3);
+    transform:rotate(-360deg);
+    transition:transform 2s ease;
+}
+
+#flxd-tm-btn-toggle:hover, #flxd-tm-btn-toggle:focus {
+    transform:rotate(360deg);
+    transition:transform 2s ease;
 }