From 5fe9fbfa3af8ebf584193f3950090e61b0e57f81 Mon Sep 17 00:00:00 2001
From: Iefan <66840141+realiefan@users.noreply.github.com>
Date: Fri, 4 Aug 2023 16:05:28 +0530
Subject: [PATCH] Update style.css

---
 style.css | 434 ++++++++++++++++++------------------------------------
 1 file changed, 145 insertions(+), 289 deletions(-)

diff --git a/style.css b/style.css
index f621b70..385d148 100644
--- a/style.css
+++ b/style.css
@@ -1,123 +1,55 @@
 @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@400;700&display=swap');
 
-:root{
-color: #333; 
+:root {
+  --color-primary: #007bff;
+  --color-secondary: #ccc;
+  --color-background: #222;
+  --color-text: #fff;
 }
 
 body {
   font-family: 'Red Hat Text', sans-serif;
-	 background-color: #ffffff;
-      color: #000000;
+  background-color: var(--color-background);
+  color: var(--color-text);
+  margin: 0;
 }
 
 .container {
-  text-align: center;
-  color: var(--color);
-  width: 100%;
-  min-height: 100vh;
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background-size: cover;
-  background-position: center;
-  
-/*  this is where the magic happens:  */
-  background-attachment: fixed;
 }
 
-h1 {font-family: Arial,Helvetica Neue,Helvetica,sans-serif; 
-  line-height: 1.5;
-  font-weight: 700;
+h1 {
   font-size: 2rem;
-
-}
-.header-space {
-  display: flex;
-  justify-content: center;
-  margin-top: 2px;
-  font-family: "Courier", monospace;
-  margin-bottom: 2px;
+  font-weight: 700;
+  line-height: 1.5;
 }
 
-.box {
-  background-color: #f2f2f2;
-  padding: 20px;
-  border-radius: 10px;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
-  }
-
-
-progress {
-  -webkit-appearance: none;
-  appearance: none;
-  height: 10px;
-  background-color: #eee;
-  border-radius: 10px;
-  overflow: hidden;
+h2 {
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5;
+  margin-bottom: 5px;
+  max-width: 52ch;
+  padding: .3em;
 }
-progress::-webkit-progress-bar {
-  background-color: #eee;
-  border-radius: 10px;
-}
-progress::-webkit-progress-value {
-  background-color: #007bff;
-  border-radius: 10px;
-  animation: loading 2s ease-out infinite;
-}
-@keyframes loading {
-  0% {
-    width: 0%;
-  }
-  100% {
-    width: 100%;
-  }
-}
-
-
-progress {
-  -webkit-appearance: none;
-  appearance: none;
-  height: 10px;
-  background-color: #eee;
-  border-radius: 10px;
-  overflow: hidden;
-}
-progress::-webkit-progress-bar {
-  background-color: #eee;
-  border-radius: 10px;
-}
-progress::-webkit-progress-value {
-  background-color: #007bff;
-  border-radius: 10px;
-}
-progress[value="25"]::-webkit-progress-value {
-  background-color: #ffc107;
-}
-progress[value="50"]::-webkit-progress-value {
-  background-color: #28a745;
-}
-progress[value="75"]::-webkit-progress-value {
-  background-color: #dc3545;
-}
-
 
 p {
-  max-width: 52ch;
-  line-height: 1.5;
-  padding: .3em;
-  margin-top: 5px;
-  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
 }
-
-
-
-
 a {
   display: inline-block;
   padding: .5em 1.5em;
-  background-color: var(--color);
-  color: white;
+  background-color: var(--color-primary);
+  color: var(--color-text);
   text-decoration: none;
   text-transform: uppercase;
   border-radius: 0.3em;
@@ -127,23 +59,50 @@ a {
   text-align: center;
 }
 
-.blank,
-.other {
-  width: 100%;
-  min-height: 60vh;
-  background-color: var(--color);
+button {
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin: 5px;
+  font-weight: bold;
 }
 
-.second {
-  background-image:url(https://images.unsplash.com/photo-1514496959998-c01c40915c5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80);
-  background-attachment: fixed;
-  height: 1200px;
+button:hover {
+  background-color: #0056b3;
 }
 
-.second {
-  background-image:url(https://images.unsplash.com/photo-1514496959998-c01c40915c5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80);
-  background-attachment: fixed;
-  height: 1200px;
+footer {
+  margin-top: 20px;
+  text-align: center;
+  font-size: 12px;
+}
+
+.box {
+  background-color: #333;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.progress-bar {
+  height: 10px;
+  background-color: #555;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.progress-bar::-webkit-progress-bar {
+  background-color: #555;
+  border-radius: 10px;
+}
+
+.progress-bar::-webkit-progress-value {
+  background-color: var(--color-primary);
+  border-radius: 10px;
+  animation: loading 2s ease-out infinite;
 }
 
 .space-between {
@@ -157,210 +116,107 @@ a {
   justify-content: center;
 }
 
-h2 {
-  font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
-  font-size: 1em;
-  line-height: 1.5;
-  font-weight: 500; /* Set font-weight to lighter */
-  margin-bottom: 5px;
-  width: 50%; /* set the width of h2 element to 50% of its parent's width */
-  margin: 10 auto; /* set the top and bottom margin to 0, and left and right margin to auto */
-  word-wrap: break-word;
-  padding: 10px;
-}
-
-@media screen and (max-width: 1080px) { /* apply this style only when the screen width is less than or equal to 600px */
-  h2 {
-    width: 70%; /* set the width of h2 element to 100% of its parent's width */
-    margin: 0; /* set all margins to 0 */
-  }
-}
-
-@media screen and (max-width: 800px) { /* apply this style only when the screen width is less than or equal to 600px */
-  h2 {
-    width: 95%; /* set the width of h2 element to 100% of its parent's width */
-    margin: 0; /* set all margins to 0 */
-  }
-}
-
-@media screen and (max-width: 600px) { /* apply this style only when the screen width is less than or equal to 600px */
-  h2 {
-    width: 95%; /* set the width of h2 element to 100% of its parent's width */
-    margin: 0; /* set all margins to 0 */
-  }
-}
-
 #pubkey {
-  width: 600px !important;
-}
-
-@media screen and (max-width: 1080px) {
-  #pubkey {
-    width: 450px !important;
-  }
-}
-@media screen and (max-width: 800px) {
-  #pubkey {
-    width: 350px !important;
-  }
-}
-@media screen and (max-width: 600px) {
-  #pubkey {
-    width: 250px !important;
-  }
-}
-
-
-
-
-
-main div p img {
-  position: relative;
-  top: 6px;
-  height: 1rem;
-  margin-left: 0.5rem;
-}
-
-details {
-  background-color: rgba(242, 241, 238, 0.3);
+  font-size: 16px;
+  padding: 5px;
   border: 1px solid #ccc;
-  padding: 0.5rem;
-  margin: 1rem 0;
-}
-
-p,
-li {
-  line-height: 1.33;
-  margin-bottom: 1rem;
-}
-
-ul {
-  margin-left: -1rem;
-}
-
-.box {
-  border: 1px solid #ccc;
-  padding: 0 0.5rem;
-  margin: 1rem 0;
-}
-
-.box-content {
-  display: flex;
-  justify-content: center;
-  margin-top: 10px;
-  font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
-}
-
-button {
-  appearance: none;
-  background-color: #087bee;
-  border: 1px solid rgba(27, 31, 35, 0.15);
-  border-radius: 6px;
-  box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
+  border-radius: 4px;
   box-sizing: border-box;
-  color: #f9fafb;
-  cursor: pointer;
-  display: inline-block;
-  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  list-style: none;
-  padding: 6px 16px;
+  max-width: 100%;
+  margin: 0 auto;
+  display: block;
+  color: var(--color-text);
+  background-color: #333;
+}
+
+@media (min-width: 576px) {
+  /* Small devices (e.g., phones) */
+  #pubkey {
+    width: 100%;
+  }
+}
+
+@media (min-width: 768px) {
+  /* Medium devices (e.g., tablets) */
+  #pubkey {
+    width: 600px;
+  }
+}
+
+@media (min-width: 992px) {
+  /* Large devices (e.g., laptops) */
+  #pubkey {
+    width: 800px;
+  }
+}
+
+@media (min-width: 1200px) {
+  /* Extra large devices (e.g., large laptops or desktops) */
+  #pubkey {
+    width: 1000px;
+  }
+}
+
+
+
+#pubkey::placeholder {
+  color: #999;
+}
+
+.wrapper {
+  padding-bottom: 20px;
+}
+
+.divider {
   position: relative;
-  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
-  user-select: none;
-  -webkit-user-select: none;
-  touch-action: manipulation;
-  vertical-align: middle;
-  white-space: nowrap;
-  word-wrap: break-word;
-}
-
-
-
-.gray {
-  background-color: rgba(183, 177, 168, 0.3);
-}
-
-.red {
-  background-color: rgba(229, 60, 8, 0.3);
-}
-
-.box button {
-  background-color: rgba(0, 0, 0, 0.813);
-  color: rgb(255, 255, 255);
-}
-
-.wrapper
-{
-	padding-bottom: 20px;
-}
-
-.divider
-{
-	position: relative;
-	margin-top: 5px;
-	height: 5px;
+  margin-top: 5px;
+  height: 5px;
   margin-bottom: 5px;
 }
 
-.div-transparent:before
-{
-	content: "";
-	position: absolute;
-	top: 0;
-	left: 5%;
-	right: 5%;
-	width: 90%;
-	height: 1px;
-	background-image: linear-gradient(to right, transparent, rgb(48,49,51), transparent);}
-
+.div-transparent:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 5%;
+  right: 5%;
+  width: 90%;
+  height: 1px;
+  background-image: linear-gradient(to right, transparent, rgb(48,49,51), transparent);
+}
 
 h4 {
-  font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
-  line-height: 1.5;
-  font-weight: 450;
   font-size: 1.4rem;
-  
+  font-weight: 450;
 }
 
-
 h5 {
-  margin: 0px;
-  padding: 10px 10px 10px 10px;
+  margin: 0;
+  padding: 10px;
   text-align: center;
   display: inline-block;
   font-weight: 600;
 }
-@media screen and (max-width: 1080px) { /* apply this style only when the screen width is less than or equal to 600px */
-  h5 {
-    width: 70%; /* set the width of h2 element to 100% of its parent's width */
-    margin: 0; /* set all margins to 0 */
-  }
+
+input[type="file"]::-webkit-file-upload-button {
+  padding: 5px 10px;
+  background-color: #505051;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin: 3px;
 }
 
-@media screen and (max-width: 800px) { /* apply this style only when the screen width is less than or equal to 600px */
-  h5 {
-    width: 90%; /* set the width of h2 element to 100% of its parent's width */
-    margin: 0; /* set all margins to 0 */
-  }
-}
-
-@media screen and (max-width: 600px) { /* apply this style only when the screen width is less than or equal to 600px */
-  h5 {
-    width: 90%; /* set the width of h2 element to 100% of its parent's width */
-    margin: 0; /* set all margins to 0 */
-  }
+input[type="file"]::-webkit-file-upload-button:hover {
+  background-color: #b0b0b3;
 }
 
 
 
 footer p {
-  margin: 0px;
-  padding: 10px 10px 10px 10px;
+  margin: 0;
+  padding: 10px;
   text-align: center;
-  display: inline-block;;
+  display: inline-block;
 }
-
-