Update style

index.css

@@ -8,21 +8,21 @@
   --accent-2: #ff00c8;
   --glow: #00ffea;
 
-  --outer-pad: 16px;
-  --gap: 14px;
-  --radius: 18px;
-  --radius-sm: 12px;
+  --outer-pad: clamp(16px, 1.8vw, 80px);
+  --gap: clamp(12px, 1.3vw, 56px);
+  --radius: clamp(18px, 1.4vw, 60px);
+  --radius-sm: clamp(12px, 0.9vw, 40px);
 
   --font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif;
 
-  --time-size: 35px;
-  --date-size: clamp(16px, 1.25vh, 22px);
-  --h2-size: clamp(15px, 1.05vh, 19px);
-  --cond-size: clamp(16px, 1.25vh, 21px);
-  --info-size: clamp(12px, 1vh, 17px);
+  --time-size: clamp(60px, 8.5vh, 200px);
+  --date-size: clamp(22px, 2.5vh, 58px);
+  --h2-size: clamp(18px, 2vh, 46px);
+  --cond-size: clamp(20px, 2.3vh, 54px);
+  --info-size: clamp(16px, 2vh, 46px);
 
-  --table-head: clamp(12px, 1vh, 15px);
-  --table-cell: clamp(12px, 1.05vh, 16px);
+  --table-head: clamp(14px, 1.6vh, 38px);
+  --table-cell: clamp(14px, 1.9vh, 44px);
 }
 
 *{box-sizing:border-box}
@@ -69,8 +69,8 @@ body{
 .topLeft{
   display:flex;
   flex-direction:column;
-  padding:12px;
-  gap:10px;
+  padding:clamp(12px, 1.2vw, 54px);
+  gap:clamp(10px, 1vh, 46px);
 }
 
 .dateTime{
@@ -78,8 +78,8 @@ body{
   min-width:0;
   display: grid;
   grid-template-columns: 1fr 38%;   /* fully responsive % — no more fixed px clipping */
-  gap: 8px 24px;
-  padding:14px 18px;
+  gap: clamp(8px, 0.9vh, 20px) clamp(24px, 2.8vw, 110px);
+  padding:clamp(14px, 1.6vh, 38px) clamp(18px, 2vw, 80px);
   border-radius:var(--radius-sm);
   background:rgba(8,4,28,.85);
   border:1px solid rgba(0,255,234,.35);
@@ -116,13 +116,13 @@ body{
   flex-direction:column;
   align-items: flex-end;
   justify-content: center;
-  gap: 6px;
+  gap: clamp(6px, 0.8vh, 18px);
   height: 100%;
   min-width:0;
 }
 
 #weatherDescription{
-  font-size:clamp(21px, 1.85vh, 29px);
+  font-size:clamp(36px, 3.5vh, 82px);
   font-weight:700;
   color:#fff;
   text-shadow:0 0 15px var(--accent);
@@ -133,7 +133,7 @@ body{
 }
 
 #currentWeatherLogo{
-  font-size:clamp(46px, 3.9vh, 60px);
+  font-size:clamp(70px, 7vh, 165px);
   line-height:1;
   filter:drop-shadow(0 0 22px var(--accent-2));
   margin:0;
@@ -161,7 +161,7 @@ body{
   flex:1 1 auto;
   min-width:0;
   min-height:0;
-  padding:10px;
+  padding:clamp(10px, 1vw, 44px);
 }
 
 .weatherInfo{
@@ -169,15 +169,15 @@ body{
   display:grid;
   grid-template-columns:minmax(0,1fr) minmax(0,1fr);
   grid-template-rows:minmax(0,1fr) minmax(0,1fr);
-  gap:6px 8px;
+  gap:clamp(6px, 0.7vh, 16px) clamp(8px, 0.8vw, 34px);
   align-content:stretch;
   align-items:stretch;
 }
 
 .weatherItem{
   margin:0;
-  padding:6px 9px;
-  border-radius:14px;
+  padding:clamp(6px, 1.1vh, 26px) clamp(9px, 1.3vw, 52px);
+  border-radius:clamp(14px, 0.9vw, 36px);
   background:rgba(255,255,255,.09);
   border:1px solid rgba(0,255,234,.25);
   font-size:var(--info-size);
@@ -185,17 +185,22 @@ body{
   display:flex;
   align-items:center;
   justify-content:center;
-  box-shadow:0 4px 12px rgba(0,0,0,.4);
+  box-shadow:0 4px 20px rgba(0,0,0,.4);
 }
 
-#temp,#feels,#wind,#humidity{
+#temp,#feels,#wind,#dewPoint{
   color:var(--text);
   font-weight:700;
 }
 
+#wind svg{
+  width:clamp(24px, 2.2vh, 52px);
+  height:clamp(24px, 2.2vh, 52px);
+}
+
 /* -------- Top Right (Radar) -------- */
 .topRight{
-  padding:12px;
+  padding:clamp(12px, 1.2vw, 54px);
   display:flex;
   align-items:center;
   justify-content:center;
@@ -216,7 +221,7 @@ body{
 }
 
 /* -------- Bottom Left (Forecast) -------- */
-.bottomLeft{padding:12px;display:flex;min-width:0;min-height:0}
+.bottomLeft{padding:clamp(12px, 1.2vw, 54px);display:flex;min-width:0;min-height:0}
 
 table{
   width:100%;
@@ -231,7 +236,7 @@ table{
 }
 
 thead th{
-  padding:8px;
+  padding:clamp(8px, 1.1vh, 26px) clamp(8px, 1.1vw, 44px);
   font-size:var(--table-head);
   line-height:1.1;
   color:#fff;
@@ -242,7 +247,7 @@ thead th{
 }
 
 tbody td{
-  padding:6px 8px;
+  padding:clamp(6px, 1vh, 22px) clamp(8px, 1vw, 40px);
   font-size:var(--table-cell);
   line-height:1.1;
   color:var(--muted);
@@ -264,7 +269,7 @@ tbody tr:last-child td{border-bottom:none}
 
 /* -------- Bottom Right -------- */
 .bottomRight{
-  padding:12px;
+  padding:clamp(12px, 1.2vw, 54px);
   background:radial-gradient(900px 600px at 20% 20%, rgba(0,255,234,.1), transparent 55%), rgba(8,4,28,.85);
 }