html,
body {
  margin: 0;
  padding: 0;
}

body {
  background-color: #F9F3CD;

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f9f3cd+0,f2d972+100 */
background: #f9f3cd; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #f9f3cd 0%, #f2d972 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #f9f3cd 0%,#f2d972 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #f9f3cd 0%,#f2d972 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f3cd', endColorstr='#f2d972',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  padding: 18px;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}

.topnav {
  width: 100%;
  overflow: hidden;
  background-color: #cb9a7c;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddbea9;
  color: rgb(73, 39, 19);
}
.topnav a.active {
  background-color: #ddbea9;
  color: white;
}

#wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 4vw;
  grid-row-gap: 3vh;
}
.pad {
  background-color: yellow;
  height: 20vh;
  border: 1px solid rgb(69, 69, 69);
  border-radius: 7px;
}
.pad:hover{
  opacity: 0.5;
  border: 1px solid #578E28;
}
.pad:active, .pad:focus{
  filter: brightness(70%);
  border: 1px solid #578E28;
}

.pad.a{background-color: #4BA1B5;}
.pad.b{background-color: #96C8D8;}
.pad.c{background-color: #9FC283;}
.pad.d{background-color: #D9B64E;}
.pad.e{background-color: #76A54E;}
.pad.f{background-color: #D9B64E;}
.pad.g{background-color: #96C8D8;}
.pad.h{background-color: #9FC283;}
.pad.i{background-color: #4BA1B5;}
.pad.j{background-color: #96C8D8;}
.pad.k{background-color: #76A54E;}
.pad.l{background-color: #D9B64E;}
.pad.m{background-color: #76A54E;}
.pad.n{background-color: #D9B64E;}
.pad.o{background-color: #9FC283;}
.pad.p{background-color: #96C8D8;}