From 0614098b94c3e8b6e70ff567d4830996508392c5 Mon Sep 17 00:00:00 2001
From: Syed Shayan <shayansyed712@gmail.com>
Date: Wed, 24 Jan 2024 22:37:54 +0500
Subject: [PATCH] changes

---
 style.css | 139 +++++++++++++++++++++++++++++++-----------------------
 1 file changed, 79 insertions(+), 60 deletions(-)

diff --git a/style.css b/style.css
index 5dac41c..8d7e03c 100644
--- a/style.css
+++ b/style.css
@@ -1,61 +1,80 @@
-body{
-    background:black;
-    font-family: orbitron , sans-serif;
- }
- 
- h1 {
-     display: flex;
-     justify-content: center;
-     position: relative;
-     top: 14rem;
-     font-size: 4rem;
-     font-family: sans-serif;
-     text-shadow: 0px 0px 3px white;
-     color: azure;
- }
- 
- .container {
-     display: flex;
-     justify-content: center;
-     font-size: 4rem;
-     position: relative;
-     top: 16rem;
-     color: #fff;
-     text-shadow: 0px 0px 20px rgb(10 , 175 , 230 , 1) , 0px 0px 20px rgb(10 , 175 , 230 , 0);
-     border: 9px solid rgb(150, 150, 150);
-     border-radius: 12px;
-     margin-inline: 450px;
-     padding: 12px;
- }
- .container span {
-     margin: 3px;
- }
- 
- #am-Pm {
-     font-size: 1.5rem;
-     /* text-align: center; */
-     display: flex;
-     align-items: end;
- }
- 
+body {
+  background: black;
+  font-family: orbitron, sans-serif;
+}
+
+h1 {
+  display: flex;
+  justify-content: center;
+  position: relative;
+  top: 4rem; /* Adjusted for responsiveness */
+  font-size: 4rem;
+  font-family: sans-serif;
+  text-shadow: 0px 0px 3px white;
+  color: azure;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  font-size: 4rem;
+  position: relative;
+  top: 6rem; /* Adjusted for responsiveness */
+  color: #fff;
+  text-shadow: 0px 0px 20px rgb(10, 175, 230, 1),
+    0px 0px 20px rgb(10, 175, 230, 0);
+  border: 9px solid rgb(150, 150, 150);
+  border-radius: 12px;
+  margin: 0 auto; /* Center the container */
+  max-width: 600px; /* Adjusted for responsiveness */
+  padding: 12px;
+}
+
+.container span {
+  margin: 3px;
+}
+
+#am-Pm {
+  font-size: 1.5rem;
+  display: flex;
+  align-items: end;
+}
+
 #date {
-     display: flex;
-     justify-content: center;
-     align-items: center; 
-    position: relative; 
-    top : 4rem; 
-     text-shadow: 0px 0px 20px rgb(10 , 175 , 230 , 1) , 0px 0px 20px rgb(10 , 175 , 230 , 0);
-     color:#fff ;
-     border: 9px solid rgb(150, 150, 150);
-     border-top-right-radius: 12px;
-     border-top-left-radius: 12px;
-     z-index: -1; 
-     margin-inline: 450px;
- 
- }
- 
- #date span{
-     padding: 12px;
-     font-size: 1.8rem;
- }
- 
\ No newline at end of file
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  top: 2rem; /* Adjusted for responsiveness */
+  text-shadow: 0px 0px 20px rgb(10, 175, 230, 1),
+    0px 0px 20px rgb(10, 175, 230, 0);
+  color: #fff;
+  border: 9px solid rgb(150, 150, 150);
+  border-top-right-radius: 12px;
+  border-top-left-radius: 12px;
+  z-index: -1;
+  margin: 0 auto; /* Center the container */
+  max-width: 600px; /* Adjusted for responsiveness */
+}
+
+#date span {
+  padding: 12px;
+  font-size: 1.8rem;
+}
+
+/* Media Query for smaller screens */
+@media screen and (max-width: 768px) {
+  h1 {
+    font-size: 3rem;
+  }
+
+  .container,
+  #date {
+    font-size: 2rem;
+    top: 3rem;
+  }
+
+  #date span {
+    font-size: 1.5rem;
+  }
+}