.header {
  background-color: green;
  border-style: solid;
  border-color: black;
  border-width: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 77.5rem;
}
@media (max-width: 1024px) {
  .header {
    width: 61.5rem;
  }
}
@media (max-width: 810px) {
  .header {
    width: 48.5rem;
  }
}
@media (max-width: 600px) {
  .header {
    width: 35.5rem;
  }
}
@media (max-width: 412px) {
  .header {
    width: 23.5rem;
  }
}
@media (max-width: 360px) {
  .header {
    width: 95%;
  }
}
body {
  background-color: rgb(0, 27, 0);
  display: grid;
  justify-items: center;
  justify-content: center;
  align-items: center;
  grid-gap: 20px;
}
main {
  display: grid;
  justify-items: center;
  align-items: center;
  justify-content: center;
  grid-gap: 20px;
}

img {
  display: grid;
  grid-gap: 20px;
  width: 60rem;
}
@media (max-width: 1024px) {
  img {
    width: 59rem;
  }
}
@media (max-width: 810px) {
  img {
    width: 46rem;
  }
}
@media (max-width: 600px) {
  img {
    width: 34rem;
  }
}
@media (max-width: 412px) {
  img {
    width: 22rem;
  }
}
@media (max-width: 360px) {
  img {
    max-width: 100%;
  }
}
.card {
  background-color: rgb(27, 70, 27);
  border-style: solid;
  border-color: black;
  border-width: 3px;
  display: grid;
  align-items: center;
  justify-items: center;
  justify-content: center;
  width: 75rem;
  padding: 20px;
}
@media (max-width: 1024px) {
  .card {
    width: 59rem;
  }
}
@media (max-width: 810px) {
  .card {
    width: 46rem;
  }
}
@media (max-width: 600px) {
  .card {
    width: 33rem;
  }
}
@media (max-width: 412px) {
  .card {
    width: 21rem;
  }
}
@media (max-width: 360px) {
  .card {
    width: 18rem;
  }
}
.main-title {
  font-size: 40px;
}
nav {
  display: grid;
}
h1 {
  color: white;
}
h2 {
  color: white;
}
h3 {
  color: white;
}
p {
  color: white;
}