diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..e43b0f9
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/muson/index.html b/muson/index.html
index ac1dcc4..ea002e8 100644
--- a/muson/index.html
+++ b/muson/index.html
@@ -4,147 +4,154 @@
 
 <!-- Inspired by the Muson toy synth -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html>
     <head>
-        <link rel="stylesheet" href="style.css">
+        <link rel="stylesheet" href="style.css" />
+        <script src="./index.js"></script>
     </head>
     <body>
-      <div class="muson" aria-label="Muson Synth Illustration">
-        <div class="top-bar">
-          <div class="speaker-bar"><div class="speakers"></div></div>
-          <div class="muson-frame"><div class="rainbow"></div></div>
-        </div>
-        <div class="range-container" aria-hidden="true">
-          <div class="range-plate">
-            <div class="left">
-              <ul class="ranges">
-                <li>1–4</li>
-                <li>1–6</li>
-                <li>1–8</li>
-                <li>1–10</li>
-              </ul>
-              <p>Range</p>
-              <div class="slider-wrapper">
-                <div class="slider"></div>
-              </div>
+        <div class="muson" aria-label="Muson Synth Illustration">
+            <div class="top-bar">
+                <div class="speaker-bar"><div class="speakers"></div></div>
+                <div class="muson-frame">
+                    <div class="rainbow">
+                        MUS&nbsp;&nbsp;N
+                        <span class="line1">SYNTHESIZER</span>
+                        <span class="line2">THE SOUND OF MUSIC™</span>
+                    </div>
+                </div>
             </div>
-            <div class="center">
-              <p>Volume</p>
-              <ul>
-                <li>Lo</li>
-                <li>Med</li>
-                <li>High</li>
-              </ul>
-              <div class="switch-wrapper">
-                <div class="switch-button"></div>
-              </div>
+            <div class="range-container" aria-hidden="true">
+                <div class="range-plate">
+                    <div class="left">
+                        <ul class="ranges">
+                            <li>1–4</li>
+                            <li>1–6</li>
+                            <li>1–8</li>
+                            <li>1–10</li>
+                        </ul>
+                        <p>Range</p>
+                        <div class="slider-wrapper">
+                            <div class="slider"></div>
+                        </div>
+                    </div>
+                    <div class="center">
+                        <p>Volume</p>
+                        <ul>
+                            <li>Lo</li>
+                            <li>Med</li>
+                            <li>High</li>
+                        </ul>
+                        <div class="switch-wrapper">
+                            <div class="switch-button"></div>
+                        </div>
+                    </div>
+                    <div class="right">
+                        <p>Mode</p>
+                        <ul>
+                            <li>Off</li>
+                            <li>Organ</li>
+                            <li>Organ <br />& Synth</li>
+                        </ul>
+                        <div class="slider-wrapper">
+                            <div class="slider"></div>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div class="right">
-              <p>Mode</p>
-              <ul>
-                <li>Off</li>
-                <li>Organ</li>
-                <li>Organ <br />& Synth</li>
-              </ul>
-              <div class="slider-wrapper">
-                <div class="slider"></div>
-              </div>
+            <div class="button-container">
+                <div class="button c4">
+                    <div class="center"></div>
+                </div>
+                <div class="button d4">
+                    <div class="center"></div>
+                </div>
+                <div class="button e4">
+                    <div class="center"></div>
+                </div>
+                <div class="button f4">
+                    <div class="center"></div>
+                </div>
+                <div class="button g4">
+                    <div class="center"></div>
+                </div>
+                <div class="button a4">
+                    <div class="center"></div>
+                </div>
+                <div class="button b4">
+                    <div class="center"></div>
+                </div>
+                <div class="button c5">
+                    <div class="center"></div>
+                </div>
+                <div class="button d5">
+                    <div class="center"></div>
+                </div>
+                <div class="button e5">
+                    <div class="center"></div>
+                </div>
+            </div>
+            <div class="letter-container" aria-hidden="true">
+                <div>
+                    <p>C</p>
+                </div>
+                <div>
+                    <p>D</p>
+                </div>
+                <div>
+                    <p>E</p>
+                </div>
+                <div>
+                    <p>F</p>
+                </div>
+                <div>
+                    <p>G</p>
+                </div>
+                <div>
+                    <p>A</p>
+                </div>
+                <div>
+                    <p>B</p>
+                </div>
+                <div>
+                    <p>C</p>
+                </div>
+                <div>
+                    <p>D</p>
+                </div>
+                <div>
+                    <p>E</p>
+                </div>
+            </div>
+            <div class="key-container">
+                <div style="z-index: 12"></div>
+                <div style="z-index: 11"></div>
+                <div style="z-index: 10"></div>
+                <div style="z-index: 9"></div>
+                <div style="z-index: 8"></div>
+                <div style="z-index: 7"></div>
+                <div style="z-index: 6"></div>
+                <div style="z-index: 5"></div>
+                <div style="z-index: 4"></div>
+                <div style="z-index: 3"></div>
+            </div>
+            <div class="speed-container" aria-hidden="true">
+                <p>Fast</p>
+                <div class="speed-slider"></div>
+                <div class="speed-button-container">
+                    <div class="speed-button"></div>
+                </div>
+                <p>Slow</p>
+            </div>
+            <div class="vol-container" aria-hidden="true">
+                <p>High</p>
+                <div class="vol-slider"></div>
+                <div class="vol-button-container">
+                    <div class="vol-button"></div>
+                </div>
+                <p>Low</p>
             </div>
-          </div>
-        </div>
-        <div class="button-container">
-          <div class="button">
-            <div class="center"></div>
-          </div>
-          <div class="button">
-            <div class="center"></div>
-          </div>
-          <div class="button">
-            <div class="center"></div>
-          </div>
-          <div class="button">
-            <div class="center"></div>
-          </div>
-          <div class="button">
-            <div class="center"></div>
-          </div>
-          <div class="button">
-            <div class="center"></div>
-          </div>
-          <div class="button">
-            <div class="center"></div>
-          </div>
-          <div class="button">
-            <div class="center"></div>
-          </div>
-          <div class="button">
-            <div class="center"></div>
-          </div>
-          <div class="button">
-            <div class="center"></div>
-          </div>
-        </div>
-        <div class="letter-container" aria-hidden="true">
-          <div>
-            <p>C</p>
-          </div>
-          <div>
-            <p>D</p>
-          </div>
-          <div>
-            <p>E</p>
-          </div>
-          <div>
-            <p>F</p>
-          </div>
-          <div>
-            <p>G</p>
-          </div>
-          <div>
-            <p>A</p>
-          </div>
-          <div>
-            <p>B</p>
-          </div>
-          <div>
-            <p>C</p>
-          </div>
-          <div>
-            <p>D</p>
-          </div>
-          <div>
-            <p>E</p>
-          </div>
-        </div>
-        <div class="key-container">
-          <div style="z-index: 12;"></div>
-          <div style="z-index: 11;"></div>
-          <div style="z-index: 10;"></div>
-          <div style="z-index: 9;"></div>
-          <div style="z-index: 8;"></div>
-          <div style="z-index: 7;"></div>
-          <div style="z-index: 6;"></div>
-          <div style="z-index: 5;"></div>
-          <div style="z-index: 4;"></div>
-          <div style="z-index: 3;"></div>
-        </div>
-        <div class="speed-container" aria-hidden="true">
-          <p>Fast</p>
-          <div class="speed-slider"></div>
-          <div class="speed-button-container">
-            <div class="speed-button"></div>
-          </div>
-          <p>Slow</p>
-        </div>
-        <div class="vol-container" aria-hidden="true">
-          <p>High</p>
-          <div class="vol-slider"></div>
-          <div class="vol-button-container">
-            <div class="vol-button"></div>
-          </div>
-          <p>Low</p>
         </div>
-      </div>
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/muson/index.js b/muson/index.js
new file mode 100644
index 0000000..cb58531
--- /dev/null
+++ b/muson/index.js
@@ -0,0 +1,365 @@
+// Web Audio API를 사용한 신디사이저 구현
+let audioContext;
+let currentOscillator = null;
+let currentGainNode = null;
+let volumeLevel = 1; // 0: Lo, 1: Med, 2: High
+const volumeLevels = [0.15, 0.3, 0.6]; // Lo, Med, High 볼륨 값
+let octaveLevel = 1; // 0: Off (낮은 옥타브), 1: Organ (기본), 2: Organ & Synth (높은 옥타브)
+const octaveMultipliers = [0.5, 1.0, 2.0]; // 옥타브 배율
+let pitchBend = 0; // -1.0 ~ 1.0 (피치 벤드)
+
+const noteChips = ["D4", "E4", "F4", "G4", "A4", "B4", "C5", "D5", "E5"];
+
+// 각 건반에 해당하는 주파수 (Hz)
+const keyFrequencies = [
+  523.25, // C5
+  587.33, // D5
+  659.25, // E5
+  698.46, // F5
+  783.99, // G5
+  880.0, // A5
+  987.77, // B5
+  1046.5, // C6
+  1174.66, // D6
+  1318.51, // E6
+];
+
+// 음표 이름
+const noteNames = ["C4", "D4", "E4", "F4", "G4", "A4", "B4", "C5", "D5", "E5"];
+
+// 피치 벤드 계산 (±2 반음)
+function getPitchBendMultiplier() {
+  // pitchBend: -1.0 ~ 1.0 -> ±2 semitones
+  //
+  console.log(pitchBend);
+  const semitones = pitchBend * 8;
+  return Math.pow(2, semitones / 12);
+}
+
+// 소리 재생 함수
+function playNote(frequency, noteName) {
+  // 이미 재생 중인 소리가 있으면 중지
+  if (currentOscillator) {
+    stopNote();
+  }
+
+  // AudioContext 초기화 (첫 사용자 인터랙션 시)
+  if (!audioContext) {
+    audioContext = new (window.AudioContext || window.webkitAudioContext)();
+  }
+
+  // Oscillator (음파 생성기) 생성
+  currentOscillator = audioContext.createOscillator();
+  currentGainNode = audioContext.createGain();
+
+  // Oscillator 설정
+  const filter = audioContext.createBiquadFilter();
+  filter.type = "lowpass";
+  filter.frequency.value = 3000; // 2k~4k 사이 조절
+  filter.Q.value = 0.7;
+  currentOscillator.type = "square"; // 사인파 (부드러운 소리)
+  const adjustedFrequency =
+    frequency * octaveMultipliers[octaveLevel] * getPitchBendMultiplier();
+  currentOscillator.frequency.setValueAtTime(
+    adjustedFrequency,
+    audioContext.currentTime,
+  );
+
+  // 볼륨 설정 (페이드 인 효과)
+  const targetVolume = volumeLevels[volumeLevel];
+  currentGainNode.gain.setValueAtTime(0, audioContext.currentTime);
+  currentGainNode.gain.linearRampToValueAtTime(
+    targetVolume,
+    audioContext.currentTime + 0.05,
+  );
+
+  // 연결: Oscillator -> Filter -> Gain -> Destination (스피커)
+  currentOscillator.connect(filter);
+  filter.connect(currentGainNode);
+  currentGainNode.connect(audioContext.destination);
+
+  // 재생 시작
+  currentOscillator.start(audioContext.currentTime);
+
+  const octaveModes = ["Off (Low)", "Organ (Normal)", "Organ & Synth (High)"];
+  console.log(
+    `Playing note: ${noteName} (${adjustedFrequency.toFixed(2)} Hz) | Volume: ${["Lo", "Med", "High"][volumeLevel]} | Octave: ${octaveModes[octaveLevel]} | Pitch Bend: ${pitchBend.toFixed(2)}`,
+  );
+}
+
+// 피치 벤드 업데이트 (재생 중인 음에 실시간 적용)
+function updatePitchBend(newPitchBend) {
+  pitchBend = newPitchBend;
+
+  // 현재 재생 중인 음이 있으면 주파수 업데이트
+  if (currentOscillator && audioContext) {
+    const baseFreq = currentOscillator.frequency.value;
+    const newFreq = baseFreq * getPitchBendMultiplier();
+    currentOscillator.frequency.setValueAtTime(
+      newFreq,
+      audioContext.currentTime,
+    );
+  }
+}
+
+// 소리 중지 함수
+function stopNote() {
+  if (currentOscillator && currentGainNode && audioContext) {
+    const oscillatorToStop = currentOscillator;
+    const gainNodeToStop = currentGainNode;
+
+    // 부드러운 페이드 아웃 효과
+    const fadeOutTime = 0.3;
+    const currentTime = audioContext.currentTime;
+
+    try {
+      // 현재 볼륨 값 가져오기
+      const currentGain = gainNodeToStop.gain.value;
+
+      if (currentGain > 0.0001) {
+        gainNodeToStop.gain.cancelScheduledValues(currentTime);
+        gainNodeToStop.gain.setValueAtTime(currentGain, currentTime);
+        gainNodeToStop.gain.exponentialRampToValueAtTime(
+          0.0001,
+          currentTime + fadeOutTime,
+        );
+      }
+
+      // 페이드 아웃 후 완전히 중지
+      oscillatorToStop.stop(currentTime + fadeOutTime);
+    } catch (error) {
+      console.error("Error stopping note:", error);
+      try {
+        oscillatorToStop.stop();
+      } catch (e) {
+        // 이미 멈춘 경우 무시
+      }
+    }
+
+    // 즉시 null로 설정하여 새로운 소리 재생 가능하도록
+    currentOscillator = null;
+    currentGainNode = null;
+  }
+}
+
+// noteChips에 따라 버튼을 표시/숨김하는 함수
+function updateButtonVisibility() {
+  const buttonContainer = document.querySelector(".button-container");
+
+  const allButtons = buttonContainer.querySelectorAll(".button");
+
+  // 모든 버튼을 숨김 처리
+  allButtons.forEach((button) => (button.style.display = "none"));
+
+  // noteChips에 있는 버튼만 표시
+  noteChips.forEach((noteName) => {
+    const className = noteName.toLowerCase();
+    const button = buttonContainer.querySelector(`.button.${className}`);
+    const letterIndex = noteNames.indexOf(noteName);
+
+    if (button) button.style.display = "";
+  });
+
+  console.log(`Visible buttons: ${noteChips.join(", ")}`);
+}
+
+// DOM이 로드되면 이벤트 리스너 추가
+document.addEventListener("DOMContentLoaded", () => {
+  // noteChips에 따라 버튼 표시/숨김
+  updateButtonVisibility();
+
+  const keyContainer = document.querySelector(".key-container");
+  const keys = keyContainer.querySelectorAll("div");
+
+  keys.forEach((key, index) => {
+    // 마우스 오버 시 소리 재생
+    key.addEventListener("mouseenter", () => {
+      playNote(keyFrequencies[index], noteNames[index]);
+      key.style.transform = "translateY(2px)"; // 시각적 피드백
+    });
+
+    // 마우스 아웃 시 소리 중지
+    key.addEventListener("mouseleave", () => {
+      stopNote();
+      key.style.transform = "translateY(0)"; // 원래 위치로
+    });
+
+    // 클릭 시에도 소리 재생
+    key.addEventListener("click", () => {
+      playNote(keyFrequencies[index], noteNames[index]);
+      // 클릭 시에는 자동으로 멈추지 않도록 설정
+      setTimeout(() => {
+        stopNote();
+      }, 500);
+    });
+
+    // 접근성을 위한 속성 추가
+    key.setAttribute("role", "button");
+    key.setAttribute("aria-label", `Play note ${noteNames[index]}`);
+    key.setAttribute("tabindex", "0");
+
+    // 키보드 지원
+    key.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        playNote(keyFrequencies[index], noteNames[index]);
+        setTimeout(() => {
+          stopNote();
+        }, 500);
+      }
+    });
+
+    // 커서 스타일 변경
+    key.style.cursor = "pointer";
+  });
+
+  // 볼륨 컨트롤 설정
+  setupVolumeControl();
+
+  // 피치 벤드 슬라이더 설정
+  setupPitchBendControl();
+
+  console.log("Muson Synth initialized! Hover over the keys to play notes.");
+});
+
+// 볼륨 컨트롤 설정 함수
+function setupVolumeControl() {
+  const switchWrapper = document.querySelector(".center .switch-wrapper");
+  const switchButton = document.querySelector(".center .switch-button");
+
+  if (!switchWrapper || !switchButton) {
+    console.warn("Volume control elements not found");
+    return;
+  }
+
+  // 볼륨 레벨 업데이트 함수
+  function updateVolumeLevel(newLevel) {
+    volumeLevel = newLevel;
+
+    // 스위치 버튼 위치 업데이트 (3단계: 0%, 50%, 100%)
+    const positions = [5, 28, 53];
+    switchButton.style.left = `${positions[volumeLevel]}%`;
+
+    const levelNames = ["Lo", "Med", "High"];
+    console.log(`Volume set to: ${levelNames[volumeLevel]}`);
+  }
+
+  // 초기 위치 설정 (Med)
+  updateVolumeLevel(1);
+
+  // 스위치 클릭 이벤트
+  switchWrapper.addEventListener("click", (e) => {
+    // 다음 레벨로 순환 (Lo -> Med -> High -> Lo)
+    const nextLevel = (volumeLevel + 1) % 3;
+    updateVolumeLevel(nextLevel);
+  });
+
+  // 스타일 추가
+  switchWrapper.style.cursor = "pointer";
+  switchButton.style.cursor = "pointer";
+
+  // 스위치 버튼에 트랜지션 추가
+  switchButton.style.transition = "left 0.2s ease";
+}
+
+// 옥타브 컨트롤 설정 함수
+// function setupOctaveControl() {
+//   const sliderWrapper = document.querySelector(".right .slider-wrapper");
+//   const slider = document.querySelector(".right .slider");
+
+//   if (!sliderWrapper || !slider) {
+//     console.warn("Octave control elements not found");
+//     return;
+//   }
+
+//   // 스타일 추가
+//   sliderWrapper.style.cursor = "pointer";
+//   slider.style.cursor = "pointer";
+
+//   // 슬라이더에 트랜지션 추가
+//   slider.style.transition = "top 0.2s ease";
+// }
+
+// 피치 벤드 슬라이더 설정 함수
+function setupPitchBendControl() {
+  const volButtonContainer = document.querySelector(".vol-button-container");
+  const volButton = document.querySelector(".vol-button");
+  const volSlider = document.querySelector(".vol-slider");
+
+  if (!volButtonContainer || !volButton || !volSlider) {
+    console.warn("Pitch bend control elements not found");
+    return;
+  }
+
+  let isDragging = false;
+
+  // 슬라이더의 높이와 위치 정보
+  function getSliderInfo() {
+    const rect = volSlider.getBoundingClientRect();
+    return {
+      top: rect.top,
+      height: rect.height,
+    };
+  }
+
+  // 피치 벤드 업데이트 함수
+  function updatePitchBendFromPosition(position) {
+    const sliderInfo = getSliderInfo();
+    let normalizedPosition = (position - sliderInfo.top) / sliderInfo.height;
+    normalizedPosition = Math.max(0, Math.min(1, normalizedPosition));
+
+    // 0 (High/+1) ~ 0.5 (중앙/0) ~ 1 (Low/-1)
+    const newPitchBend = 1.0 - normalizedPosition * 2.0;
+
+    // 버튼 위치 업데이트
+    volButtonContainer.style.top = `calc(14px + ${normalizedPosition * 65}%)`;
+
+    // 피치 벤드 적용
+    updatePitchBend(newPitchBend);
+
+    console.log(`Pitch Bend: ${newPitchBend.toFixed(2)}`);
+  }
+
+  // 초기 위치 설정 (중앙 = 피치 벤드 0)
+  volButtonContainer.style.top = "50%";
+  pitchBend = 0;
+
+  // 마우스 다운 이벤트 (버튼)
+  volButton.addEventListener("mousedown", (e) => {
+    isDragging = true;
+    e.preventDefault();
+  });
+
+  // 슬라이더 클릭 이벤트
+  volSlider.addEventListener("mousedown", (e) => {
+    isDragging = true;
+    updatePitchBendFromPosition(e.clientY);
+  });
+
+  // 마우스 이동 이벤트 (document에 등록)
+  document.addEventListener("mousemove", (e) => {
+    if (isDragging) {
+      updatePitchBendFromPosition(e.clientY);
+    }
+  });
+
+  // 마우스 업 이벤트 (document에 등록) - 중앙으로 되돌아감
+  document.addEventListener("mouseup", () => {
+    if (isDragging) {
+      isDragging = false;
+      // 피치 벤드를 0으로 되돌리기 (스프링백)
+    }
+  });
+
+  // 스타일 추가
+  volButton.style.cursor = "grab";
+  volSlider.style.cursor = "pointer";
+
+  volButton.addEventListener("mousedown", () => {
+    volButton.style.cursor = "grabbing";
+  });
+
+  document.addEventListener("mouseup", () => {
+    volButton.style.cursor = "grab";
+  });
+}
diff --git a/muson/style.css b/muson/style.css
index 3bb1054..f8db281 100644
--- a/muson/style.css
+++ b/muson/style.css
@@ -1,28 +1,27 @@
-/*  
+/*
  Page: https://fossheim.io
  Patreon: https://patreon.com/fossheim
  Buy Me A Coffee: https://buymeacoffee.com/fossheim
- 
+
  Inspired by the Muson toy synth.
 */
 
-
 :root {
-    --letter-1: #2E1F23;
-    --letter-2: #1A1A24;
+    --letter-1: #2e1f23;
+    --letter-2: #1a1a24;
 
     --button-1: #171310;
-    --button-2: #18171F;
+    --button-2: #18171f;
     --button-3: #353541;
-    --button-4: #302E33;
+    --button-4: #302e33;
 
-    --center-1: #0F1622;
-    --center-2: #171D33;
+    --center-1: #0f1622;
+    --center-2: #171d33;
     --center-3: #222632;
     --center-4: #313842;
 
-    --center-5: #1C1F30;
-    --center-6: #3D3A4D;
+    --center-5: #1c1f30;
+    --center-6: #3d3a4d;
 }
 
 * {
@@ -32,8 +31,8 @@
 }
 
 body {
-    background-color: #CFD6F0;
-    background-image: linear-gradient(45deg, #CFD6F0, #F0F2FE);
+    background-color: #cfd6f0;
+    background-image: linear-gradient(45deg, #cfd6f0, #f0f2fe);
     min-height: 100vh;
 }
 
@@ -52,33 +51,25 @@ body {
 
     border-radius: 6px;
 
-    background-color: #FFD9D0;
-    background-image: linear-gradient(
-        135deg,
-        #EFC4BB,
-        #F6D0C7,
-        #FDE0DA
-    );
-
-    box-shadow: 2px 0 1.5px -1.5px #7C5558 inset,
-        3.5px 0 2.5px -2.5px #AE857F inset,
-        4.5px 0 2.5px -2.5px #D8B5AF inset,
-        5.5px 0 2.5px -2.5px #DBBBB0 inset,
-        6.5px 0 2.5px -2.5px #DFBDB1 inset,
-        
-        -3px 0 2px -2px #F9EAE5 inset,
-        -3.5px 0 2px -2px #FFF0ED inset,
-        -4.5px 0 2px -2px #FDDFD4 inset,
-        -5.5px 0 2px -2px #FEE1DB inset,
-        
-        0 2px 2px -2px #EBCDCF inset,
-        0 4px 2px -2px #EEC8C7 inset,
-        0 5px 2px -2px #F4CFC7 inset,
-        
-        0 -2px 1.5px -1.5px #E8D4DD inset,
-        0 -4.5px 1.5px -1.5px #F4CFC7 inset,
-        0 -5px 1.5px -1.5px #FFFDFB inset,
-        
+    background-color: #ffd9d0;
+    background-image: linear-gradient(135deg, #efc4bb, #f6d0c7, #fde0da);
+
+    box-shadow:
+        2px 0 1.5px -1.5px #7c5558 inset,
+        3.5px 0 2.5px -2.5px #ae857f inset,
+        4.5px 0 2.5px -2.5px #d8b5af inset,
+        5.5px 0 2.5px -2.5px #dbbbb0 inset,
+        6.5px 0 2.5px -2.5px #dfbdb1 inset,
+        -3px 0 2px -2px #f9eae5 inset,
+        -3.5px 0 2px -2px #fff0ed inset,
+        -4.5px 0 2px -2px #fddfd4 inset,
+        -5.5px 0 2px -2px #fee1db inset,
+        0 2px 2px -2px #ebcdcf inset,
+        0 4px 2px -2px #eec8c7 inset,
+        0 5px 2px -2px #f4cfc7 inset,
+        0 -2px 1.5px -1.5px #e8d4dd inset,
+        0 -4.5px 1.5px -1.5px #f4cfc7 inset,
+        0 -5px 1.5px -1.5px #fffdfb inset,
         -30px -30px 10px rgba(114, 86, 98, 0.05),
         -25px -25px 10px rgba(114, 86, 98, 0.1),
         -20px -20px 10px rgba(114, 86, 98, 0.075),
@@ -89,7 +80,6 @@ body {
         -40px -70px 30px rgba(114, 86, 98, 0.1),
         -35px -60px 30px rgba(114, 86, 98, 0.075),
         -45px -50px 30px rgba(114, 86, 98, 0.05),
-        
         -2px 0 5px rgba(137, 124, 142, 0.5),
         0 0 10px rgba(137, 124, 142, 0.1),
         0 0 20px rgba(137, 124, 142, 0.05),
@@ -102,40 +92,35 @@ body {
     height: 220px;
     margin-left: -8px;
     border-radius: 6px 6px 2px 2px;
-    background-image: linear-gradient(#FAD2CA, #F9D1C7);
-
-    box-shadow: 2px 0 1.5px -1.5px #7C5558 inset,
-        3.5px 0 2.5px -2.5px #AE857F inset,
-        4.5px 0 2.5px -2.5px #D8B5AF inset,
-        5.5px 0 2.5px -2.5px #DBBBB0 inset,
-        6.5px 0 2.5px -2.5px #DFBDB1 inset,
-        
-        -3px 0 2px -2px #F9EAE5 inset,
-        -3.5px 0 2px -2px #FFF0ED inset,
-        -4.5px 0 2px -2px #FDDFD4 inset,
-        -5.5px 0 2px -2px #FEE1DB inset,
-        
-        0 2px 2px -2px #EBCDCF inset,
-        0 4px 2px -2px #EEC8C7 inset,
-        0 5px 2px -2px #F4CFC7 inset,
-        
-        0 -2px 1.5px -1.5px #F9D1C7 inset,
-        0 -4.5px 1.5px -1.5px #F9D1C7 inset,
-        0 -5px 1.5px -1.5px #FFEAE4 inset,
-        
-        
-        2px 12px 1.5px -6px #F9D1C7,
-        1px 11px 1.5px -6px #F9D1C7,
-        1px 10px 1.5px -6px #F9D1C7,
-        1px 9px 1.5px -5px #F9D1C7,
-        1px 8px 1.5px -5px #F9D1C7,
-        1px 7px 1.5px -5px #F9D1C7,
-        1px 6px 1.5px -5px #F9D1C7,
-        3px 5px 1.5px -2px #F9D1C7,
-        2px 4px 1.5px -2px #F9D1C7,
-        1px 3px 1.5px -2px #F9D1C7,
-        
-        3px 13px 1px -6px #F9D1C7,
+    background-image: linear-gradient(#fad2ca, #f9d1c7);
+
+    box-shadow:
+        2px 0 1.5px -1.5px #7c5558 inset,
+        3.5px 0 2.5px -2.5px #ae857f inset,
+        4.5px 0 2.5px -2.5px #d8b5af inset,
+        5.5px 0 2.5px -2.5px #dbbbb0 inset,
+        6.5px 0 2.5px -2.5px #dfbdb1 inset,
+        -3px 0 2px -2px #f9eae5 inset,
+        -3.5px 0 2px -2px #fff0ed inset,
+        -4.5px 0 2px -2px #fddfd4 inset,
+        -5.5px 0 2px -2px #fee1db inset,
+        0 2px 2px -2px #ebcdcf inset,
+        0 4px 2px -2px #eec8c7 inset,
+        0 5px 2px -2px #f4cfc7 inset,
+        0 -2px 1.5px -1.5px #f9d1c7 inset,
+        0 -4.5px 1.5px -1.5px #f9d1c7 inset,
+        0 -5px 1.5px -1.5px #ffeae4 inset,
+        2px 12px 1.5px -6px #f9d1c7,
+        1px 11px 1.5px -6px #f9d1c7,
+        1px 10px 1.5px -6px #f9d1c7,
+        1px 9px 1.5px -5px #f9d1c7,
+        1px 8px 1.5px -5px #f9d1c7,
+        1px 7px 1.5px -5px #f9d1c7,
+        1px 6px 1.5px -5px #f9d1c7,
+        3px 5px 1.5px -2px #f9d1c7,
+        2px 4px 1.5px -2px #f9d1c7,
+        1px 3px 1.5px -2px #f9d1c7,
+        3px 13px 1px -6px #f9d1c7,
         3px 12px 4px -6px rgba(126, 80, 67, 0.25),
         -2px 25px 30px -3px rgba(126, 80, 67, 0.025),
         -2px 35px 35px -3px rgba(126, 80, 67, 0.075);
@@ -148,17 +133,18 @@ body {
     width: 310px;
     height: 165px;
     background-color: transparent;
-    
+
     position: absolute;
     top: 25px;
     right: 65px;
 
     border-radius: 1px;
 
-    box-shadow: 1px -1px 1px #DEB3AC inset,
-        -2px 0 1px -1px #FFDBD3 inset,
-        0 -1.5px 1px #FFDFD3 inset,
-        0 70.25px 1px -70px #B58475;
+    box-shadow:
+        1px -1px 1px #deb3ac inset,
+        -2px 0 1px -1px #ffdbd3 inset,
+        0 -1.5px 1px #ffdfd3 inset,
+        0 70.25px 1px -70px #b58475;
 }
 
 .muson-frame:before {
@@ -175,11 +161,12 @@ body {
     top: -25px;
     left: -10px;
 
-    box-shadow: -0.5px 1.25px 0.75px -0.25px #D4A89D,
-        0.5px 0 0.75px -0.25px #F3C9BD,
+    box-shadow:
+        -0.5px 1.25px 0.75px -0.25px #d4a89d,
+        0.5px 0 0.75px -0.25px #f3c9bd,
         0 -1px 0.5px -0.5px rgba(243, 204, 197, 1),
-        0 -1px 1px #F7CBC0 inset,
-        0 0 3px 4px #FCD1CA inset;
+        0 -1px 1px #f7cbc0 inset,
+        0 0 3px 4px #fcd1ca inset;
 }
 
 .muson-frame:after {
@@ -189,9 +176,17 @@ body {
     height: 39px;
     border-radius: 0.5px;
 
-    background-image: radial-gradient(rgba(255, 222, 213, 0.25), rgba(255, 222, 213, 0) 60%),
-        repeating-linear-gradient(#F8D2C5 0 24%, #FDD9C9 25% 49%, #F6D1BF 50% 74%, #FDD4C0 75% 100%);
-    background-size: 100% 100%, 4px 4px;
+    background-image:
+        radial-gradient(rgba(255, 222, 213, 0.25), rgba(255, 222, 213, 0) 60%),
+        repeating-linear-gradient(
+            #f8d2c5 0 24%,
+            #fdd9c9 25% 49%,
+            #f6d1bf 50% 74%,
+            #fdd4c0 75% 100%
+        );
+    background-size:
+        100% 100%,
+        4px 4px;
 
     position: absolute;
     bottom: 0;
@@ -202,17 +197,26 @@ body {
 
     opacity: 0.95;
 
-    box-shadow: 0 -1.5px 1px -0.5px #DEB3AC inset,
-        0 -2px 1px -0.5px #FFDFD3 inset,
-        -1px 0 1px #FFDED5 inset,
-        1px 0 1px -0.5px #FFDED5,
-        1px 0 1px #FBD5CA inset,
-        -1px 0 1px -0.5px #FBD5CA,
-        0 1.75px 1px -1px #B58475;
+    box-shadow:
+        0 -1.5px 1px -0.5px #deb3ac inset,
+        0 -2px 1px -0.5px #ffdfd3 inset,
+        -1px 0 1px #ffded5 inset,
+        1px 0 1px -0.5px #ffded5,
+        1px 0 1px #fbd5ca inset,
+        -1px 0 1px -0.5px #fbd5ca,
+        0 1.75px 1px -1px #b58475;
 }
 
 .rainbow {
-    display: block;
+    padding-top: 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #e2e2e2;
+    font-size: 60px;
+    line-height: 46px;
+    font-weight: 800;
     width: 290px;
     height: 120px;
 
@@ -221,25 +225,41 @@ body {
     left: 8px;
 
     background-color: #fff;
-    background-image: linear-gradient(#1E202F 0 12%,
-        #495AC2 12.5% 24.5%,
-        #1250C7 25% 37%,
-        #039CEC 37.5% 49.5%,
-        #DFC63F 50% 62%,
-        #FED13F 62.5% 74.5%,
-        #FC672F 75% 87%,
-        #FD3A48 87.5% 100%
+    background-image: linear-gradient(
+        #1e202f 0 12%,
+        #495ac2 12.5% 24.5%,
+        #1250c7 25% 37%,
+        #039cec 37.5% 49.5%,
+        #dfc63f 50% 62%,
+        #fed13f 62.5% 74.5%,
+        #fc672f 75% 87%,
+        #fd3a48 87.5% 100%
     );
-    
+
     border-radius: 1px;
 
-    box-shadow: 0 -2px 2px -2px rgba(255, 220, 211, 1) inset,
-        0px 0 1.25px 1px #FEDDD6 inset,
+    box-shadow:
+        0 -2px 2px -2px rgba(255, 220, 211, 1) inset,
+        0px 0 1.25px 1px #feddd6 inset,
         0 0 1px 1.5px rgba(82, 58, 56, 0.5) inset,
         0 0 2.5px 3px rgba(82, 58, 56, 0.2) inset,
         0 0 4px 5px rgba(82, 58, 56, 0.1) inset,
-        -1px 0 1px #DDDAE3,
-        0 0 5px 3px #F6DACF;
+        -1px 0 1px #dddae3,
+        0 0 5px 3px #f6dacf;
+    .line1 {
+        font-size: 24px;
+        line-height: 10px;
+        font-weight: 800;
+        margin-top: 10px;
+        color: #2f233f;
+    }
+    .line2 {
+        font-size: 10px;
+        line-height: 6px;
+        font-weight: 700;
+        margin-top: 10px;
+        color: #2f233e;
+    }
 }
 
 .speaker-bar {
@@ -248,20 +268,20 @@ body {
     height: 219px;
 
     background-color: transparent;
-    
+
     border-radius: 6px 6px 2px 2px;
     position: absolute;
     top: 1px;
     left: 2px;
 
-    box-shadow: 0 -10px 2px -2px #F9D1C7 inset,
-        0 0 1px #F9D1C7,
-        -10px 0 3px -3px #FFE0D3 inset,
-        5px 0 3px -3px #FFE0D3,
+    box-shadow:
+        0 -10px 2px -2px #f9d1c7 inset,
+        0 0 1px #f9d1c7,
+        -10px 0 3px -3px #ffe0d3 inset,
+        5px 0 3px -3px #ffe0d3,
         7px 0 2px -5px rgba(166, 122, 111, 0.15),
         21px 0 3px -20px rgba(95, 64, 56, 0.15),
         -9px -5px 5px rgba(254, 210, 201, 0.5) inset;
-
 }
 
 .speakers {
@@ -277,37 +297,41 @@ body {
     margin: 0 auto;
     top: 15px;
 
-    background-image: linear-gradient(90deg, transparent, #E8C2B6 20% 80%, transparent),
-        linear-gradient(transparent 0 12.5%, 
-            #EECEC1 12.5% 25%,
-            #67473C 37.5% 50%, 
-            #4A251F 50% 62.5%, 
+    background-image:
+        linear-gradient(90deg, transparent, #e8c2b6 20% 80%, transparent),
+        linear-gradient(
+            transparent 0 12.5%,
+            #eecec1 12.5% 25%,
+            #67473c 37.5% 50%,
+            #4a251f 50% 62.5%,
             transparent 82% 100%
-        ), linear-gradient(
-            #EEC4B4,
-            #E8C6BC
-        );
-    background-size: 6px 100%, 9px 9px, 100% 100%;
+        ),
+        linear-gradient(#eec4b4, #e8c6bc);
+    background-size:
+        6px 100%,
+        9px 9px,
+        100% 100%;
     background-repeat: no-repeat, repeat, repeat;
-    background-position: center center, top left, top left;
-
-    box-shadow: 0 0 2px 0.5px #F9D1C7,
-        -1.75px -1.75px 1.5px -1px #F9D1C7,
-        -2px -2px 5px -2px #F9D1C7,
+    background-position:
+        center center,
+        top left,
+        top left;
 
+    box-shadow:
+        0 0 2px 0.5px #f9d1c7,
+        -1.75px -1.75px 1.5px -1px #f9d1c7,
+        -2px -2px 5px -2px #f9d1c7,
         -5px -25px 20px -5px rgba(83, 23, 0, 0.05) inset,
         -5px -15px 15px -5px rgba(83, 23, 0, 0.05) inset,
         -10px -35px 30px -10px rgba(83, 23, 0, 0.025) inset,
-
         5px 25px 20px -5px rgba(255, 243, 238, 0.1) inset,
         5px 15px 15px -5px rgba(255, 243, 238, 0.05) inset,
         10px 35px 30px -10px rgba(255, 243, 238, 0.025) inset,
-
-        0 0 2px 0.5px #FEDCD3 inset,
+        0 0 2px 0.5px #fedcd3 inset,
         -2px -2px 5px -1px rgba(245, 203, 191, 0.5) inset,
-        0 14px 1px 25.5px #F6D0C7 inset,
-        0 14px 1px 26.5px #EFC1B2 inset,
-        0 14px 1px 30px #F0C3B0 inset;
+        0 14px 1px 25.5px #f6d0c7 inset,
+        0 14px 1px 26.5px #efc1b2 inset,
+        0 14px 1px 30px #f0c3b0 inset;
 }
 
 .key-container {
@@ -324,22 +348,18 @@ body {
     border-radius: 1px;
     background-color: #821510;
 
-    box-shadow: -10px -10px 10px -5px rgba(58, 12, 2, 0.2),
-    
-        -2px 0 1px #BCA7A6 inset,
-        1px 1px 1px 1px #E8D1C9,
-        2px 2px 2px 1px #FFE3D5,
-        3px 3px 4px 1px #FDE0D2,
-        
-        -1px -1px 1px 0 #8E675F;
+    box-shadow:
+        -10px -10px 10px -5px rgba(58, 12, 2, 0.2),
+        -2px 0 1px #bca7a6 inset,
+        1px 1px 1px 1px #e8d1c9,
+        2px 2px 2px 1px #ffe3d5,
+        3px 3px 4px 1px #fde0d2,
+        -1px -1px 1px 0 #8e675f;
 }
 
 .key-container > div {
     background-color: #fff;
-    background-image: linear-gradient(90deg,
-        #E7EDF9,
-        #F0F4FD
-    );
+    background-image: linear-gradient(90deg, #e7edf9, #f0f4fd);
     border-radius: 5px;
     position: relative;
     top: -3px;
@@ -347,19 +367,35 @@ body {
     height: 100%;
     height: calc(100% + 2px);
 
-
-    box-shadow: -5px 0 4px -2px #EDECFA inset,
-        -8px 0 6px -6px #EBEFF8 inset,
-        3px 0 1px -1px #E9D4CF inset,
-        6px 0 5px -5px #E1E8FA inset,
-
-        0 0 0.25px 0.25px #E9D4CF,
-        -0.75px -0.75px 1px -0.5px #E9D4CF,
-        0 1px 1px #BEA19B,
-        
+    box-shadow:
+        -5px 0 4px -2px #edecfa inset,
+        -8px 0 6px -6px #ebeff8 inset,
+        3px 0 1px -1px #e9d4cf inset,
+        6px 0 5px -5px #e1e8fa inset,
+        0 0 0.25px 0.25px #e9d4cf,
+        -0.75px -0.75px 1px -0.5px #e9d4cf,
+        0 1px 1px #bea19b,
         -7px -7px 5px -0.5px rgba(150, 90, 64, 0.5),
         -7px -3px 7px rgba(201, 149, 135, 0.55),
         -10px -10px 15px rgba(201, 149, 135, 0.25);
+    transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+    cursor: pointer;
+}
+.key-container > div:hover {
+    box-shadow:
+        -5px 0 4px -2px #edecfa inset,
+        -8px 0 6px -6px #ebeff8 inset,
+        3px 0 1px -1px #e9d4cf inset,
+        6px 0 5px -5px #e1e8fa inset,
+        0 0 0.25px 0.25px #e9d4cf,
+        -0.75px -0.75px 1px -0.5px #e9d4cf,
+        0 1px 1px #bea19b,
+        -2px -2px 1px -0.5px rgba(150, 90, 64, 0.5),
+        -2px -1px 2px rgba(201, 149, 135, 0.55),
+        -3px -3px 15px rgba(201, 149, 135, 0.25);
+    transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+    transform: scaleY(0.96);
+    transform-origin: bottom center;
 }
 
 .letter-container {
@@ -378,84 +414,84 @@ body {
 
     border-radius: 3px;
 
-    box-shadow: -0.5px -0.5px 0.75px #B98A7A,
-        -2px -2px 2px #E0B9A8,
-        0.5px 0.5px 1px -0.25px #E1B8A6 inset,
-        1px 1px 1px 0.5px #E9BCA9 inset,
+    box-shadow:
+        -0.5px -0.5px 0.75px #b98a7a,
+        -2px -2px 2px #e0b9a8,
+        0.5px 0.5px 1px -0.25px #e1b8a6 inset,
+        1px 1px 1px 0.5px #e9bca9 inset,
         4px 4px 4px rgba(251, 228, 222, 0.25) inset;
 
     padding: 5px;
 }
 
 .letter-container > div {
-    background-color: #19161D;
+    background-color: #19161d;
     background-image: linear-gradient(
         var(--letter-1) 20%,
         var(--letter-2) 30% 50%,
-        #2C2934 50%,
-        #1C1B29,
+        #2c2934 50%,
+        #1c1b29,
         #342127
     );
 
     border-radius: 1px;
 
-    box-shadow: 0 0.5px 0.5px #A6857E inset,
+    box-shadow:
+        0 0.5px 0.5px #a6857e inset,
         0 1px 2px rgba(67, 38, 40, 0.25) inset,
         0.5px 0 0.25px rgba(105, 90, 95, 0.5),
-        
-        0 -1px 0.5px #4D3326 inset,
-        0 -15px 5px -5px #2A1A1A inset,
-        0 1px 1px #D6B6A7,
-        0 5px 3px #F0D0C1,
-        
+        0 -1px 0.5px #4d3326 inset,
+        0 -15px 5px -5px #2a1a1a inset,
+        0 1px 1px #d6b6a7,
+        0 5px 3px #f0d0c1,
         0 12px 5px rgba(26, 26, 36, 0.1) inset;
 
     position: relative;
 }
 
 .letter-container > div:nth-child(2) {
-    --letter-1: #D55622;
-    --letter-2: #E05F0B;
+    --letter-1: #d55622;
+    --letter-2: #e05f0b;
 }
 
 .letter-container > div:nth-child(3) {
-    --letter-1: #FE3339;
-    --letter-2: #FE3336;
+    --letter-1: #fe3339;
+    --letter-2: #fe3336;
 }
 
 .letter-container > div:nth-child(4) {
-    --letter-1: #F84524;
-    --letter-2: #FA5229;
+    --letter-1: #f84524;
+    --letter-2: #fa5229;
 }
 
 .letter-container > div:nth-child(5) {
-    --letter-1: #F78336;
-    --letter-2: #FA9634;
+    --letter-1: #f78336;
+    --letter-2: #fa9634;
 }
 
 .letter-container > div:nth-child(6) {
-    --letter-1: #FDC32A;
-    --letter-2: #FCDA47;
+    --letter-1: #fdc32a;
+    --letter-2: #fcda47;
 }
 
 .letter-container > div:nth-child(7) {
-    --letter-1: #DEBF27;
-    --letter-2: #D8D03D;
+    --letter-1: #debf27;
+    --letter-2: #d8d03d;
 }
 
 .letter-container > div:nth-child(8) {
-    --letter-1: #03A7DA;
-    --letter-2: #0BB3FA;
+    --letter-1: #03a7da;
+    --letter-2: #0bb3fa;
 }
 
 .letter-container > div:nth-child(9) {
-    --letter-1: #2D50B4;
-    --letter-2: #3362CA;
+    --letter-1: #2d50b4;
+    --letter-2: #3362ca;
 }
 
 .letter-container > div:nth-child(10) {
     --letter-1: #734897;
-    --letter-2: #6D56BE;
+    --letter-2: #6d56be;
 }
 
 .letter-container > div > p {
@@ -466,12 +502,13 @@ body {
     margin: 0 auto;
     text-align: center;
     font-size: 13px;
-    color: #E6DFEF;
+    color: #e6dfef;
     font-family: sans-serif;
-    text-shadow: 0.15px 0 0.5px #E6DFEF,
-        -0.15px 0 0.5px #E6DFEF,
-        1px 0 1px #33292A,
-        -2px 0 2px #1A1420;
+    text-shadow:
+        0.15px 0 0.5px #e6dfef,
+        -0.15px 0 0.5px #e6dfef,
+        1px 0 1px #33292a,
+        -2px 0 2px #1a1420;
 }
 
 .button-container {
@@ -489,21 +526,23 @@ body {
 
     background-color: transparent;
 
-    box-shadow: 0 0 2px #DDABA0 inset,
-        0 0 1px #DDABA0,
-        0 -1px 2px #F1CBC2,
-        0 -1.5px 2px #FDE4DD,
-        0 1px 2px #E9CDBF,
-        0 1.5px 2px #FADACF,
-        
-        0 1.5px 1.5px -0.5px #D69C8E inset,
-        0 10px 10px -5px #E0B2A2 inset,
+    box-shadow:
+        0 0 2px #ddaba0 inset,
+        0 0 1px #ddaba0,
+        0 -1px 2px #f1cbc2,
+        0 -1.5px 2px #fde4dd,
+        0 1px 2px #e9cdbf,
+        0 1.5px 2px #fadacf,
+        0 1.5px 1.5px -0.5px #d69c8e inset,
+        0 10px 10px -5px #e0b2a2 inset,
         0 -10px 5px -5px rgba(178, 83, 65, 1) inset;
 }
 
 .button-container .button {
     border-radius: 3px;
 
+    cursor: pointer;
+
     background-image: linear-gradient(
         var(--button-1),
         var(--button-2),
@@ -511,19 +550,16 @@ body {
         var(--button-4)
     );
 
-    box-shadow: 0 0 0.25px var(--button-3),
-        -0.5px -0.75px 1px  rgba(241, 249, 255, 0.15) inset,
+    box-shadow:
+        0 0 0.25px var(--button-3),
+        -0.5px -0.75px 1px rgba(241, 249, 255, 0.15) inset,
         -0.75px -1.5px 1.5px rgba(44, 6, 13, 0.05) inset,
-    
         0 -0.5px 0.75px 0.25px var(--button-1),
         0 0.5px 0.75px 0.25px var(--button-4),
-
         0 -0.75px 2px -0.75px var(--button-1),
         0 0.75px 2px -0.75px var(--button-4),
-
         -0.5px -2px 3px 0.75px rgba(44, 6, 13, 0.9),
         -15px -20px 20px 2px rgba(150, 90, 64, 0.35),
-        
         -7px -7px 5px -0.5px rgba(150, 90, 64, 0.5),
         -7px -3px 7px rgba(201, 149, 135, 0.55),
         -10px -10px 15px rgba(201, 149, 135, 0.25);
@@ -538,147 +574,161 @@ body {
     height: calc(100% - 3px);
 }
 
-.button-container .button:nth-child(2) {
-    --button-1: #884B36;
-    --button-2: #8A4631;
-    --button-3: #BD6E48;
-    --button-4: #C2724D;
+.button-container .button.c4 {
+    --button-1: #171310;
+    --button-2: #18171f;
+    --button-3: #353541;
+    --button-4: #302e33;
 
-    --center-1: #AC5B3D;
-    --center-2: #AE5E43;
-    --center-3: #BD6E48;
-    --center-4: #AA624A;
-    --center-5: #AE5E3D;
-    --center-6: #C77E5B;
+    --center-1: #0f1622;
+    --center-2: #171d33;
+    --center-3: #222632;
+    --center-4: #313842;
+    --center-5: #1c1f30;
+    --center-6: #3d3a4d;
+}
+
+.button-container .button.d4 {
+    --button-1: #884b36;
+    --button-2: #8a4631;
+    --button-3: #bd6e48;
+    --button-4: #c2724d;
+
+    --center-1: #ac5b3d;
+    --center-2: #ae5e43;
+    --center-3: #bd6e48;
+    --center-4: #aa624a;
+    --center-5: #ae5e3d;
+    --center-6: #c77e5b;
 
     z-index: 10;
 }
 
-.button-container .button:nth-child(3) {
-    --button-1: #C1353E;
-    --button-2: #C22B3A;
-    --button-3: #E42D49;
-    --button-4: #E32C3E;
+.button-container .button.e4 {
+    --button-1: #c1353e;
+    --button-2: #c22b3a;
+    --button-3: #e42d49;
+    --button-4: #e32c3e;
+
+    --center-1: #d5132b;
+    --center-2: #dd1f3b;
+    --center-3: #e42849;
+    --center-4: #e33e50;
+    --center-5: #d51a39;
+    --center-6: #f44661;
 
-    --center-1: #D5132B;
-    --center-2: #DD1F3B;
-    --center-3: #E42849;
-    --center-4: #E33E50;
-    --center-5: #D51A39;
-    --center-6: #F44661;
-    
     z-index: 9;
 }
 
-.button-container .button:nth-child(4) {
-    --button-1: #CC3929;
-    --button-2: #D73825;
-    --button-3: #FD5332;
-    --button-4: #F2501F;
+.button-container .button.f4 {
+    --button-1: #cc3929;
+    --button-2: #d73825;
+    --button-3: #fd5332;
+    --button-4: #f2501f;
+
+    --center-1: #f83d1e;
+    --center-2: #fd4022;
+    --center-3: #fc4d2e;
+    --center-4: #ff5a3d;
+    --center-5: #f0361f;
+    --center-6: #ff6959;
 
-    --center-1: #F83D1E;
-    --center-2: #FD4022;
-    --center-3: #FC4D2E;
-    --center-4: #FF5A3D;
-    --center-5: #F0361F;
-    --center-6: #FF6959;
-    
     z-index: 8;
 }
 
-.button-container .button:nth-child(5) {
-    --button-1: #F2AC26;
-    --button-2: #F0AC19;
-    --button-3: #F0B31C;
-    --button-4: #ECAF19;
+.button-container .button.g4 {
+    --button-1: #f2ac26;
+    --button-2: #f0ac19;
+    --button-3: #f0b31c;
+    --button-4: #ecaf19;
+
+    --center-1: #e8a321;
+    --center-2: #f0ad14;
+    --center-3: #f3b61d;
+    --center-4: #f1a943;
+    --center-5: #ebaa09;
+    --center-6: #fbc131;
 
-    --center-1: #E8A321;
-    --center-2: #F0AD14;
-    --center-3: #F3B61D;
-    --center-4: #F1A943;
-    --center-5: #EBAA09;
-    --center-6: #FBC131;
-    
     z-index: 7;
 }
 
-.button-container .button:nth-child(6) {
-    --button-1: #FCB829;
-    --button-2: #F7CF31;
-    --button-3: #FFDB3C;
-    --button-4: #FBDB4C;
+.button-container .button.a4 {
+    --button-1: #fcb829;
+    --button-2: #f7cf31;
+    --button-3: #ffdb3c;
+    --button-4: #fbdb4c;
+
+    --center-1: #ffd531;
+    --center-2: #f6dc41;
+    --center-3: #ffda3b;
+    --center-4: #ffe470;
+    --center-5: #ffd038;
+    --center-6: #ffe160;
 
-    --center-1: #FFD531;
-    --center-2: #F6DC41;
-    --center-3: #FFDA3B;
-    --center-4: #FFE470;
-    --center-5: #FFD038;
-    --center-6: #FFE160;
-    
     z-index: 6;
 }
 
-.button-container .button:nth-child(7) {
-    --button-1: #B5D496;
-    --button-2: #A1D890;
-    --button-3: #B5F4A7;
-    --button-4: #B3EAA4;
+.button-container .button.b4 {
+    --button-1: #b5d496;
+    --button-2: #a1d890;
+    --button-3: #b5f4a7;
+    --button-4: #b3eaa4;
+
+    --center-1: #bde899;
+    --center-2: #b8ed9f;
+    --center-3: #c6f6aa;
+    --center-4: #b7e6b8;
+    --center-5: #c6f6ac;
+    --center-6: #d9febb;
 
-    --center-1: #BDE899;
-    --center-2: #B8ED9F;
-    --center-3: #C6F6AA;
-    --center-4: #B7E6B8;
-    --center-5: #C6F6AC;
-    --center-6: #D9FEBB;
-    
     z-index: 5;
 }
 
-.button-container .button:nth-child(8) {
-    --button-1: #3F88B5;
-    --button-2: #3494C7;
-    --button-3: #0FCEFB;
-    --button-4: #15CAF7;
+.button-container .button.c5 {
+    --button-1: #3f88b5;
+    --button-2: #3494c7;
+    --button-3: #0fcefb;
+    --button-4: #15caf7;
+
+    --center-1: #26b7f0;
+    --center-2: #05beff;
+    --center-3: #04c6fb;
+    --center-4: #23d7ff;
+    --center-5: #08c2f5;
+    --center-6: #22d9ff;
 
-    --center-1: #26B7F0;
-    --center-2: #05BEFF;
-    --center-3: #04C6FB;
-    --center-4: #23D7FF;
-    --center-5: #08C2F5;
-    --center-6: #22D9FF;
-    
     z-index: 4;
 }
 
-.button-container .button:nth-child(9) {
-    --button-1: #4058A2;
-    --button-2: #3C5FB9;
-    --button-3: #0D7BF4;
-    --button-4: #2680F8;
+.button-container .button.d5 {
+    --button-1: #4058a2;
+    --button-2: #3c5fb9;
+    --button-3: #0d7bf4;
+    --button-4: #2680f8;
+
+    --center-1: #1864dc;
+    --center-2: #0071f1;
+    --center-3: #1a7de5;
+    --center-4: #346dd4;
+    --center-5: #016ee3;
+    --center-6: #5298f0;
 
-    --center-1: #1864DC;
-    --center-2: #0071F1;
-    --center-3: #1A7DE5;
-    --center-4: #346DD4;
-    --center-5: #016EE3;
-    --center-6: #5298F0;
-    
     z-index: 3;
 }
 
-.button-container .button:nth-child(10) {
-    --button-1: #3D306E;
-    --button-2: #503C79;
-    --button-3: #6A5ABD;
-    --button-4: #6A5ABD;
+.button-container .button.e5 {
+    --button-1: #3d306e;
+    --button-2: #503c79;
+    --button-3: #6a5abd;
+    --button-4: #6a5abd;
+
+    --center-1: #5141a3;
+    --center-2: #5647ae;
+    --center-3: #6052b3;
+    --center-4: #6758ab;
+    --center-5: #574dae;
+    --center-6: #7b6bce;
 
-    --center-1: #5141A3;
-    --center-2: #5647AE;
-    --center-3: #6052B3;
-    --center-4: #6758AB;
-    --center-5: #574DAE;
-    --center-6: #7B6BCE;
-    
     z-index: 2;
 }
 
@@ -686,7 +736,7 @@ body {
     display: block;
     width: 100%;
     height: 35px;
-    
+
     width: calc(100% + 2px);
 
     border-radius: 2px;
@@ -701,41 +751,55 @@ body {
         var(--center-3)
     );
 
-    box-shadow: 0 0 0.5px var(--center-3),
-    
-    -3px -20px 14px 3px rgba(20, 7, 14, 0.15),
-    3px 20px 14px -3px rgba(241, 249, 255, 0.025),
-    -3px -17px 14px -3px rgba(241, 249, 255, 0.025),
-
-    0 -20px 10px -10px rgba(44, 6, 13, 0.05) inset,
-    0 -0px 10px -10px rgba(44, 6, 13, 0.05) inset,
-    0 30px 20px -10px rgba(241, 249, 255, 0.05) inset,
-    
-    0 -0.25px 0.75px 0.25px var(--center-1),
-    0 0.5px 0.75px 0.25px var(--center-3),
-
-    0 -0.75px 2px -0.75px var(--center-1),
-    0 0.75px 2px -0.75px var(--center-3),
-    
-    0 1px 1.75px -0.75px var(--center-4) inset,
-    0 -3px 4px -3px var(--center-5) inset,
-    
-    0 3px 3px -3px var(--center-6),
-    
-    0 -4px 7px -4px var(--center-1),
-    0 4px 7px -4px var(--center-6);
-}
-
-.button-container .button .center:nth-child(1) { z-index: 22; }
-.button-container .button .center:nth-child(2) { z-index: 21; }
-.button-container .button .center:nth-child(3) { z-index: 20; }
-.button-container .button .center:nth-child(4) { z-index: 19; }
-.button-container .button .center:nth-child(5) { z-index: 18; }
-.button-container .button .center:nth-child(6) { z-index: 17; }
-.button-container .button .center:nth-child(7) { z-index: 16; }
-.button-container .button .center:nth-child(8) { z-index: 15; }
-.button-container .button .center:nth-child(9) { z-index: 14; }
-.button-container .button .center:nth-child(10) { z-index: 13; }
+    box-shadow:
+        0 0 0.5px var(--center-3),
+        -3px -20px 14px 3px rgba(20, 7, 14, 0.15),
+        3px 20px 14px -3px rgba(241, 249, 255, 0.025),
+        -3px -17px 14px -3px rgba(241, 249, 255, 0.025),
+        0 -20px 10px -10px rgba(44, 6, 13, 0.05) inset,
+        0 -0px 10px -10px rgba(44, 6, 13, 0.05) inset,
+        0 30px 20px -10px rgba(241, 249, 255, 0.05) inset,
+        0 -0.25px 0.75px 0.25px var(--center-1),
+        0 0.5px 0.75px 0.25px var(--center-3),
+        0 -0.75px 2px -0.75px var(--center-1),
+        0 0.75px 2px -0.75px var(--center-3),
+        0 1px 1.75px -0.75px var(--center-4) inset,
+        0 -3px 4px -3px var(--center-5) inset,
+        0 3px 3px -3px var(--center-6),
+        0 -4px 7px -4px var(--center-1),
+        0 4px 7px -4px var(--center-6);
+}
+
+.button-container .button .center:nth-child(1) {
+    z-index: 22;
+}
+.button-container .button .center:nth-child(2) {
+    z-index: 21;
+}
+.button-container .button .center:nth-child(3) {
+    z-index: 20;
+}
+.button-container .button .center:nth-child(4) {
+    z-index: 19;
+}
+.button-container .button .center:nth-child(5) {
+    z-index: 18;
+}
+.button-container .button .center:nth-child(6) {
+    z-index: 17;
+}
+.button-container .button .center:nth-child(7) {
+    z-index: 16;
+}
+.button-container .button .center:nth-child(8) {
+    z-index: 15;
+}
+.button-container .button .center:nth-child(9) {
+    z-index: 14;
+}
+.button-container .button .center:nth-child(10) {
+    z-index: 13;
+}
 
 .range-container {
     display: block;
@@ -749,19 +813,17 @@ body {
 
     border-radius: 0 0 6px 6px;
 
-    box-shadow: -1px 1px 3px -1px #945A42,
-        0.5px -1px 1px #945A42 inset,
-        -4px 2px 7px -2.25px #BD8974,
-        1px -1px 1px -1px #BD8974 inset,
-        1px -1px 1.5px -1px #CF9981 inset,
-        
-        -0.5px -0.5px 0.5px #FFEDE0 inset,
-        -1.5px -1.5px 2px -1px #FFE8DB inset,
-        -4px -1.5px 4px -2px #FEDACA inset,
-        
-        2px 1px 2px -1px #FEDACA,
-        
-        0 0 10px #FBDAD1,
+    box-shadow:
+        -1px 1px 3px -1px #945a42,
+        0.5px -1px 1px #945a42 inset,
+        -4px 2px 7px -2.25px #bd8974,
+        1px -1px 1px -1px #bd8974 inset,
+        1px -1px 1.5px -1px #cf9981 inset,
+        -0.5px -0.5px 0.5px #ffede0 inset,
+        -1.5px -1.5px 2px -1px #ffe8db inset,
+        -4px -1.5px 4px -2px #fedaca inset,
+        2px 1px 2px -1px #fedaca,
+        0 0 10px #fbdad1,
         -10px 10px 25px rgba(60, 3, 0, 0.015);
 }
 
@@ -776,46 +838,56 @@ body {
 
     border-radius: 1.5px;
 
-    background-color: #BBC9E6;
-
-    background-image: linear-gradient(rgba(134, 141, 169, 0.1) 0 25%, transparent 25% 50%, rgba(143, 150, 178, 0.1) 50% 75%, transparent 75%),
-        linear-gradient(90deg, rgba(159, 167, 188, 0.05), rgba(119, 130, 160, 0.1), rgba(159, 167, 188, 0.05)),
+    background-color: #bbc9e6;
+
+    background-image:
+        linear-gradient(
+            rgba(134, 141, 169, 0.1) 0 25%,
+            transparent 25% 50%,
+            rgba(143, 150, 178, 0.1) 50% 75%,
+            transparent 75%
+        ),
+        linear-gradient(
+            90deg,
+            rgba(159, 167, 188, 0.05),
+            rgba(119, 130, 160, 0.1),
+            rgba(159, 167, 188, 0.05)
+        ),
         radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%),
-        radial-gradient(#7B84A3, #929CB7, #BBC9E6);
-    background-size: 100% 4px, 
-        20% 100%, 
-        200px 200px, 
+        radial-gradient(#7b84a3, #929cb7, #bbc9e6);
+    background-size:
+        100% 4px,
+        20% 100%,
+        200px 200px,
         200% 300%;
-    background-repeat: repeat, 
-        repeat, 
-        no-repeat, 
-        no-repeat;
-    background-position: center center, 
-        center center, 
-        center center, 
+    background-repeat: repeat, repeat, no-repeat, no-repeat;
+    background-position:
+        center center,
+        center center,
+        center center,
         100% 50%;
 
-    box-shadow: 0 0 1px 0.25px #F6D0C7 inset,
-        0 -0.5px 0.75px 0.5px #8D6E6C inset,
-        0 0.75px 0.5px 0.25px #E7C9C7,
-        0 0.5px 2.5px 1.5px #F6D5CE,
-        
+    box-shadow:
+        0 0 1px 0.25px #f6d0c7 inset,
+        0 -0.5px 0.75px 0.5px #8d6e6c inset,
+        0 0.75px 0.5px 0.25px #e7c9c7,
+        0 0.5px 2.5px 1.5px #f6d5ce,
         0 0 10px rgba(100, 98, 120, 0.25) inset;
-
 }
 
 .ranges {
     list-style-type: none;
     font-family: sans-serif;
     font-weight: 600;
-    color: #1F233E;
+    color: #1f233e;
 
     font-size: 8px;
     position: absolute;
     top: 6px;
 
-    text-shadow: 0 0 0.2px #1F233E,
-        0 0 1px #BCBCD0;
+    text-shadow:
+        0 0 0.2px #1f233e,
+        0 0 1px #bcbcd0;
 }
 
 .ranges li {
@@ -838,7 +910,7 @@ body {
     width: 50px;
     height: 50px;
 
-    background-color: #606B89;
+    background-color: #606b89;
 
     position: absolute;
     left: 50.25px;
@@ -846,23 +918,19 @@ body {
 
     border-radius: 50px;
 
-    background-image: linear-gradient(20deg, #484653, #606B89, #8792AE);
+    background-image: linear-gradient(20deg, #484653, #606b89, #8792ae);
 
-    box-shadow: -0.5px 0.5px 0.5px #606B89,
-        0 0 1px 0.15px #606B89 inset,
-        0 0 1px 0.25px #606B89,
-        0 0 4px 1px #7886A1,
-        
+    box-shadow:
+        -0.5px 0.5px 0.5px #606b89,
+        0 0 1px 0.15px #606b89 inset,
+        0 0 1px 0.25px #606b89,
+        0 0 4px 1px #7886a1,
         0 15px 10px -2px rgba(51, 46, 52, 0.25),
-
         -30px -30px 50px 20px rgba(62, 21, 8, 0.1),
-        
         -12px -25px 17px 4px rgba(62, 21, 8, 0.22),
         -30px -45px 25px 4px rgba(62, 21, 8, 0.125),
         -45px -50px 35px 8px rgba(62, 21, 8, 0.125),
-        
         -5px -15px 10px -2px rgba(202, 206, 217, 0.25),
-        
         0 0 20px 3px rgba(202, 206, 217, 0.75);
 }
 
@@ -879,15 +947,17 @@ body {
     left: -3.25px;
     top: -3.25px;
 
-    background-image: linear-gradient(90deg, rgba(17, 18, 23, 0.5), transparent),
-        radial-gradient(#1A2332, #1C1F2D 66%, transparent 69%),
+    background-image:
+        linear-gradient(90deg, rgba(17, 18, 23, 0.5), transparent),
+        radial-gradient(#1a2332, #1c1f2d 66%, transparent 69%),
         linear-gradient(90deg, rgba(17, 18, 23, 0.75), transparent),
         linear-gradient(rgba(24, 31, 49, 0.9), transparent),
-        linear-gradient(45deg, transparent 30%, #7C899C, transparent 70%),
-        linear-gradient(-45deg, transparent 30%, #7C899C, transparent 70%),
-        radial-gradient(#1A2332, #1C1F2D, #10172A);
+        linear-gradient(45deg, transparent 30%, #7c899c, transparent 70%),
+        linear-gradient(-45deg, transparent 30%, #7c899c, transparent 70%),
+        radial-gradient(#1a2332, #1c1f2d, #10172a);
 
-    box-shadow: 0 0 1px 0.75px #10172A,
+    box-shadow:
+        0 0 1px 0.75px #10172a,
         0 0 2px 0.75px rgba(67, 68, 88, 0.5);
 }
 
@@ -896,27 +966,30 @@ body {
     font-family: sans-serif;
     font-weight: 600;
     font-size: 6.5px;
-    color: #1F233E;
+    color: #1f233e;
     letter-spacing: 0.75px;
 
     position: absolute;
     left: 107px;
     top: 29px;
 
-    text-shadow: 0 0 0.2px #1F233E,
-        0 0 1px #959AB2;
+    text-shadow:
+        0 0 0.2px #1f233e,
+        0 0 1px #959ab2;
 }
 
-.center p, .center ul li {
+.center p,
+.center ul li {
     text-transform: uppercase;
     font-family: sans-serif;
     font-weight: 600;
     font-size: 6px;
-    color: #1F233E;
+    color: #1f233e;
     letter-spacing: 0.5px;
 
-    text-shadow: 0 0 0.2px #1F233E,
-        0 0 1px #959AB2;
+    text-shadow:
+        0 0 0.2px #1f233e,
+        0 0 1px #959ab2;
 
     list-style-type: none;
 }
@@ -947,7 +1020,7 @@ body {
     width: 35px;
     height: 17px;
 
-    background-color: #0B090E;
+    background-color: #0b090e;
 
     border-radius: 35px;
 
@@ -955,20 +1028,24 @@ body {
     left: 210px;
     top: 22px;
 
-    background-image: linear-gradient(rgba(30, 31, 57, 0), rgba(30, 31, 57, 0.5), rgba(30, 31, 57, 0)),
-        linear-gradient(#09080E, #0A090F);
-
-    box-shadow: 0 0.5px 0.5px #353245 inset,
-        0 -0.25px 0.5px #4F515E inset,
-        0 -0.75px 0.75px #30354B inset,
-        0 1px 1px -0.25px #55515F inset,
-        0 1.25px 1px -0.5px #28252E inset,
-        0 0 5px 1px #1E1F39 inset,
-        
+    background-image:
+        linear-gradient(
+            rgba(30, 31, 57, 0),
+            rgba(30, 31, 57, 0.5),
+            rgba(30, 31, 57, 0)
+        ),
+        linear-gradient(#09080e, #0a090f);
+
+    box-shadow:
+        0 0.5px 0.5px #353245 inset,
+        0 -0.25px 0.5px #4f515e inset,
+        0 -0.75px 0.75px #30354b inset,
+        0 1px 1px -0.25px #55515f inset,
+        0 1.25px 1px -0.5px #28252e inset,
+        0 0 5px 1px #1e1f39 inset,
         0 0 0.5px 0.25px #353245,
-        0 0 1px #B4B9CC,
-        0 0.15px 2.5px -0.5px #9FA5BE,
-        
+        0 0 1px #b4b9cc,
+        0 0.15px 2.5px -0.5px #9fa5be,
         0 10px 10px -3px rgba(208, 209, 227, 0.5),
         0 20px 20px rgba(208, 209, 227, 0.35);
 }
@@ -979,43 +1056,43 @@ body {
     height: 15px;
     border-radius: 15px;
 
-    background-color: #140E1C;
+    background-color: #140e1c;
 
     position: absolute;
     top: 0.35px;
     left: 0.45px;
 
-    background-image: radial-gradient(rgba(208, 209, 227, 0.5), rgba(208, 209, 227, 0) 40%),
-        linear-gradient(90deg, #140E1C, #2D2C3C);
+    background-image:
+        radial-gradient(rgba(208, 209, 227, 0.5), rgba(208, 209, 227, 0) 40%),
+        linear-gradient(90deg, #140e1c, #2d2c3c);
 
-    background-repeat: no-repeat,
-        no-repeat;
+    background-repeat: no-repeat, no-repeat;
 
-    background-size: 120% 140%,
+    background-size:
+        120% 140%,
         100% 100%;
 
-    background-position: 3px 3px,
+    background-position:
+        3px 3px,
         top left;
 
-    box-shadow: 0 0 0.5px 0.75px #9A9CA9 inset,
-        0 0 0.15px #9A9CA9,
-        0 0 0.5px 0.25px #1B1B25,
-        0 0 1px #1E1E26,
-        
+    box-shadow:
+        0 0 0.5px 0.75px #9a9ca9 inset,
+        0 0 0.15px #9a9ca9,
+        0 0 0.5px 0.25px #1b1b25,
+        0 0 1px #1e1e26,
         0 5px 10px -2px rgba(51, 46, 52, 0.25),
-
         -5px -10px 10px 2px rgba(62, 21, 8, 0.15),
         -10px -17px 20px 5px rgba(62, 21, 8, 0.1),
         -20px -23px 25px 6px rgba(62, 21, 8, 0.15),
         -30px -35px 30px 10px rgba(62, 21, 8, 0.1);
 }
 
-
 .right .slider-wrapper {
     width: 50px;
     height: 50px;
 
-    background-color: #606B89;
+    background-color: #606b89;
 
     position: absolute;
     right: 50.25px;
@@ -1023,23 +1100,19 @@ body {
 
     border-radius: 50px;
 
-    background-image: linear-gradient(20deg, #3C3642, #4B485B, #535166);
+    background-image: linear-gradient(20deg, #3c3642, #4b485b, #535166);
 
-    box-shadow: -0.5px 0.5px 0.5px #606B89,
-        0 0 1px 0.15px #606B89 inset,
-        0 0 1px 0.25px #606B89,
-        0 0 4px 1px #7886A1,
-        
+    box-shadow:
+        -0.5px 0.5px 0.5px #606b89,
+        0 0 1px 0.15px #606b89 inset,
+        0 0 1px 0.25px #606b89,
+        0 0 4px 1px #7886a1,
         0 15px 10px -2px rgba(51, 46, 52, 0.25),
-
         -30px -30px 50px 20px rgba(62, 21, 8, 0.1),
-        
         -12px -25px 17px 4px rgba(62, 21, 8, 0.15),
         -30px -45px 25px 4px rgba(62, 21, 8, 0.075),
         -45px -50px 35px 8px rgba(62, 21, 8, 0.075),
-        
         -5px -15px 10px -2px rgba(202, 206, 217, 0.25),
-        
         0 0 20px 3px rgba(202, 206, 217, 0.75);
 }
 
@@ -1056,34 +1129,38 @@ body {
     left: 3.5px;
     top: -3.5px;
 
-    background-image: radial-gradient(#1F273A, rgba(22, 26, 38, 1) 66%, transparent 69%),
+    background-image:
+        radial-gradient(#1f273a, rgba(22, 26, 38, 1) 66%, transparent 69%),
         linear-gradient(90deg, rgba(22, 26, 38, 0.75), transparent),
         linear-gradient(rgba(24, 31, 49, 0.9), transparent),
-        linear-gradient(45deg, transparent 30%, #7C899C, transparent 70%),
-        linear-gradient(-45deg, transparent 30%, #7C899C, transparent 70%),
-        radial-gradient(#1F273A, #212C42, #171D2D);
+        linear-gradient(45deg, transparent 30%, #7c899c, transparent 70%),
+        linear-gradient(-45deg, transparent 30%, #7c899c, transparent 70%),
+        radial-gradient(#1f273a, #212c42, #171d2d);
 
-    box-shadow: 0 0 1px 0.75px rgba(22, 26, 38, 1),
+    box-shadow:
+        0 0 1px 0.75px rgba(22, 26, 38, 1),
         0 0 2px 0.75px rgba(67, 68, 88, 0.5);
 }
 
-.right ul, .right p {
+.right ul,
+.right p {
     text-transform: uppercase;
     font-family: sans-serif;
     font-weight: 600;
-    color: #1F233E;
+    color: #1f233e;
 
     font-size: 6.5px;
 
     letter-spacing: 0.5px;
 
-    text-shadow: 0 0 0.2px #1F233E,
-        0 0 1px #BCBCD0;
+    text-shadow:
+        0 0 0.2px #1f233e,
+        0 0 1px #bcbcd0;
 }
 
 .right ul {
     list-style-type: none;
-    
+
     position: absolute;
     left: 415px;
     top: 9px;
@@ -1113,50 +1190,61 @@ body {
     height: 150px;
 
     background-color: #656581;
-    
+
     border-radius: 1px;
 
     position: absolute;
     left: 60px;
     top: 360px;
 
-    background-image: linear-gradient(rgba(134, 141, 169, 0.1) 0 25%, transparent 25% 50%, rgba(143, 150, 178, 0.1) 50% 75%, transparent 75%),
-        linear-gradient(90deg, rgba(159, 167, 188, 0.05), rgba(119, 130, 160, 0.1), rgba(159, 167, 188, 0.05)),
+    background-image:
+        linear-gradient(
+            rgba(134, 141, 169, 0.1) 0 25%,
+            transparent 25% 50%,
+            rgba(143, 150, 178, 0.1) 50% 75%,
+            transparent 75%
+        ),
+        linear-gradient(
+            90deg,
+            rgba(159, 167, 188, 0.05),
+            rgba(119, 130, 160, 0.1),
+            rgba(159, 167, 188, 0.05)
+        ),
         radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%),
-        radial-gradient(#7B84A3, #929CB7, #BBC9E6);
-    background-size: 100% 4px, 
-        20% 100%, 
-        200px 200px, 
+        radial-gradient(#7b84a3, #929cb7, #bbc9e6);
+    background-size:
+        100% 4px,
+        20% 100%,
+        200px 200px,
         200% 300%;
-    background-repeat: repeat, 
-        repeat, 
-        no-repeat, 
-        no-repeat;
-    background-position: center center, 
-        center center, 
-        center center, 
+    background-repeat: repeat, repeat, no-repeat, no-repeat;
+    background-position:
+        center center,
+        center center,
+        center center,
         100% 50%;
 
-
-    box-shadow: 0 0 1px #E1C3B8 inset,
-        0 0 1px 0.5px #DFC6C1,
-        0 0 2px 1px #E2C1BA,
-        0.5px 0 0.5px 0.5px #929CB7 inset,
-        -0.5px 0 0.5px 0.5px #929CB7 inset;
+    box-shadow:
+        0 0 1px #e1c3b8 inset,
+        0 0 1px 0.5px #dfc6c1,
+        0 0 2px 1px #e2c1ba,
+        0.5px 0 0.5px 0.5px #929cb7 inset,
+        -0.5px 0 0.5px 0.5px #929cb7 inset;
 }
 
 .speed-container p {
     text-transform: uppercase;
     font-family: sans-serif;
     font-weight: 600;
-    color: #1F233E;
+    color: #1f233e;
 
     font-size: 7px;
 
     letter-spacing: 0.5px;
 
-    text-shadow: 0 0 0.2px #1F233E,
-        0 0 1px #929CB7;
+    text-shadow:
+        0 0 0.2px #1f233e,
+        0 0 1px #929cb7;
 }
 
 .speed-container p:first-child {
@@ -1176,18 +1264,19 @@ body {
     width: 5px;
     height: 100px;
     border-radius: 6px;
-    background-color: #120D14;
+    background-color: #120d14;
 
     position: absolute;
     top: 25px;
     left: 17px;
 
-    background-image: linear-gradient(#120D14, #1B0B15, #1D1419);
+    background-image: linear-gradient(#120d14, #1b0b15, #1d1419);
 
-    box-shadow: -0.75px 0 1px #9391A5 inset,
-        0.75px 0 1px #A79DA8 inset,
+    box-shadow:
+        -0.75px 0 1px #9391a5 inset,
+        0.75px 0 1px #a79da8 inset,
         -0.5px 0 1px -0.15px rgba(213, 212, 219, 0.1),
-        0 0 3px #9FA7AA;
+        0 0 3px #9fa7aa;
 }
 
 .speed-button-container {
@@ -1202,11 +1291,12 @@ body {
     top: 35px;
     left: 8px;
 
-    background-image: linear-gradient(70deg, #63687E 80%, #9A9BBA);
+    background-image: linear-gradient(70deg, #63687e 80%, #9a9bba);
 
-    box-shadow: 0 0 1px #63687E,
-        0 0 0.5px #63687E,
-        0 0 4px 0.5px #63687E;
+    box-shadow:
+        0 0 1px #63687e,
+        0 0 0.5px #63687e,
+        0 0 4px 0.5px #63687e;
 }
 
 .speed-button {
@@ -1221,75 +1311,81 @@ body {
     left: -3.5px;
     top: -1px;
 
-    background-image: radial-gradient(#353B51, #1E2736, #262739);
+    background-image: radial-gradient(#353b51, #1e2736, #262739);
 
-    box-shadow: 0 0 0.5px 0.25px #262739,
+    box-shadow:
+        0 0 0.5px 0.25px #262739,
         0 0 4px rgba(19, 18, 32, 0.5),
-        
         8px 10px 10px rgba(51, 46, 52, 0.25),
-
         -30px -30px 30px 30px rgba(62, 21, 8, 0.1),
-        
         -7px -10px 15px 3px rgba(62, 21, 8, 0.15),
         -15px -25px 20px 3px rgba(62, 21, 8, 0.1),
         -25px -50px 30px 3px rgba(62, 21, 8, 0.075),
-        
         -5px -15px 10px -2px rgba(202, 206, 217, 0.15),
-        
         0 0 20px 3px rgba(202, 206, 217, 0.75);
 }
 
-
 .vol-container {
     display: block;
     width: 40px;
     height: 150px;
 
     background-color: #656581;
-    
+
     border-radius: 1px;
 
     position: absolute;
     right: 60px;
     top: 360px;
 
-    background-image: linear-gradient(rgba(134, 141, 169, 0.1) 0 25%, transparent 25% 50%, rgba(143, 150, 178, 0.1) 50% 75%, transparent 75%),
-        linear-gradient(90deg, rgba(159, 167, 188, 0.05), rgba(119, 130, 160, 0.1), rgba(159, 167, 188, 0.05)),
+    background-image:
+        linear-gradient(
+            rgba(134, 141, 169, 0.1) 0 25%,
+            transparent 25% 50%,
+            rgba(143, 150, 178, 0.1) 50% 75%,
+            transparent 75%
+        ),
+        linear-gradient(
+            90deg,
+            rgba(159, 167, 188, 0.05),
+            rgba(119, 130, 160, 0.1),
+            rgba(159, 167, 188, 0.05)
+        ),
         radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%),
-        radial-gradient(#7B84A3, #929CB7, #BBC9E6);
-    background-size: 100% 4px, 
-        20% 100%, 
-        200px 200px, 
+        radial-gradient(#7b84a3, #929cb7, #bbc9e6);
+    background-size:
+        100% 4px,
+        20% 100%,
+        200px 200px,
         200% 300%;
-    background-repeat: repeat, 
-        repeat, 
-        no-repeat, 
-        no-repeat;
-    background-position: center center, 
-        center center, 
-        center center, 
+    background-repeat: repeat, repeat, no-repeat, no-repeat;
+    background-position:
+        center center,
+        center center,
+        center center,
         100% 50%;
 
-
-    box-shadow: 0 0 1px #E1C3B8 inset,
-        0 0 1px 0.5px #DFC6C1,
-        0 0 2px 1px #E2C1BA,
-        0.5px 0 0.5px 0.5px #929CB7 inset,
-        -0.5px 0 0.5px 0.5px #929CB7 inset;
+    box-shadow:
+        0 0 1px #e1c3b8 inset,
+        0 0 1px 0.5px #dfc6c1,
+        0 0 2px 1px #e2c1ba,
+        0.5px 0 0.5px 0.5px #929cb7 inset,
+        -0.5px 0 0.5px 0.5px #929cb7 inset;
 }
 
 .vol-container p {
     text-transform: uppercase;
     font-family: sans-serif;
     font-weight: 600;
-    color: #1F233E;
+    color: #1f233e;
 
     font-size: 7px;
 
     letter-spacing: 0.5px;
 
-    text-shadow: 0 0 0.2px #1F233E,
-        0 0 1px #929CB7;
+    text-shadow:
+        0 0 0.2px #1f233e,
+        0 0 1px #929cb7;
 }
 
 .vol-container p:first-child {
@@ -1309,18 +1405,19 @@ body {
     width: 5px;
     height: 100px;
     border-radius: 6px;
-    background-color: #120D14;
+    background-color: #120d14;
 
     position: absolute;
     top: 25px;
     left: 17px;
 
-    background-image: linear-gradient(#120D14, #1B0B15, #1D1419);
+    background-image: linear-gradient(#120d14, #1b0b15, #1d1419);
 
-    box-shadow: -0.75px 0 1px #9391A5 inset,
-        0.75px 0 1px #A79DA8 inset,
+    box-shadow:
+        -0.75px 0 1px #9391a5 inset,
+        0.75px 0 1px #a79da8 inset,
         -0.5px 0 1px -0.15px rgba(213, 212, 219, 0.1),
-        0 0 3px #9FA7AA;
+        0 0 3px #9fa7aa;
 }
 
 .vol-button-container {
@@ -1335,11 +1432,12 @@ body {
     top: 60px;
     left: 12px;
 
-    background-image: linear-gradient(70deg, #63687E 80%, #9A9BBA);
+    background-image: linear-gradient(70deg, #63687e 80%, #9a9bba);
 
-    box-shadow: 0 0 1px #63687E,
-        0 0 0.5px #63687E,
-        0 0 4px 0.5px #63687E;
+    box-shadow:
+        0 0 1px #63687e,
+        0 0 0.5px #63687e,
+        0 0 4px 0.5px #63687e;
 }
 
 .vol-button {
@@ -1354,20 +1452,16 @@ body {
     left: 3px;
     top: 1px;
 
-    background-image: radial-gradient(#353B51, #1E2736, #262739);
+    background-image: radial-gradient(#353b51, #1e2736, #262739);
 
-    box-shadow: 0 0 0.5px 0.25px #262739,
+    box-shadow:
+        0 0 0.5px 0.25px #262739,
         0 0 4px rgba(19, 18, 32, 0.5),
-        
         8px 10px 10px rgba(51, 46, 52, 0.25),
-
         -30px -30px 30px 30px rgba(62, 21, 8, 0.1),
-        
         -7px -10px 15px 3px rgba(62, 21, 8, 0.15),
         -15px -25px 20px 3px rgba(62, 21, 8, 0.1),
         -25px -50px 30px 3px rgba(62, 21, 8, 0.075),
-        
         -5px -15px 10px -2px rgba(202, 206, 217, 0.15),
-        
         0 0 20px 3px rgba(202, 206, 217, 0.75);
-}
\ No newline at end of file
+}
