fix: small css tweaks

Author: Jan Stevens

src/components/ContactCard.astro

@@ -4,7 +4,7 @@ import { Icon } from 'astro-icon/components';
 ---
 
 <a target="_blank" href={url} aria-label={url_name}>
-  <button class="btn btn-outline btn-md mr-2">
+  <button class="btn btn-outline btn-md">
     <Icon name={icon} class="w-6 h-6" aria-label={url_name} />{url_name}
   </button>
 </a>

src/components/Container.astro

@@ -88,7 +88,7 @@ const contact = await Astro.glob('../pages/contact/*.md');
   </AccordionLayout>
 
   <AccordionLayout title={'Contact'} icon={'carbon:location-person'}>
-    <div class="flex flex-wrap content-around gap-4 justify-center">
+    <div class="flex flex-wrap content-around gap-6 justify-center">
       {
         contact.map((item) => {
           return (

src/components/Header.astro

@@ -3,7 +3,7 @@ import { Icon } from 'astro-icon/components';
 import * as about from '../pages/about/about.md';
 ---
 
-<header class="mx-auto pt-12 pb-2 relative">
+<header class="mx-auto pt-12 pb-2 relative px-4">
   <article
     class="flex flex-col md:flex-col items-center gap-4 w-full max-w-2xl"
   >

src/layouts/AccordionLayout.astro

@@ -8,9 +8,9 @@ const { title, icon } = Astro.props;
   <div class="collapse collapse-arrow ease-in-out duration-300">
     <input aria-label={title} type="checkbox" />
     <div class="collapse-title font-extrabold tracking-tight md:text-2xl">
-      <div class="flex">
+      <div class="flex items-center">
         <Icon name={icon} class="w-8 h-8 mr-4" />
-        {title}
+        <span>{title}</span>
       </div>
     </div>
     <div class="collapse-content">

src/pages/index.astro

@@ -76,7 +76,7 @@ import { Icon } from 'astro-icon/components';
     >
     </div>
     <main
-      class="mx-auto flex-grow max-h-[90vh] md:max-h-[70vh] max-w-3xl overflow-y-scroll py-2 grid w-[95vw]"
+      class="mx-auto flex-grow max-h-[90vh] md:max-h-[70vh] max-w-3xl py-2 grid w-[95vw]"
     >
       <div class="container">
         <Container />
@@ -100,22 +100,19 @@ import { Icon } from 'astro-icon/components';
 
   @media only screen and (max-width: 480px) {
     * {
-      font-size: 12px;
+      font-size: 14px;
     }
   }
 
-  .overflow-y-scroll::-webkit-scrollbar {
+  ::-webkit-scrollbar {
     width: 3px;
+    scrollbar-width: 1px;
   }
 
-  .overflow-y-scroll::-webkit-scrollbar-thumb {
+  ::-webkit-scrollbar-thumb {
     background-color: oklch(var(--s));
   }
 
-  .overflow-y-scroll {
-    scrollbar-width: 1px;
-  }
-
   @media (max-width: 768px) {
     .container {
       flex-direction: column;