a {
    color: #333;
    text-decoration: none;
}

html {
    background-image: url(Plants_vs._Zombies_2_Background.png);
    background-position: top;
    background-repeat: no-repeat;
}

body {
    background-color: #09850e; 
    width: 60%;
    height: 90vh;
    margin: 40px auto;
    border-radius: 20px;
    opacity: 100%;
    z-index: -2;
    position: sticky;
}

@keyframes bgColor {
  10% {
    background-color: #a43535;
  }
  20% {
    background-color: #ff7b00;
  }
  30% {
    background-color: #ffff51;
  }
  40% {
    background-color: #a7ff4e;
  }
  50% {
    background-color: #7addfe;
  }
  60% {
    background-color: #6b6bfd;
  }
  70% {
    background-color: #ca61ff;
  }
  80% {
    background-color: #ff54af;
  }
  90% {
    background-color: #f3bbff;
  }
}

body h2 {
    height: 200px;
    z-index: -1;
    position: absolute;
    background-color: darkgreen;
    border-radius: 10px;
    margin: 10px;
    width: 98%;
}

header {
    padding: 20px;
    text-align: center;
}

header div {
    margin: 20px;
}

.nav {
    display: flex;
    flex-direction: row;
    margin: 10px;
}

.nav a {
    width: 100px;
    margin-inline: auto;
    height: 40px;
    border-radius: 5px;
    text-align: center;
    padding: 10px;
    color: white;
    background-color: darkgreen;
}
.nav a:hover {
    animation: bgColor 1s infinite linear;
}

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: menu1; }
.item6 { grid-area: main1; }
.item7 { grid-area: right1; }
.item8 { grid-area: menu2; }
.item9 { grid-area: main2; }
.item10 { grid-area: right2; }
.item11 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-rows: 100px auto auto auto 35px;
  grid-template-columns: auto 100px 100px 100px 100px;
  grid-template-areas:
    'header header header header header header'
    'menu main main main main right'
    'menu1 main1 main1 main1 main1 right1'
    'menu2 main2 main2 main2 main2 right2'
    'footer footer footer footer footer footer';
  gap: 10px;
  background-color: #09850e;
  padding: 10px;
  border-radius: 10px;
}
.grid-container > div {
  background-color: darkgreen;
  padding: 10px;
  font-size: 30px;
  text-align: center;
  border-radius: 10px;
  color: white;
}

.grid-header {
  font-size: 70px !important;
}

.grid-description {
  font-size: 25px !important;
}

.grid-description p{
  font-size: 15px !important;
}
.grid-footer{
  font-size: 15px !important;
}

.flex-container {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.flex-container img {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 47%;
  margin-inline: auto;
}

.flex-container p {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background-color: darkgreen;
  color: white;
  text-align: center;
  padding: 10px;
  margin-inline: 10px;
}