#menuHeader {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url(../images/coffeeBeans_600_126.jpg);
    height: 80px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  @media screen and (min-width: 715px) {
    #menuHeader {
      background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url(../images/coffeeBeans_2600_545.jpg);

    }
  }
  .communityMain {
    width: 90vw;
    margin: 5em auto 1em;
    padding-top: 1em;
    padding-bottom: 7em;
  }
  .flex {
    display: flex;
  }
  .cup {
    height: 150px;
    width:auto;
    z-index: 200;
  }
  
  .communityMain h1 {
    margin-bottom: 3em;
  }
  @media screen and (min-width: 715px) {
    .communityMain {
      margin-top: 9em;
      margin-bottom: 3em;
    }
  }

   /* set up the menu area */
  .grid {
    width: 90vw;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
  @media screen and (min-width: 715px) {
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2em;
    }

  }
  
  @media screen and (min-width: 1200px) {
    .communityMain {
      max-width: 1100px;
    }  
    .grid {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
  