More styling, more content.

assets/scss/main.scss

@@ -2,8 +2,9 @@
 
 $borderRadius: 8px;
 $textColor: #0f0f0f;
+$linkColor: #717171;
 $lightGray: #e6e6e6;
-$highlight: #82b3db;
+$highlight: #c0d9f0;
 
 * {
 	box-sizing: border-box;
@@ -14,9 +15,8 @@ $highlight: #82b3db;
 }
 
 body {
-	padding: 80px 40px;
-	max-width: 1000px;
-	margin: 0 auto;
+	margin: 0;
+	padding: 0;
 }
 
 h1, h2 {
@@ -36,70 +36,104 @@ h2 {
 a {
 	text-decoration: none;
 	transition: all 0.3s;
-	color: $highlight;
+	color: $linkColor;
 
 	&:hover {
 		color: $textColor;
 	}
 }
 
+p {
+	margin: 20px 0;
+}
+
 nav {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin: 0 0 80px 0;
+	padding: 80px 40px;
+	background: $highlight;
 
-	ul {
+	.content {
 		display: flex;
-		gap: 20px;
-		margin: 0;
-		padding: 0;
+		justify-content: space-between;
+		align-items: center;
+		max-width: 1000px;
+		margin: 0 auto;
 
-		li {
-			list-style: none;
+		ul {
+			display: flex;
+			gap: 20px;
 			margin: 0;
 			padding: 0;
 
-			a {
-				color: $textColor;
+			li {
+				list-style: none;
+				margin: 0;
+				padding: 0;
 
-				&:hover {
-					color: $highlight;
+				a {
+					color: $textColor;
+
+					svg {
+						fill: $textColor;
+						transition: all 0.3s;
+					}
+
+					&:hover {
+						color: $linkColor;
+
+						svg {
+							fill: $linkColor;
+						}
+					}
 				}
 			}
 		}
-	}
 
-	.contact {
-		display: inline-block;
-		padding: 8px 16px;
-		border-radius: $borderRadius;
-		border: 2px solid $highlight;
-		color: $textColor;
-		transition: all 0.3s;
-		color: $highlight;
+		.contact {
+			display: inline-block;
+			padding: 8px 16px;
+			border-radius: $borderRadius;
+			border: 2px solid $textColor;
+			color: $textColor;
+			transition: all 0.3s;
 
-		&:hover {
-			background: $highlight;
-			color: #fff;
+			&:hover {
+				background: $textColor;
+				color: #fff;
+			}
 		}
 	}
 }
 
 section {
-	margin: 0 0 80px 0;
+	max-width: 1080px;
+	margin: 80px auto 0 auto;
+	padding: 0 40px;
 }
 
 footer {
-	margin: 0 0 80px 0;
-	padding: 40px 0;
-	border-style: solid;
-	border-width: 2px 0 0 0;
-	border-color: $lightGray;
+	max-width: 1080px;
+	margin: 80px auto 0 auto;
+	padding: 0 40px;
+
+	.content {
+		max-width: 1000px;
+		margin: 0 auto;
+		border-style: solid;
+		border-width: 2px 0 0 0;
+		border-color: $lightGray;
+		padding: 40px 0;
+	}
 }
 
 .intro {
+	background: $highlight;
+	max-width: 100%;
+	padding: 0 40px 80px 40px;
+	margin: 0;
+
 	article {
+		max-width: 1000px;
+		margin: 0 auto;
 		display: flex;
 		gap: 40px;
 		justify-content: flex-start;
@@ -110,8 +144,8 @@ footer {
 		}
 
 		img {
-			max-width: 256px;
-			max-height: 256px;
+			max-width: 196px;
+			max-height: 196px;
 			aspect-ratio: 1;
 			border-radius: $borderRadius;
 		}