Template:Mainpage Nav/styling.css

/* Set the background colours for the nav buttons */
.blue.nav {
  background-color: #4698b9;
  border-radius: 15px 0px 0px 15px;
  box-shadow: -4px 4px 8px 0px rgba(0, 0, 0, 0.2);
  border-right:5px solid #b1d3e1;
}
html.skin-citizen-dark .blue.nav {
	background-color: #234c5c;
	box-shadow: -4px 4px 8px 0px rgba(225, 225, 225, 0.1);
    border-right:5px solid #2d5f74;
}
.neutral.nav {
  background-color: #f6f5f3;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);

}

html.skin-citizen-dark .neutral.nav {
	background-color: #161a24;
	box-shadow: 0px 4px 8px 0px rgba(225, 225, 225, 0.1);

}
.green.nav {
  background-color: #98b946;
  border-radius: 0px 15px 15px 0px;
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-left:5px solid #d3e1b1;

}
html.skin-citizen-dark .green.nav {
	background-color: #285e3b;
	box-shadow: 4px 4px 8px 0px rgba(225, 225, 225, 0.1);
	border-left:5px solid #378353;
}

/* Set the text colours */
.white-p.nav {
  color: white;
  font-size:100%;
  text-align:center;
  font-weight: bold;
}

.white-p.nav a {
  color: white;
  text-decoration: none;
}
@media all and ( min-width: 720px ) {
	 .white-p.nav {
	 font-size:150%;}
}
.black-p.nav {
  color: #3d3d3f;
  font-size:100%;
  text-align:center;
  font-weight: bold;
}

html.skin-citizen-dark .black-p.nav {
	color:white;
}
.black-p.nav a {
  color: #3d3d3f;
  text-decoration: none;
}

html.skin-citizen-dark .black-p.nav a {
	color:white;
}
@media all and ( min-width: 720px ) {
	 .black-p.nav {
	 font-size:150%;}
}
/* Flexbox styles for the nav container */
.nav-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom:20px;
}

/* Set each button to cover a third of the screen on desktop */
.nav {
  flex-basis: 33.33%; /* 33.33% to cover one-third of the screen */
  box-sizing: border-box;
  padding: 3px;
  text-align: center;
  color: white;
  text-decoration: none;
}