styles.css

/* Notes on colors http://peach-puff.colorcode.is/combinations*/
body {
	font-family: monospace;
}

.wrapper {
  display: grid;
  grid-template-columns: 30% 30% 30%;
  grid-template-rows: 90% 90% 90%;
  max-width: 720px;
	margin-left: auto;
	margin-right: auto;
  
}

.box {
	border: 2px solid orange;
	border-radius: 5px;
	background-color: peachpuff;
	width: 85%;
	height: 85%;
}

.box-content {
	padding: 15%;
}

a {
	text-decoration: none;
}

.button {
  background-color: #43445a;
  border: none;
  color: white;
  margin: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 5px;
  transition-duration: .4s;
  padding: 4px;
}

.button:hover {
  background-color: #bf9990;
  color: white;
}

.bottom-text {
}

.nav {
  background: white;
  height: 60px; /* set same as height & line-height below */
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
  padding-bottom: 40px;
}

.nav li {
  display: inline-block;
  list-style: none;
  height: 60px; /* should be the same as line-height */
  line-height: 60px; /* should be the same as height */
  padding: 0 40px; /* "0" sets top and bottom padding to none */
}

.nav li:hover {
  background: #B9FFDA;
  transition: background .3s;
}
 /*This first section is a simple "reset". It allows the navbar to push up against the top of the browser window with no white space around it. This code also sets the default font for your whole page. Put it at the very top of your css page.  */
html, body, div, p, ul, li {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  /*font-family: 'Roboto', sans-serif;*/
  font-weight: 100;
  font-family: monospace;
}

.nav-link {
  color: black;
  text-decoration: none;
}