@font-face {
   font-family: 'pkmn-h';
   src: url('fonts/pokemon-hollow.ttf');
}
@font-face {
   font-family: 'pkmn-s';
   src: url('fonts/pokemon-solid.ttf');
}
@font-face {
   font-family: 'pkmn-n';
   src: url('fonts/andy-bold.otf');
}
body {
  background-image: url("images/sunny_days_pokemon_pokemon_green_yardage.png");
  background-position: top right;
  background-size: 500px;
  font-family: 'pkmn-n';
}
a {
  color: black;
  text-decoration: none;
}
.layout {
  width: 100%;
  display: grid;
  grid:
    "header header header" auto
    "leftSide body body" 1fr
    "footer footer footer" auto
    / auto 1fr auto;
  gap: 8px;
}

.header { 
  grid-area: header;
  text-align: center;
}
.leftSide { 
  grid-area: leftSide;
  background-color: #FDCC03;
  border: 5px groove #385CA8;
  text-align: center;
  padding: 20px;
}
.body {
  grid-area: body;
  background-color: #FDCC03;
  border: 5px groove #385CA8;
  text-align: center;
  padding: 20px;
}
.footer {
  grid-area: footer;
  text-align: center;
}
.title {
  font-size: 20px;
  font-family: 'pkmn-s';
  padding: 0px;
}
.content {
  background-color: #385CA8;
  color: white;
  text-align: center;
  padding: 20px;
}
.credit {
  text-decoration: underline;
  color: white;
}
.credit:hover {
  text-shadow: 5px 5px 3px #FDCC03;
  color: black;
}