Update style.css

style.css

@@ -5,7 +5,11 @@
 body {
   margin: 0;
   padding: 0;
-@@ -15,19 +12,15 @@ body {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   background-color: black;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
@@ -25,7 +29,8 @@ body {
 .background {
   width: 430px;
   height: 520px;
-@@ -36,31 +29,26 @@ body {
+  position: absolute;
+  transform: translate(-50%, -50%);
   left: 50%;
   top: 50%;
 }
@@ -57,7 +62,13 @@ h1 {
 .box {
   background: rgba(255, 255, 255, 0.13);
   border-radius: 20px;
-@@ -74,12 +62,10 @@ h1 {
+  padding: 10px 25px;
+  backdrop-filter: blur(10px);
+  border: 2px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
+  color: #ffffff;
+  margin: 20px;
+  display: flex;
   flex-direction: column;
   gap: 10px;
 }
@@ -70,7 +81,9 @@ label {
 input {
   background-color: rgba(255, 255, 255, 0.07);
   outline: none;
-@@ -89,26 +75,21 @@ input {
+  border: none;
+  color: #fff;
+  font-size: 24px;
   padding: 5px 10px;
   border-radius: 10px;
 }
@@ -97,7 +110,12 @@ strong {
 #view,
 #unit,#sound{
   text-align: center;
-@@ -121,75 +102,62 @@ strong {
+  border-radius: 10px;
+  background-color: rgba(255, 255, 255, 0.07);
+  outline: none;
+  border: none;
+  padding: 5px 10px;
+  color: #e5e5e5;
   font-size: 24px;
   width: auto;
 }
@@ -139,7 +157,6 @@ select option {
 }
 
 .button {
-  margin-top: 5px;
   margin-top: 40px;
   margin-bottom: 16px;
   display: flex;
@@ -174,7 +191,8 @@ button {
 .connect {
   margin-top: 50px;
   display: flex;
-@@ -198,46 +166,37 @@ button {
+  justify-content: center;
+  align-items: center;
   gap: 50px;
   font-weight: 700;
 }
@@ -221,68 +239,150 @@ a:hover {
 #timerDisplay {
     position: fixed;
     top: 10px;
-@@ -249,7 +208,6 @@ a:hover {
+    right: 10px;
+    font-size: 2em;
+    font-weight: bold;
+    color: white;
+    background: rgba(0, 0, 0, 0.5);
     padding: 10px;
     border-radius: 5px;
 }
 
 #message {
     display: none;
     position: fixed;
-@@ -263,7 +221,6 @@ a:hover {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: rgb(113, 230, 245);
+    padding: 20px;
+    border: 1px solid black;
+    z-index: 1000;
     font-size: 18px;
     text-align: center;
 }
 
 #fullscreenBtn {
     position: fixed;
     top: 20px;
-@@ -277,7 +234,6 @@ a:hover {
+    left: 20px;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    border: none;
+    background: linear-gradient(#1845ad, #23a2f6);
+    color: white;
     border-radius: 5px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
 #fullscreenBtn:hover {
     background: linear-gradient(to right, #ff512f, #f09819)
 }
-@@ -288,7 +244,6 @@ footer{
-
+footer{
+  background-color: rgb(45, 45, 52);
+}
+.footerContainer{
+
   width: 100%;
   height: vw;
 
 }
 .socialIcons{
   display: flex;
-@@ -330,7 +285,6 @@ footer{
+  justify-content: center;
+}
+.socialIcons a{
+  text-decoration: none;
+  padding:  10px;
+
+  margin: 2vw;
+  border-radius: 50%;
+}
+.socialIcons a i{
+  font-size: 1em;
+  color: rgb(45, 45, 52);
+  opacity: 0,9;
+}
+/* Hover affect on social media icon */
+.socialIcons a:hover{
+  background-color: #111;
+  transition: 0.5s;
+}
+.socialIcons a:hover i{
+  color: white;
+  transition: 0.5s;
+}
+.footerNav{
+  margin: 30px 0;
+}
+.footerNav ul{
+  display: flex;
+  justify-content: center;
+  list-style-type: none;
+}
+.footerNav ul li a{
+  color:white;
+  margin: 20px;
+  text-decoration: none;
   font-size: 1.3em;
   opacity: 0.7;
   transition: 0.5s;
 
 }
 .footerNav ul li a:hover{
   opacity: 1;
-@@ -365,7 +319,6 @@ footer{
+}
+.footerBottom{
+  background-color: #111;
+  height: 5vw;
+  text-align: center;
+}
+.footerBottom p{
+  color: white;
+
+}
+.designer{
+  opacity: 0.7;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-weight: 400;
+  margin: 0px 5px;
+}
+@media (max-width: 700px){
+  .footerNav ul{
+      flex-direction: column;
+  } 
+  .footerNav ul li{
+      width:100%;
+      text-align: center;
+      margin: 10px;
+  }
+  .socialIcons a{
+    padding: 8px;
     margin: 4px;
 }
 }
 
 #musicDropdown {
   text-align: center;
   border-radius: 10px;
-@@ -379,7 +332,6 @@ footer{
+  background: linear-gradient(#1845ad, #23a2f6);
+  outline: none;
+  border: none;
+  padding: 5px 10px;
+  color: #e5e5e5;
+  font-size: 24px;
+  position: fixed;
   top: 90px; /* Adjust the position as needed */
   left: 10px;
 }
 
 #musicDropdown select {
   color: #e5e5e5;
   font-size: 24px;
-@@ -390,277 +342,5 @@ footer{
-
-#musicDropdown:hover {
-    background: linear-gradient(to right, #ff512f, #f09819);
-
-#musicDropdown:hover {
-    background: linear-gradient(to right, #ff512f, #f09819);
+  background-color: #5fd9f4;
+  border: none;
+  outline: none;
 }