Use 16px as default font-size for desktops

components/EventCard.module.css

@@ -24,7 +24,7 @@
   width: 100%;
 }
 
-.content > h2 {
+.content > h1 {
   font-size: calc(24rem / 16);
   font-weight: 700;
   font-style: normal;
@@ -33,15 +33,15 @@
 }
 
 .content,
-.content > h3 {
+.content > h2 {
   color: var(--purple-2);
-  font-size: calc(14rem / 16);
   font-weight: 400;
   font-style: normal;
   margin-top: 0;
-  margin-bottom: calc(14rem / 16);
+  margin-bottom: 0;
 }
 
-.content {
-  margin-bottom: 0;
+.content > h2 {
+  font-size: 1rem;
+  margin-bottom: calc(14rem / 16);
 }

components/EventCard.tsx

@@ -37,10 +37,10 @@ export function EventCard({
         )}
       </aside>
       <section className={styles.content}>
-        <h2>{name}</h2>
-        <h3>
+        <h1>{name}</h1>
+        <h2>
           <EventSetting date={date} online={online} location={location} />
-        </h3>
+        </h2>
         <div>{children}</div>
       </section>
     </article>

components/EventDescriptionCard.module.css

@@ -28,7 +28,6 @@
 
 .desc {
   color: var(--purple-2);
-  font-size: calc(12rem / 16);
   margin-top: calc(12rem / 16);
 }
 
@@ -53,7 +52,7 @@
   margin: 0;
   color: var(--blue-1);
   font-weight: bolder;
-  font-size: calc(12rem / 16);
+  font-size: calc(14rem / 16);
 }
 
 @media only screen and (max-width: calc(768rem / 16)) {

components/EventDescriptionCard.tsx

@@ -55,10 +55,10 @@ export function EventDescriptionCard({
       {poster && <Image className={styles.poster} src={poster} alt={name} />}
 
       <div className={styles.details}>
-        <h3 className={styles.name}>{name}</h3>
-        <h4 className={styles.setting}>
+        <h1 className={styles.name}>{name}</h1>
+        <h2 className={styles.setting}>
           <EventSetting date={date} online={online} location={location} />
-        </h4>
+        </h2>
         <div className={styles.desc}>{children}</div>
         <div className={styles.spacer}></div>
 

components/MiniEventCard.module.css

@@ -4,6 +4,7 @@
   position: relative;
   color: var(--purple-2);
   padding: calc(20rem / 16);
+  /* FIXME: Check figma for updated size */
   font-size: calc(14rem / 16);
 }
 

components/NewsCard.module.css

@@ -22,7 +22,6 @@
 .content {
   line-height: calc(21rem / 16);
   color: var(--purple-2);
-  font-size: calc(14rem / 16);
 }
 
 @media only screen and (max-width: calc(768rem / 16)) {

components/TeamMember.module.css

@@ -13,7 +13,6 @@
 
 .caption {
   text-align: center;
-  font-size: calc(14rem / 16);
   margin-top: calc(24rem / 16);
 }
 

components/TeamMemberCard.module.css

@@ -70,7 +70,6 @@
   .name,
   .role,
   .description {
-    font-size: 1rem;
     line-height: 1.5;
   }
 }
@@ -98,7 +97,6 @@
   .name,
   .role,
   .description {
-    font-size: calc(14rem / 16);
     line-height: 1.5;
   }
 

pages/_app.css

@@ -1,13 +1,9 @@
-* {
+body {
   font-family: "Poppins", "sans-serif";
-}
-
-code, pre {
-  font-family: monospace;
-}
+  font-size: 1rem;
+  margin: 0;
 
-/* Default is light theme */
-body {
+  /* Default is light theme */
   --white: #ffffff;
   --off-white: #fdf8f5;
   --teal-1: #76ffdc;
@@ -22,16 +18,16 @@ body {
     #1481e3 -17.95%,
     #4ed4b2 172.82%
   );
-
-  margin: 0;
 }
 
+/* FIXME: Dark theme is the same as light theme right now */
 .dark {
   --white: #ffffff;
   --off-white: #fdf8f5;
   --teal-1: #76ffdc;
   --teal-2: #4ed4b2;
   --blue-1: #5caff9;
+  --blue-1-20: #5caff934;
   --blue-2: #1482e3;
   --purple-1: #525284;
   --purple-2: #2a2a62;
@@ -41,3 +37,9 @@ body {
     #4ed4b2 172.82%
   );
 }
+
+@media only screen and (max-width: calc(375rem / 16)) {
+  body {
+    font-size: calc(14rem / 16);
+  }
+}