DEV_1

public/stylesheets/style.css

@@ -1,8 +1,123 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
+
 body {
-  padding: 50px;
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+
+  background: rgb(58, 56, 56);
+  margin: 0;
+  padding: 0;
+  font-family: 'Roboto', sans-serif;
+  color: white;
 }
 
-a {
-  color: #00B7FF;
+.content {
+
+
+  padding: 3%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+    align-items: center;
+    justify-content: center;
 }
+
+@media (max-width: 768px) { 
+  
+  .box {
+    text-align: center;
+    padding: 5%;
+    width: 100%;
+    background-color: rgb(80, 80, 80);
+    border-radius: 1vw;
+    box-shadow: 5px 5px 5px rgba(80, 80, 80, 0.477) ;
+  }
+
+} 
+
+@media (min-width: 768px) { 
+
+  .box {
+    text-align: center;
+    padding: 5%;
+    width: 50%;
+    background-color: rgb(80, 80, 80);
+    border-radius: 1vw;
+    box-shadow: 5px 5px 5px rgba(80, 80, 80, 0.477) ;
+  }
+
+
+} 
+
+
+
+.box form {
+
+  margin: 4%;
+  
+}
+
+.box form input {
+
+  border-style: hidden;
+  border-radius: 1vw;
+  transition: all 0.2s ease 0s;
+
+}
+
+.box form input:hover {
+
+  box-shadow: 5px 5px 5px rgba(0, 174, 255, 0.477) ;
+
+}
+
+.box form .inp {
+
+  margin: 2%;
+}
+
+.box button {
+
+  border-style:solid;
+  border-radius: 1vw;
+  padding: 1%;
+  margin: 3%;
+  transition: all 0.2s ease 0s;
+  color: white;
+  background-color: transparent;
+}
+
+.box button:hover {
+
+  background: white;
+  color: black;
+  border-color: transparent;
+  box-shadow: 2px 2px 5px rgba(0, 174, 255, 0.477);
+
+}
+
+.box button:active {
+
+  border-style:solid;
+  border-radius: 1vw;
+  padding: 1%;
+  margin: 3%;
+  transition: all 0.2s ease 0s;
+  color: white;
+  background-color: transparent;
+  border-color: black;
+  box-shadow: none;
+}
+
+
+
+#remindus:hover {
+  box-shadow: 1px 1px 5px rgba(0, 174, 255, 0.477);
+
+}
+
+
+#info {
+
+  color: #ff0012;
+  font-size: larger;
+ 
+}