body {
margin: 0;
background-color: whitesmoke;
margin: 0;
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
nav {
padding: 18px;
background-color: orange;
color: white;
display: flex;
justify-content: start;
box-shadow: 0px 0px 4px black;
}
a {
color: white;
font-size: large;
margin-left: 8px;
margin-right: 8px;
padding: 4px;
}
.l1:hover {
  background: #f2c879;
  text-shadow: 0px 0px 1px grey
}
.l2:hover {
  background: #f2c879;
  text-shadow: 0px 0px 1px grey
}
.l3:hover {
  background: #f2c879;
  text-shadow: 0px 0px 1px grey
}
main {
margin-top: 10%;
display: flex;
flex-flow: row wrap;
  align-content: center;
  justify-content: center;
  text-align: center;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0px 0px 1px gray;
}
button {
border: none;
border-radius: 6px;
background-color: purple;
padding: 14px 34px;
color: white;
text-shadow: 0px 0px 2px black;
margin: 5px;
font-family: inherit;
}
button:hover {
box-shadow: 2px -1px 4px black;
}
span:hover {
color: purple;
text-shadow: 0px 0px 4px grey;
}