@media screen and (max-width: 1000px) {
  .navContainer a {
    display: none;
  }
  .navContainer i {
    display: block;
    font-size: xx-large;
    color: white;
  }

  .navContainer i:hover {
    color: blue;
  }
  .navContainer.responsive {
    background-color: #ff6a88;
    width: 50%;
    border-radius: 20px;
    padding-bottom: 10px;
  }

  .navContainer.responsive a {
    float: none;
    display: block;
    text-align: center;
    flex-direction: row;
    width: 70%;
    padding-bottom: 5px;
    margin-top: 4px;
  }
  .navContainer {
    flex-direction: column;
    position: fixed;
    top: 0;
  }

  .mainContainer {
    flex-direction: column;
  }
  .rightContainer {
    width: 90%;
    order: 1;
  }
  .leftContainer {
    order: 2;
    position: relative;
    width: 100%;
  }
  /* leftContainer
  rightContainer */
  .card-list {
    overflow-x: scroll;
    width: 100%;
  }
  .homeCardSection {
    width: 100%;
  }
}