changed some styles

package-lock.json

@@ -1912,7 +1912,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
       "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
       "engines": {
         "node": ">=6"
       }

src/App.jsx

@@ -5,7 +5,7 @@ import Footer from "./components/Footer"
 function App() {
   return <div className="flex flex-col min-h-screen">
     <Header />
-    <main className="flex transition-color-mode p-12 flex-grow bg-surface dark:bg-surface-dark">
+    <main className="flex transition-color-mode md:p-7 2xl:p-12 flex-grow bg-surface dark:bg-surface-dark">
       <Outlet />
     </main>
     <Footer />

src/components/FormBox.jsx

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 function FormBox({title, children, alt = false}) {
   return (
     <div className={clsx(alt ? 'bg-secondary-variant dark:bg-secondary-variant-dark border-secondary-variant dark:border-secondary-variant-dark' : 'bg-surface-variant dark:bg-surface-variant-dark', 'transition-color-mode font-body border-secondary dark:border-secondary-dark border-2 p-4 rounded-3xl relative h-full')}>
-        <label className={clsx( alt && 'bg-surface dark:bg-surface-dark border-3 border-secondary-variant dark:border-secondary-variant-dark', 'font-body absolute left-11 -top-4 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark font-medium py-1 px-4 rounded-full')}>{title}</label>
+        <span className={clsx( alt && 'bg-surface dark:bg-surface-dark border-3 border-secondary-variant dark:border-secondary-variant-dark', 'font-body absolute left-11 -top-4 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark font-medium py-1 px-6 rounded-full')}>{title}</span>
       {children}
     </div>
   );

src/components/Header.jsx

@@ -42,7 +42,7 @@ function Header() {
       ];
     
     return (
-        <div className="transition-color-mode px-12 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark">
+        <div className="transition-color-mode px-7 2xl-px-12 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark">
             <AppTitle />
             <BannerInfo info={userInfo} />
             <Separator />

src/pages/Home.jsx

@@ -15,7 +15,7 @@ function Home() {
           <FormBox title={t('holidayList')} alt={true}>
             <ul className="list-inside list-disc px-4">
               {holidayList.map((holiday, index) => (
-                <li key={index} className="font-body py-2 text-surface dark:text-surface-dark text-lg/loose">{t(holiday.date)} - {t(holiday.name)}</li>
+                <li key={index} className="font-body 2xl:py-2 text-surface dark:text-surface-dark text-lg/loose">{t(holiday.date)} - {t(holiday.name)}</li>
               ))}
             </ul>
           </FormBox>
@@ -25,7 +25,7 @@ function Home() {
             <ul className="list-inside list-disc px-4">
               {
                 Object.keys(userInformation).map((key, index) => (
-                  <li key={index} className="font-body py-2 text-surface-dark dark:text-surface text-lg/loose">{t(key)}: {t(userInformation[key])}</li>
+                  <li key={index} className="font-body 2xl:py-2 text-surface-dark dark:text-surface text-lg/loose">{t(key)}: {t(userInformation[key])}</li>
                 ))
               }
             </ul>
@@ -37,7 +37,7 @@ function Home() {
           <FormBox title={t('notifications')}>
             <ul className="list-inside list-disc px-4">
               {homePageNotifications.map((notification, index) => (
-                <li key={index} className="font-body py-2 text-surface-dark dark:text-surface text-lg/relaxed">{t(notification)}</li>
+                <li key={index} className="font-body py-1 2xl:py-2 text-surface-dark dark:text-surface text-lg/relaxed">{t(notification)}</li>
               ))}
             </ul>
           </FormBox>