add some css

css/global.css

@@ -48,4 +48,12 @@ a,
 button {
     font-family: var(--font-sofia);
     text-align: center;
-}
+}
+
+#about-me,
+#contacts,
+#cases {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}

css/index.about-me.css

@@ -1,9 +1,3 @@
-#about-me {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
 #about-me h2{
     margin: 20px auto;
 }
@@ -25,12 +19,13 @@
 }
 
 @media (min-width: 774px) {
-
+    
     .about-me-content {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
     }
+
     .about-me-photo{
         flex: 1;
     }

css/index.cases.css

@@ -0,0 +1,3 @@
+#cases {
+    padding: 18px;
+}

css/index.contacts.css

@@ -1,8 +1,4 @@
-#contacts {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
+
 .contacts-form,
 .contacts-text {
     margin: 24px;
@@ -28,6 +24,16 @@
     background-color: inherit;
 }
 
+.contacts-form input[type=text]:focus, 
+.contacts-form input[type=tel]:focus,
+.contacts-form input[type=email]:focus,
+.contacts-form textarea::after {
+    border: none;
+    border-bottom: 2px solid var(--color-warm);
+    background-color: inherit;
+    color: var(--text-color);
+}
+
 .contacts-form input[type=submit] {
     background-color: inherit;
     font-family: var(--font-sofia);
@@ -37,13 +43,15 @@
     padding: 0.75rem;
 }
 
+
 @media (min-width: 774px) {
 
     #contacts {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
     }
+
     .contacts-form{
         flex: 1;
     }

css/index.css

@@ -2,4 +2,5 @@
 @import url(index.header.css);
 @import url(index.nav.css);
 @import url(index.about-me.css);
-@import url(index.contacts.css);
+@import url(index.contacts.css);
+@import url(index.cases.css);