tiles menu changes and floting navbar

styles/globals.scss

@@ -14,15 +14,19 @@
 body {
 	background-color: var(--black1);
 	color: white;
+	-ms-overflow-style: none; /* IE and Edge */
+	scrollbar-width: none; /* Firefox */
 }
 
 nav.main {
+	z-index: 1;
 	height: 4rem;
+	width: 100%;
 	background-color: var(--black1);
 	display: flex;
 	align-items: center;
 	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
-	position: relative;
+	position: fixed;
 	a {
 		font-family: "Lexend", sans-serif;
 		display: block;
@@ -66,6 +70,7 @@ section.banner {
 	align-items: center;
 	width: 100%;
 	height: 25rem;
+	padding-top: 4rem;
 	h1,
 	p {
 		position: absolute;
@@ -90,11 +95,11 @@ article.main {
 	display: flex;
 	justify-content: center;
 	.Map {
-		margin-top: 2rem;
+		margin: 2rem;
 		display: grid;
 		grid-gap: 2rem;
-		grid-template-rows: repeat(2, 10rem);
-		grid-template-columns: repeat(7, 10rem);
+		grid-template-rows: repeat(4, 10rem);
+		grid-template-columns: repeat(7, 11rem);
 		div {
 			display: flex;
 			flex-direction: column;
@@ -113,6 +118,20 @@ article.main {
 				font-family: "Lexend", sans-serif;
 				font-size: 1.6rem;
 			}
+		}
+		div:hover {
+			background-color: var(--black0);
+			box-shadow: 7 px 21px rgba(0, 0, 0, 0.25);
+		}
+		.icons {
+			width: 6rem;
+			height: 6rem;
+			position: absolute;
+			color: white;
+		}
+		.msg {
+			grid-column: 1/3;
+			grid-row: 1;
 			.icons {
 				margin-bottom: 4rem;
 				margin-left: 11rem;
@@ -121,13 +140,8 @@ article.main {
 				height: 15rem;
 				opacity: 5%;
 				position: absolute;
-				color: white;
 			}
 		}
-		.msg {
-			grid-column: 1/3;
-			grid-row: 1;
-		}
 		.bots {
 			grid-column: 3/6;
 			grid-row: 1;
@@ -143,10 +157,30 @@ article.main {
 		.members {
 			grid-column: 1/3;
 			grid-row: 2;
+			.icons {
+				transform: scaleX(-1) rotate(20deg);
+				margin-top: rem;
+				margin-left: 16rem;
+				width: 16rem;
+				height: 15rem;
+				opacity: 5%;
+				position: absolute;
+				color: white;
+			}
 		}
 		.days {
 			grid-column: 3/5;
 			grid-row: 2;
+			.icons {
+				transform: rotate(20deg);
+				margin-top: rem;
+				margin-left: 14rem;
+				width: 14rem;
+				height: 15rem;
+				opacity: 5%;
+				position: absolute;
+				color: white;
+			}
 		}
 		.yt {
 			grid-column: 5;
@@ -162,3 +196,7 @@ article.main {
 		}
 	}
 }
+/* Hide scrollbar for Chrome, Safari and Opera */
+body::-webkit-scrollbar {
+	display: none;
+}