body {
    font-family: "Lato", sans-serif;
    font-size: 16px;
    background-color: lightsalmon;
    margin: 0;
}

.nav {
    padding-top: 1rem;
    background-color: teal;
    color: lightsalmon;
}

.nav p {
    left: 25rem;
}

.intro {
    height: 30rem;
    padding-top: 1rem;
    background-image: url('./img/intro.jpg');
    background-position: center;
    background-size: cover;
}

.intro img {
    width: 15rem;
    display: block;
    margin: auto;
    margin-top: 5rem;
}

.intro h1 {
    color: Coral;
    font-size: 2rem;
    margin-top: 10rem;
    padding: 2rem;
    background-color: rgba(0.5, 0.5, 0.5, 0.5);
    text-align: center;
  }

  ul {
    list-style: none;
    margin: 0;
  }

  li {
    color: lightsalmon;
    padding: 0.5rem 1.5rem;
    margin-right: 1.5rem;
    display: inline-block;
  }

.summary,
.testimonial,
.photos,
.meetup {
  margin: 4em auto;
}

.summary {
    padding: 0 1rem;
}
  
.summary p {
    color: White;
}

.summary h2{
    color: yellow;
}

.testimonial {
    background-color: teal;
    height: 20rem;
    padding: 0 1rem;
    padding-top: 1rem;
    color: yellow;
}
  
.testimonial h1 {
    font-size: 2.5rem;
    color: yellow;
}

.photos img {
    width: 30%;
    /* height: 25rem; */
    margin: 1.5%;
}
  
.meetup {
    margin-bottom: 2rem;
}

.meetup img {
    width: 50%;
    height: auto;
    display: block;
    margin: auto;
  }
  
  .meetup h1 {
    color: yellow;
    text-align: center;
  }
  
@media only screen and (max-width: 1048px) {
    .photos img {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }
}

@media only screen and (max-width: 800px) {

    .testimonial{
        height: 25rem;
    }
}

@media only screen and (max-width: 650px) {

    .testimonial{
        height: 30rem;
    }
}


@media only screen and (max-width: 640px) {

    .intro h1 {
      margin-top: 2rem;
    }
  
    .intro {
      max-height: 200px;
    }
  
    .photos img {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }
  
    li {
      display: block;
      text-align: center;
    }
  }

@media only screen and (max-width: 520px) {

    .testimonial{
        height: 35rem;
    }
}
  

@media only screen and (max-width: 450px) {

    .testimonial{
        height: 45rem;
    }
}

@media only screen and (max-width: 320px) {
  
    .testimonial h1 {
      font-size: 2rem;
    }
  
    .photos img {
      width: 100%;
    }
  }