px -> rem

components/Timeline.module.css

@@ -4,7 +4,7 @@
 
 .line {
   position: absolute;
-  width: 5px;
+  width: calc(5rem / 16);
   background-color: var(--secondary-accent);
 }
 
@@ -15,7 +15,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-around;
-  gap: 20px;
+  gap: calc(20rem / 16);
 }
 
 .timelineSection {
@@ -27,9 +27,9 @@
 }
 
 .time {
-  margin: 0px;
+  margin: 0;
   text-align: right;
-  font-size: 30px;
+  font-size: calc(30rem / 16);
   font-weight: 700;
   color: var(--secondary-accent);
   word-wrap: break-word;
@@ -40,30 +40,30 @@
 }
 
 .circle {
-  margin-left: 2px;
-  width: 30px;
-  height: 30px;
-  border-radius: 30px;
+  margin-left: calc(2rem / 16);
+  width: calc(30rem / 16);
+  height: calc(30rem / 16);
+  border-radius: calc(30rem / 16);
   background-color: var(--secondary-accent);
-  box-shadow: 0px 0px 30px var(--secondary-accent);
+  box-shadow: calc(0rem / 16) calc(0rem / 16) calc(30rem / 16) var(--secondary-accent);
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .innerCircle {
-  width: 15px;
-  height: 15px;
-  border-radius: 15px;
+  width: calc(15rem / 16);
+  height: calc(15rem / 16);
+  border-radius: calc(15rem / 16);
   background-color: var(--label);
 }
 
 .text {
   height: fit-content;
-  margin: 0px;
-  padding: 5px;
-  border-radius: 10px;
-  font-size: 20px;
+  margin: 0;
+  padding: calc(15rem / 16);
+  border-radius: calc(10rem / 16);
+  font-size: calc(20rem / 16);
   font-weight: 700;
   color: var(--label);
   background-color: var(--card-background);
@@ -72,6 +72,6 @@
 }
 
 .textHover {
-  border: 2px solid var(--secondary-accent-light);
-  box-shadow: 0px 0px 20px var(--secondary-accent);
+  border: calc(2rem / 16) solid var(--secondary-accent-light);
+  box-shadow: calc(0rem / 16) calc(0rem / 16) calc(20rem / 16) var(--secondary-accent);
 }