Update assets/index-48a6f08c.css

assets/index-48a6f08c.css

@@ -1,17 +1,15 @@
 :root {
-  --primary-color: #212121;
-  --secondary-color: #757575;
-  --background-color: #424242;
-  --text-color: #ffffff;
+  --primary-color: #007bff;
+  --background-color: #213547;
+  --text-color: #fff;
+  --inactive-color: #e9ecef;
 }
 
 #root {
-  max-width: 1280px;
+  max-width: 100%;
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
-  background-color: var(--background-color);
-  color: var(--text-color);
 }
 
 .language-container {
@@ -23,32 +21,28 @@
   display: flex;
   justify-content: center;
   gap: 20px;
-  width: 800px;
+  width: 100%;
+  max-width: 800px;
 }
 
-.textbox-container > textarea {
+.textbox-container>textarea {
   width: 50%;
-  background-color: var(--background-color);
-  color: var(--text-color);
 }
 
 .language-selector {
   width: 50%;
 }
 
-.language-selector > select {
+.language-selector>select {
   width: 150px;
-  background-color: var(--background-color);
-  color: var(--text-color);
 }
 
 .progress-container {
   position: relative;
   font-size: 14px;
   color: var(--text-color);
-  background-color: var(--secondary-color);
+  background-color: var(--inactive-color);
   border: solid 1px;
-  border-color: var(--secondary-color);
   border-radius: 8px;
   text-align: left;
   overflow: hidden;
@@ -92,56 +86,60 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color: var(--text-color);
   background-color: var(--background-color);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
 }
 
 h1 {
   font-size: 3.2em;
   line-height: 1;
-  color: var(--text-color);
-}
-
-h1, h2 {
   margin: 8px;
-  color: var(--text-color);
 }
 
 select {
   padding: .3em;
   cursor: pointer;
+  font-family: inherit;
   border-radius: 8px;
   border: 1px solid transparent;
   font-size: 1em;
-  font-family: inherit;
-  background-color: var(--primary-color);
+  background-color: var(--inactive-color);
   transition: border-color .25s;
-  color: var(--text-color);
 }
 
 select:hover {
-  border-color: var(--text-color);
+  border-color: var(--primary-color);
 }
 
-select:focus, select:focus-visible {
+select:focus,
+select:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
 textarea {
   padding: .6em;
+  font-family: inherit;
   border-radius: 8px;
   border: 1px solid transparent;
   font-size: 1em;
-  font-family: inherit;
-  background-color: var(--primary-color);
+  background-color: var(--inactive-color);
   transition: border-color .25s;
-  color: var(--text-color);
 }
 
 textarea:hover {
-  border-color: var(--text-color);
+  border-color: var(--primary-color);
 }
 
-textarea:focus, textarea:focus-visible {
+textarea:focus,
+textarea:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
@@ -149,20 +147,20 @@ button {
   padding: .6em 1.2em;
   cursor: pointer;
   font-weight: 500;
+  font-family: inherit;
   border-radius: 8px;
   border: 1px solid transparent;
   font-size: 1em;
-  font-family: inherit;
-  background-color: var(--primary-color);
+  background-color: var(--inactive-color);
   transition: border-color .25s;
-  color: var(--text-color);
 }
 
 button:hover:not([disabled]) {
-  border-color: var(--text-color);
+  border-color: var(--primary-color);
 }
 
-button:focus, button:focus-visible {
+button:focus,
+button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }