1 files changed, 21 insertions, 49 deletions

diff --git a/static/input.css b/static/input.css
index c308796..d03764b 100644
--- a/static/input.css
+++ b/static/input.css
@@ -239,7 +239,7 @@ a:hover, .linklike:hover {
 .bg-sidebar {
     background-image: var(--squares-and-triangles-background);
     background-repeat: var(--squares-and-triangles-background-repeat);
-    background-size: calc(var(--squares-and-triangles-background-width-coef) * 1rem) calc(var(--squares-and-triangles-background-height-coef) * 1rem);
+    background-size: calc(var(--squares-and-triangles-background-width-coef) * 0.8rem) calc(var(--squares-and-triangles-background-height-coef) * 0.8rem);
 }
 
 .logo-custom {
@@ -268,10 +268,13 @@ a:hover, .linklike:hover {
 
 .theme-wheel {
     position: fixed;
-    width: 12rem;
-    height: 12rem;
-    box-shadow: 0.25rem 0.25rem 0.25rem var(--main-light-color);
+    width: 15vmax;
+    height: 15vmax;
     border-radius: 50%;
+    background: var(--background-light-color);
+    opacity: 0.8;
+    border: 1vmax outset var(--background-dark-color);
+    box-shadow: 0 0 5vmax var(--main-light-color);
     opacity: 0;
     visibility: hidden;
     transform: scale(0.5);
@@ -287,56 +290,26 @@ a:hover, .linklike:hover {
 
 .theme-icon {
     position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
+    width: 4rem;
+    height: 4rem;
+    border-radius: 50%;
     cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     transition: all 0.3s ease;
-    color: white;
+    border: 0.1rem inset var(--background-light-color);
     background: var(--interlocked-hexagons-background);
-    background-size: 100% 100%;
-    font-size: 1.5rem;
+    background-size: contain;
 }
 
 .theme-icon:hover {
-    filter: brightness(1.2);
-}
-
-.theme-icon i {
-    position: absolute;
-    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
-    z-index: 1;
+    transform: scale(1.2);
 }
 
 .theme-icon.active {
-    filter: brightness(1.3);
-}
-
-.theme-icon.active::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(255, 255, 255, 0.25);
-    pointer-events: none;
-    clip-path: inherit;
-}
-
-.theme-pin {
-    position: relative;
-    background: color-mix(in srgb, var(--main-light-color) 75%, transparent);
-    box-shadow: 0rem 0rem 1rem var(--main-dark-color);
-    border: 0.5rem solid color-mix(in srgb, var(--main-light-color) 90%, transparent);
-    backdrop-filter: blur(2px);
-    top: 35%;
-    left: 35%;
-    width: 30%;
-    height: 30%;
-    z-index: 1002;
-    border-radius: 50%;
+    transform: scale(1.2);
+    border: 0.3rem outset var(--main-light-color);
 }
 
 .custom-svg-marker {
@@ -377,7 +350,7 @@ a:hover, .linklike:hover {
     margin-top: 0.25rem;
     border-radius: 0.5rem;
     position: absolute;
-    z-index: 1001;
+    z-index: 15;
 }
 
 .grid-tooltip:hover .grid-tooltip-text {
@@ -435,7 +408,7 @@ a:hover, .linklike:hover {
     }
 }
 
-@container main (width >= 56rem) {
+@container main (width >= 48rem) {
     .grid-item, .grid-sizer {
         width: 25%;
     }
@@ -445,7 +418,7 @@ a:hover, .linklike:hover {
     }
 }
 
-@container main (width >= 96rem) {
+@container main (width >= 64rem) {
     .grid-item, .grid-sizer {
         width: 20%;
     }
@@ -495,7 +468,6 @@ a:hover, .linklike:hover {
 .gslide-description {
     flex-grow: 0;
     flex-shrink: 1;
-    flex-basis: 0;
 }
 
 .map-container .leaflet-container {