Use px for spacing-related styling

It doesn't make sense to increase these spaces in proportion with zoom

diff --git a/style.css b/style.css
index eadb197dd1a7e92b39a10f0242caa62ee2dd3ba2..edac39df0f5d5ff6174a723f189fb6694735435a 100644 (file)
--- a/style.css
+++ b/style.css
@@ -15,21 +15,21 @@ body {
 header, footer {
   display: flex;
   align-items: center;
-  inline-size: min(100% - 2rem, 1440px);
-  padding-block: 1rem;
+  inline-size: min(100% - 16px, 1440px);
+  padding-block: 16px;
   margin-inline: auto;
   position: relative;
 }
 
 header {
   justify-content: space-between;
-  margin-block-end: 1rem;
+  margin-block-end: 16px;
 }
 
 footer {
   flex-direction: column;
   gap: 8px;
-  margin-block-start: 1rem;
+  margin-block-start: 16px;
 }
 
 header::after, footer::before {
@@ -130,7 +130,7 @@ a, form > button {
 
 a:hover, a:focus, form > button:hover, form > button:focus {
   background: hsl(30deg 80% 90%);
-  border-radius: 0.25rem;
+  border-radius: 4px;
   text-decoration-color: currentColor;
   transition: 150ms;
 }
@@ -170,15 +170,15 @@ code:not(.hljs) {
 .card-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
-  grid-gap: 1rem;
-  inline-size: min(100% - 2rem, 1440px);
+  grid-gap: 16px;
+  inline-size: min(100% - 16px, 1440px);
   margin-inline: auto;
-  margin-block-end: 1rem;
+  margin-block-end: 16px;
 }
 
 .skeleton-line {
-  block-size: 1rem;
-  margin-block: 1rem;
+  block-size: 16px;
+  margin-block: 16px;
   animation: shimmer 1s alternate infinite;
   background: hsl(0deg 0% 50%);
 }
@@ -194,10 +194,10 @@ code:not(.hljs) {
   display: flex;
   flex-flow: column;
   justify-content: center;
-  gap: 1rem;
-  padding: 1rem;
+  gap: 16px;
+  padding: 16px;
   border: solid hsl(0deg 0% 55% / 0.1);
-  border-radius: 1rem;
+  border-radius: 16px;
   box-shadow:
     0px 1px 1.1px hsl(0deg 0% 69% / 0.17),
     0px 2.3px 2.6px -0.6px hsl(0deg 0% 69% / 0.17),