Update style.css

Author: DmytroC-sys

style.css

@@ -1,60 +1,91 @@
+/* Basic reset */
 body {
-    font-family: Arial, sans-serif;
-    line-height: 1.6;
-    margin: 0;
-    padding: 0;
-    background: #f4f4f9;
-    color: #333;
-  }
-  
-  header {
-    background: #005f73;
-    color: #fff;
-    text-align: center;
-    padding: 1.5em 0;
-  }
-  
-  nav ul {
-    background: #0a9396;
-    color: #fff;
-    display: flex;
-    justify-content: center;
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
-  
-  nav ul li {
-    margin: 0 15px;
-  }
-  
-  nav ul li a {
-    color: #fff;
-    text-decoration: none;
-  }
-  
-  section {
-    max-width: 800px;
-    margin: 20px auto;
-    padding: 20px;
-    background: #fff;
-    border-radius: 5px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  }
-  
-  h2 {
-    color: #005f73;
-  }
-  
-  .project {
-    margin-bottom: 20px;
-  }
-  
-  a {
-    color: #0a9396;
-    text-decoration: none;
-  }
-  
-  a:hover {
-    text-decoration: underline;
-  }
+  font-family: Arial, sans-serif;
+  line-height: 1.6;
+  margin: 0;
+  padding: 0;
+  background: #f4f4f9;
+  color: #333;
+}
+
+/* Header Styles */
+header {
+  background: #005f73;
+  color: #fff;
+  text-align: center;
+  padding: 1.5em 0;
+}
+
+.header-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+}
+
+.profile-photo {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.header-text {
+  text-align: left;
+}
+
+header h1 {
+  margin: 0;
+}
+
+header p {
+  margin: 5px 0;
+}
+
+/* Navigation styles */
+nav ul {
+  background: #0a9396;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+nav ul li {
+  margin: 0 15px;
+}
+
+nav ul li a {
+  color: #fff;
+  text-decoration: none;
+}
+
+/* Section styles */
+section {
+  max-width: 800px;
+  margin: 20px auto;
+  padding: 20px;
+  background: #fff;
+  border-radius: 5px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+h2 {
+  color: #005f73;
+}
+
+.project {
+  margin-bottom: 20px;
+}
+
+a {
+  color: #0a9396;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+