refactor(front): ♻️ change main design

src/css/style.css

@@ -4,7 +4,7 @@
 :root {
 	--banner-color: #b1b1b1;
 	--banner-bgc: #000;
-	--options-bgc: #111;
+	--options-bgc: #0a0a0a;
 }
 
 html, body {
@@ -32,7 +32,8 @@ body {
 	width: 300px;
 	align-self: center;
 	justify-self: center;
-	border-radius: 20px;	
+	border-radius: 20px;
+	box-shadow: 0px 10px 20px 10px rgb(58, 58, 58);
 }
 
 .options {
@@ -42,27 +43,47 @@ body {
 }
 
 input::placeholder {
-	color: #1e1e1e;
+	color:#404040;
+	text-shadow: none;
+
 }
 
+
+
 label {
 	color: #3c3c3c;
 	font-size: 1.5rem;
 }
 
-.txt-input {
-	background: #3c3c3c;
-	border-style: none;
+h1 {
+	font-size: 2.5rem;
+}
+
+h1, input {
+	text-shadow: 0 0 5px #fff;
+}
+
+
+.txt-input, select {
+	background: #0a0a0a;
+	border: solid 1px #404040;
 	height: 3rem;
 	color: black;
-	border-radius: 50px;
+	border-radius: 6px;
 	width: 300px;
 	
 	padding-left: 20px;
 	padding-right: 20px;
 	font-size: 1.5rem;
 	color: #fff;
-	font-weight: 900;
+	font-weight: 400;
+	transition: all .2s ease-in-out;
+}
+
+input:focus, select:focus {
+	outline: none !important;
+	border: solid 1px #a3a3a3 ;
+	box-shadow: 0px 0px 0px 4px #3f3f46;
 }
 
 input {
@@ -77,7 +98,7 @@ input {
 }
 
 #layout {
-	color: #1e1e1e;
+	color: #404040;
 }
 
 
@@ -98,11 +119,21 @@ input[type="radio"], input[type="checkbox"] {
 
 }
 
-input[type="radio"]:checked, input[type="checkbox"]:checked {
-	background-color: #fff;
+input[type="radio"]:focus, input[type="checkbox"]:focus {
+	border-style: none;
+	box-shadow: none;
 }
 
+input[type="radio"]:checked, input[type="checkbox"]:checked {
+	background-color: #fff;
+	transition: all .5s ease-out;
+	box-shadow: 0 0 10px 5px rgb(100, 100, 100);
+}
 
+input[type="radio"]:not(:checked), input[type="checkbox"]:not(:checked) {
+	transition: all .5s ease-out;
+	box-shadow: none;
+}
 
 label {
 	align-self: center;
@@ -133,13 +164,21 @@ label {
 .style-layout > input[type="color"] {
 	margin: 0;
 	background: none;
-	border: none;
 	justify-self: start;
 	height: 3rem;
 	width: 300px;
-	border-radius: 50px;
+	border-radius: 6px;
+	border: solid 1px #404040;
+
 }
 
+.style-layout > input[type="color"]:focus {
+	outline: none !important;
+	border: solid 1px #a3a3a3 ;
+	box-shadow: 0px 0px 0px 4px #3f3f46;
+}
+
+
 .container > div {
 	row-gap: 100 px;
-}
+}