updated styles

styles.css

@@ -1,27 +1,143 @@
-body {
+* {
-	background: #000;
+	box-sizing: border-box;
-	color: lime;
-	font-family: Verdana, Geneva, Tahoma, sans-serif;
-	font-size: 14px;
 }
 
-.title {
+body {
+	font-family: Verdana, Geneva, Tahoma, sans-serif;
+	font-size: 14px;
+	background-color: #000;
+}
+
+.grid-container {
+	display: grid;
+	grid-template-areas:
+		'header'
+		'menu'
+		'main'
+		'footer';
+	color: lime;
+	gap: 10px;
+}
+
+.header {
+	grid-area: header;
+	text-align: center;
+	color: lime;
+}
+
+.header>h1 {
 	color: lime;
 	padding: 10px;
 	margin-bottom: 10px;
 	text-transform: uppercase;
-	text-decoration: underline double grey;
+	text-decoration: underline double green;
 }
 
-h1 {
+.menu {
+	grid-area: menu;
+	border-right: dashed;
+	margin-right: 10px;
+}
+
+.menu ul {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+}
+
+.menu li {
+	padding: 8px;
+	margin-bottom: 7px;
+}
+
+.menu li a {
+	color: lime;
+	text-decoration: none;
+}
+
+.menu li a:hover {
+	color: green;
+}
+
+.content {
+	grid-area: main;
+}
+
+.content>h1 {
 	font-size: 2em;
-	text-align: center;
+	margin-bottom: 10px;
 }
 
-p {
+.content>p {
-	text-align: center;
+	margin-bottom: 7px;
 }
 
-.text {
+.footer {
-	padding: 20px;
+	grid-area: footer;
+	color: lightgrey;
+	text-align: center;
+	position: fixed;
+	width: 100%;
+	left: 0;
+	bottom: 0;
+
+}
+
+/* Extra small devices (phones, 600px and down) */
+@media only screen and (max-width: 600px) {
+	.header {
+		grid-area: 1 / span 6;
+	}
+
+	.menu {
+		grid-area: 2 / span 1;
+	}
+
+	.content {
+		grid-area: 2 / span 4;
+	}
+
+	.footer {
+		grid-area: 4 / span 6;
+	}
+}
+
+/* Small devices (portrait tablets and large phones, 600px and up) */
+@media only screen and (min-width: 600px) {
+	body {
+		font-size: 18px;
+	}
+}
+
+/* Medium devices (landscape tablets, 768px and up) */
+@media only screen and (min-width: 768px) {
+	.header {
+		grid-area: 1 / span 6;
+	}
+
+	.menu {
+		grid-area: 2 / span 1;
+	}
+
+	.content {
+		grid-area: 2 / span 4;
+	}
+
+	.footer {
+		grid-area: 3 / span 6;
+	}
+
+}
+
+/* Large devices (laptops/desktops, 992px and up) */
+@media only screen and (min-width: 992px) {}
+
+/* Extra large devices (large laptops and desktops, 1200px and up) */
+@media only screen and (min-width: 1200px) {}
+
+@media (prefers-reduced-motion: reduce) {
+	* {
+		animation: none !important;
+		transition: none !important;
+	}
 }