Update style.css

style.css

@@ -1,28 +1,391 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+html, body {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      overflow-x: hidden !important;
+    }
+    body {
+      background-color: #000000;
+      margin: 0;
+    }
+    #main {
+      display: flex;
+      flex-direction: column;
+      margin: 50px;
+      margin: auto;
+    }
+    #cont {
+      background-color: #030303;
+      padding: 0px;
+      border-radius: 12px;
+      box-shadow: 8px 8px 16px #050505, -8px -8px 16px #080808;
+      display: flex;
+      align-items: center;
+      background: linear-gradient(black, black) padding-box,
+                linear-gradient(to left, cyan, purple) border-box;
+      border-radius: 12px;
+      border: 2.5px solid transparent;
+      width: 70%;
+      height: 9vh;
+      margin: auto;
+      margin-top: 5%;
+      margin-bottom: 20px;
+    }
+    #inp {
+      flex-grow: 1;
+      padding: 10px;
+      margin: 10px;
+      background: transparent;
+      border: none;
+      border-radius: 8px;
+      box-shadow: linear-gradient(145deg, rgb(0, 249, 153), #ff002b);
+      color: #fff;
+      outline: none;
+      min-height:40px;
+    }
+    #cont button {
+      padding: 2.5vh 4.6vh;
+      margin: 1vh;
+      background: linear-gradient(155deg, rgb(0, 149, 249), #9D00FF, rgb(255, 0, 43));
+      border: none;
+      border-radius: 8px;
+      color: #fff;
+      cursor: pointer;
+    }
+   #cont button:hover {
+      background: linear-gradient(145deg, #00ffab,  rgb(255, 0, 43));
+    }
+    #as {
+      display: flex;
+      flex-direction: row;
+      width: 70%;
+      margin: auto;
+      justify-content: space-between; 
+    }
+    #as button {
+      background-color: #0a0a0a; 
+      border: none;
+      padding: 3vh 4.5vh;
+      font-size: 15px;
+      color: #ffffff; 
+      cursor: pointer;
+      border-radius: 12px;
+      transition: box-shadow 0.3s ease-in-out;
+    }
+#model{
+  background-color: #181717; 
+      border: none;
+      padding: 3vh 4.5vh;
+      font-size: 15px;
+      color: #ffffff; 
+      cursor: pointer;
+      border-radius: 12px;
+      transition: box-shadow 0.3s ease-in-out;
+    
+     padding: 0px 0px 0px 20px ;
 }
+    #as button:hover {
+      box-shadow: 15px 15px 30px #0d0d0d, -15px -15px 30px #1a1a1a; /* Adjusted shadow and highlight on hover */
+    }
+    @media only screen and (max-width: 600px) {
+      #cont {
+        width: 90%;
+        margin-bottom: 20px;
+      }
+      #main{
+        width: 90%;
+      }
+      #cont button {
+        padding: 15px 15px; /* Adjust button padding for smaller screens */
+      }
+      #as{
+        width: 88%;
+      }
+      #as button{
+       
+        padding: 15px 20px; /* Adjust button padding for smaller screens */
+      }
+      .mod{
+        
+      }
+    }
+    @media only screen and (max-width: 365px){
+      #cont{
+        width: 94%;
+      }
+      #main{
+        width: 94%;
+      }
+      #as{
+        width: 94%;
+      }
+    }
+dialog{
+  background: rgba(29, 29, 29, 1);
+border-radius: 16px;
+box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+margin-top: 20px;
+border: 1px solid rgba(14, 13, 13, 0.3);
+  z-index: 100;
+  background: "Black";
+}
+#sli{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ color: #eeeeee;
+}
+label{
+  font-family: 'Barlow Condensed';
+  
+  font-size: 21px;
+  margin-right: 10px;
+}
+#sli input{
+  border: 1px solid rgb(137, 9, 223);
+  outline: none;
+  border-radius: 5px;
+  padding: 7px 20px;
+  background-color: transparent ;
+  color: white;
+  font-family: 'Barlow Condensed';
+}
+#Apply{
+  background-color: rgb(0, 247, 173);
+  padding: 5px 10px;
+  border: none;
+  color: #000000;
+  font-weight:500;
+  font-family: Arial, Helvetica, sans-serif;
+ font-size: 15px;
+ border-radius: 4px;
+}
+#close{
+  float: right;background-color: rgb(223, 7, 79); padding: 5px 10px;
+  border: none;
+  color: #000000;
+  font-weight:500;
+  font-family: Arial, Helvetica, sans-serif;
+ font-size: 15px;
+ border-radius: 4px;
+}
+#styles{
+  display: flex;
+  flex-direction: row;
+  gap: 6px;
+  color: white;
+  font-family: 'Barlow Condensed';
+  font-size: 20px;
+  flex-wrap: wrap;
+ 
+}
+
+
+@media screen and (min-width: 500px) and (max-width: 720px) {
+  dialog{
+    
+    max-width: 420px;
+  }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+  #cont{
+  height: 7vh;
+ }
 }
+#styles{
+  align-items: center;
+  justify-content: center;
+}
+@media screen and (max-width: 500px) {
+  .ad{
+  display: flex;
+  flex-direction: row;
+}
+  dialog {
+    max-width: 300px;
+  }
+
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+#jd {
+   font-size: 14px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+
+
+#styles{
+  align-items: center;
+  justify-content: center;
+}
+}
+#jd{
+  margin: 10px;
+  padding: 5px;
+  background-color: transparent;  
+  color: #eeeeee;
+  margin-right: 0;
+  margin-left: 0;
+  background: linear-gradient(black, rgb(0, 0, 0)) padding-box,
+                linear-gradient(to right, rgb(1, 255, 234),#ff0055) border-box;
+    border-radius: 20px;
+    border: 2.5px solid transparent;
+  border-radius: 7px;
+  margin-left: 0px;
+  font-family: 'Barlow Condensed';
+  font-size: 18px;
+  color: white;
+}
+#jd:hover{
+  background: linear-gradient(black, black) padding-box,
+                linear-gradient(to right, blue,#00ffdd) border-box;
+    border-radius: 10px;
+    border: 2.5px solid transparent;
+}
+#ow{
+  float: right;
+  margin: 10px;
+  padding: 10px;
+  background-color: transparent;
+  color: #eeeeee;
+  background: linear-gradient(black, black) padding-box,
+                linear-gradient(to right, rgb(0, 255, 149), rgb(174, 0, 255)) border-box;
+    border-radius: 10px;
+    border: 2.5px solid transparent;
+  border-radius: 10px;
+  margin-bottom: 0px;
+  margin-right: 0;
+  margin-left: 0;
+  border: 2px solid white;
+}
+#ow:hover{
+  background: linear-gradient(black, black) padding-box,
+                linear-gradient(to right, rgb(174, 0, 255),rgb(0, 255, 149)) border-box;
+    border-radius: 10px;
+    border: 2.5px solid transparent;
+}
+#dvv{
+  width: 100%;
+  margin-left: 10px;
+}
+#model{
+  width: 170px;
+  height: 50px;
+  overflow: visible;
+}
+#model option{
+  white-space: normal;
+  padding: 10px;
+font-family: 'Barlow Condensed';
+  line-height: 1.2;
+  font-size: 24px;
+}
+.ad{
+  display: flex;
+  flex-direction: row;
+}
+#grad {
+    background-image: linear-gradient(45deg, rgb(0, 255, 149),rgb(255, 0, 43), rgb(174, 0, 255));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: #000;
+  margin-left:15px;
+  font-family: 'Barlow Condensed'
+}
+    
+#imshow progress {
+    margin-left: auto;
+    margin-right: auto;
+    display: block; 
+   height: 25px;
+  width: 250px;
+  margin-top: 20px;
+}
+
+    #imshow h5{
+      display: block;
+}
+progress::-webkit-progress-bar {
+    background-color: rgb(0,5,60);
+}
+progress::-webkit-progress-value {
+    background-color: rgb(0, 255, 149);
+}
+progress {
+    background-color: rgb(0,5,60);
+}
+progress::-moz-progress-bar {
+    background-color: rgb(0, 255, 149); }
+    progress {
+    background: rgb(0,10,60);
+}
+
+    #x{
+      width:300px;
+      padding:0px;
+      gap:0px;
+    }
+    #aaa{
+      color: blue;
+      margin-left: 15px;
+      font-family: Arial;
+      letter-spacing: 0.3px;
+    }
+
+    #imshow {
+    display: flex;
+    justify-content: center;
+    max-width: 500px;
+    margin: auto;
+    max-height: 400px;
+    margin-top: 25px;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+#imshow img {
+    max-width: 100%;
+    max-height: 400px;
+    margin: 10px;
+    
+}
+#ratio{
+  display: flex;
+  flex-direction: row;
+  gap: 6px;
+  color: white;
+  font-family: 'Barlow Condensed';
+  font-size: 20px;
+  flex-wrap: wrap;
+}
+
+@media screen and (max-width: 800px) {
+  #imshow {
+    display: flex;
+    flex-direction: column;
+    align-items: center; 
+    justify-content: center; 
+    max-width: 330px;
+    margin-top: 50px;
+    margin: auto;
+    overflow: auto; 
+    height: 400px;
+
+}
+  #imshow progress{
+margin-top: 5px;
+  
+  }
+
+#imshow img {
+    max-width: 100%; 
+    max-height: 100%; 
+    margin: 10px;
+    object-fit: contain;
+ 
+
+
+
+}
+#img1{
+  padding-top: 125%;
+}
 }
+#main{
+  margin-bottom: 30px;
+}