website/_scss/_navigation.scss

@media only screen and (min-width: 600px) {
nav {
	max-width: 50%;
	margin: auto;
	margin-top: 25px;
	margin-bottom: 5%;
	font-size: 1.3em;
	border: 5px solid #DDB6F2;

	ul {
    	list-style: none;
    	margin: auto;
    	padding: 5px;
	    display: grid;
		grid-auto-flow: column;

	    li {
			font-weight: bold;
			text-align: center;
	    	padding: 0;
			a {
				text-decoration: none;
			}
		}
	}
}
}

@media only screen and (max-width: 600px) {
nav {
	margin: 10px;
	list-style: none;
	font-size: 1.3em;
	border: 5px solid #DDB6F2;
	
	ul {
		list-style: none;

		padding: 0px;
		margin: auto;
		display: grid;
		
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
		grid-auto-rows: minmax(50px, auto);
		align-content: center;

		li {
			padding: 0px;
			margin: auto;
			font-weight: bold;
			text-align: center;

			a {
				text-decoration: none;
			}
		}
	}
}
}