Language selector

src/components/Controls.module.css

@@ -7,7 +7,13 @@
   padding: 18px;
   border-radius: 12px;
   width: 64px;
-  height: 200px;
+}
+
+.chapters {
+  position: relative;
+  height: calc(64px * 3);
+  width: 100%;
+  margin-bottom: 32px;
 }
 
 .controlsWrapper, .gooWrapper {
@@ -16,8 +22,6 @@
   left: 0;
   width: 100%;
   height: 100%;
-  padding: 18px;
-  box-sizing: border-box;
 }
 
 .gooWrapper {
@@ -27,7 +31,7 @@
 .control, .blob {
   position: absolute;
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
   cursor: pointer;
 }
 
@@ -35,7 +39,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: calc(100% - 36px);
+  width: 100%;
   height: auto;
   padding: 18px;
   box-sizing: border-box;
@@ -47,9 +51,9 @@
 
 .blob {
   background: var(--clr-bg);
-  border-radius: 16px;
+  border-radius: 20px;
   aspect-ratio: 1/1;
-  transition: all .5s;
+  transition: width .6s, height .6s;
   width: 0;
   height: 0;
 }
@@ -60,13 +64,13 @@
 }
 
 .control:nth-child(1), .blob:nth-child(1) {
-  top: 60px;
+  
 }
 
 .control:nth-child(2), .blob:nth-child(2) {
-  top: 120px;
+  top: 70px;
 }
 
 .control:nth-child(3), .blob:nth-child(3) {
-  top: 180px;
+  top: calc(70px * 2);
 }