feat: overhaul

src/styles/main.scss

@@ -43,30 +43,74 @@ body {
     display: flex;
 }
 
+.accordion {
+    border: 1px solid transparentize($gray, 0.3);
+    border-radius: 8px;
+    overflow: hidden;
+    background-color: $white;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    transition: box-shadow 0.3s ease;
+
+    &:hover {
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+}
+
+.accordion-header {
+    padding: 1rem 1.5rem;
+    cursor: pointer;
+    background-color: transparentize($gray, 0.7);
+    transition: background-color 0.2s ease;
+    user-select: none;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &:hover {
+        background-color: transparentize($gray, 0.5);
+    }
+
+    h2 {
+        margin: 0;
+        font-size: 1.2rem;
+        color: $black;
+        flex: 1;
+    }
+
+    .accordion-icon {
+        display: flex;
+        align-items: center;
+        font-size: 1rem;
+        color: $accent_colour;
+        transition: transform 0.2s ease;
+    }
+}
+
+.accordion-content {
+    padding: 1.5rem;
+    background-color: $white;
+}
+
 .accordion-content-enter {
     opacity: 0;
-    height: 0;
+    max-height: 0;
     overflow: hidden;
 }
 
 .accordion-content-enter-active {
     opacity: 1;
-    height: auto;
-    transition: opacity 300ms, height 300ms;
+    max-height: 2000px;
+    transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
 }
 
 .accordion-content-exit {
     opacity: 1;
-    height: auto;
+    max-height: 2000px;
 }
 
 .accordion-content-exit-active {
     opacity: 0;
-    height: 0;
-    transition: opacity 300ms, height 300ms;
+    max-height: 0;
+    transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
     overflow: hidden;
-}
-
-.accordion-header {
-    text-align: center;
 }