@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 413px)
  and (orientation: portrait) {

  main {
    min-height: 68%;
  }

  /* HEADER */
  .logo {
    font-size: 3rem;
  }

  header > p {
    width: 55%;
    font-size: 1.5rem;
  }

  /* SEARCH SECTION */
  .search-input {
    font-size: 1.5rem;
  }
  .input-p {
    font-size: 1.2rem;
  }
  #search-button {
    font-size: 1.2rem;
  }

  /* MOVIE SECTION */
  .movie-info {
    height: 23%;
    width: 100%;
    top: 22%;
  }
  .info-text {
    font-size: 1.2rem;
    justify-content: start!important;
  }
  #save-movie-btn {
    font-size: 1.2rem;
  }
  .poster-container {
    width: 27%;
  }

  /* GIF SECTION */
  .gif-container {
    height: 46%;
    top: 45%;
    left: 0;
    width: 100%;
  }
  .gif-img {
    width: 50%;
    height: 50%;
  }

  /* SAVED MOVIE MODAL */
  .movie-modal {
    height: 68%;
  }
  .modal-info-text {
    font-size: 1.1rem;
  }
  #saved-movies-btn {
    font-size: 2rem;
  }
  .movie-modal-info {
  margin-bottom: 7%;
  margin-top: 2%;
  height: 32%;
  }

  /* SAVED GIF MODAL */
  .gif-modal {
    height: 68%;
  }
  #saved-gifs-btn {
    font-size: 2rem;
  }

  .movie-saved-alert, .gif-saved-alert {
    height: 68%;
    overflow:  hidden scroll;

  }

  .movie-confirm-text > h2, .gif-saved-alert >h2 {
    font-size: 1.5rem;
  }
  .movie-confirm-text > button{
    width: 23%;
    font-size: 1.2rem;
    /* height: 10%; */
  }
  .movie-confirm-text > p, .gif-saved-alert > p {
    font-size: 1.2rem;
  }

  .gif-saved-alert {
    top: 22%;
    height: 78%;
  }
  .gif-saved-alert > button  {
    width: 23%;
    height: 12%;
  }
  .prompt-gif {
  width: 80%;
  }
  .poster-img2 {
    width: 100%;
  }
}

@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1023px)
  and (orientation: portrait) {

  main {
    min-height: 71%;
  }

  /* HEADER */
  .logo {
    font-size: 5rem;
  }

  header > p {
    width: 53%;
    font-size: 2.5rem;
  }

  /* SEARCH SECTION */
  .search-input {
    font-size: 2.5rem;
  }
  .input-p {
    font-size: 2.2rem;
  }
  #search-button {
    font-size: 2.2rem;
  }

  /* MOVIE SECTION */
  .movie-info {
    height: 25.5%;
    max-width: 100%;
    top: 23%;
    width: 100%;
  }
  .info-text {
    font-size: 2.2rem;
    width: 75%;
  }
  #save-movie-btn {
    font-size: 1.8rem;
    }
  .poster-container {
    width: 20%;
  }

  /* GIF SECTION */
  .gif-container {
    max-width: 100%;
    width: 100%;
    height: 45%;
    top: 49%;
    left: 0;
  }
  .gif-img {
    height: 210px;
  }

  /* SAVED MOVIE MODAL */
  .movie-modal {
    height: 71%;
  }
  .modal-info-text {
    font-size: 2rem;
  }
  .movie-modal > h4 {
    font-size: 2.5rem;
  }
  .movie-saved-modal {
    height: 77%;
  }
  .poster-img2 {
    width: 100%;
  }
  .movie-saved-alert > h2 {
    font-size: 3rem;
  }
  .movie-saved-alert > p {
    font-size: 2rem;
  }
  .movie-saved-alert > button {
    font-size: 2.5rem;
  }
  .saved-movie-confirm {
    font-size: 2.5rem;
  }
  .movie-confirm-text > p {
    font-size: 2rem;
  }

  /* SAVED GIF MODAL */
  .gif-modal {
    height: 71%;
  }
  .gif-saved-alert {
    top: 23%;
  }
  .gif-modal > h4 {
    font-size: 2.5rem;
  }
  .gif-saved-alert > h2 {
    font-size: 3rem;
  }
  .gif-saved-alert > p {
    font-size: 2rem;
  }
  .gif-saved-alert > button {
    font-size: 2rem;
    width: 15%;
  }
  .prompt-gif {
    width: 90%;
  }
  .saved-gif-confirm, .saved-gif-cancel {
    font-size: 2rem;
    margin-bottom: 1rem;
  }



  /* FOOTER SECTION */
  #saved-movies-btn, #saved-gifs-btn {
    font-size: 2rem;
  }
}

@media only screen
  and (min-device-width: 1366px)
  and (max-device-width: 1400px) {

  main {
    min-height: 55%;
  }

  .movie-info, .gif-container {
    top: 34%;
    height: 57%;
  }

  .gif-saved-alert {
    height: 83%;
    top: 34%;
  }

  .saved-gif-confirm, .saved-gif-cancel {
    font-size: 1.75rem;
  }

  .movie-modal, .gif-modal {
    top: 34%;
    height: 57.5%;
  }

  .movie-saved-alert, .gif-saved-confirm {
    top: 34%;
  }

  .movie-confirm-text > h2, .movie-confirm-text > button, .movie-confirm-text > p {
    font-size: 3rem;
  }

}

@media only screen
and (min-device-width: 1280px)
and (max-device-width: 1300px) {

    main {
    min-height: 52.5%;
  }

  .movie-info, .gif-container {
    top: 36%;
    height: 55%;
  }

  .gif-saved-alert {
    height: 83%;
    top: 36%;
  }

  .saved-gif-confirm, .saved-gif-cancel {
    font-size: 1.75rem;
  }

  .movie-modal, .gif-modal {
    top: 36%;
    height: 55.5%;
  }

  .movie-saved-alert, .gif-saved-confirm {
    top: 36%;
  }

  .movie-confirm-text > h2, .movie-confirm-text > button, .movie-confirm-text > p {
    font-size: 2rem;
  }
  .gif-confirm-text > h2, .gif-confirm-text > button, .gif-confirm-text > p {
    font-size: 2rem;
  }

  .poster-img2 {
    width: 72%;
  }
}

@media only screen
  and (min-device-width: 1024px)
  and (max-device-width: 1100px)
  and (orientation: landscape) {

  main {
    min-height: 61%;
  }

  /* HEADER */
  .logo {
    font-size: 5rem;
  }

  header > p {
    width: 53%;
    font-size: 2.5rem;
  }

  /* SEARCH SECTION */
  .search-input {
    font-size: 2.5rem;
  }
  .input-p {
    font-size: 2.2rem;
  }
  #search-button {
    font-size: 2.2rem;
  }

  /* MOVIE SECTION */
  .movie-info {
    height: 61.5%;
    max-width: 100%;
  }
  .info-text {
    font-size: 2rem;
    width: 75%;
  }
  #save-movie-btn {
    font-size: 1.8rem;
    }
  .poster-container {
    width: 50%;
  }

  /* GIF SECTION */
  .gif-container {
    max-width: 100%;
    top: 30%;
    height: 61.5%;
  }
  .gif-img {
    height: 40%;
  }

  /* SAVED MOVIE MODAL */
  .movie-modal {
    height: 63%;
    top: 29%;
  }
  .modal-info-text {
    font-size: 2rem;
  }
  .movie-modal > h4 {
    font-size: 2.5rem;
  }
  .movie-saved-modal {
    height: 77%;
  }
  .poster-img2 {
    width: 45%;
  }
  .movie-confirm-text > h2, .gif-saved-alert > h2 {
    font-size: 3rem;
  }
  .movie-confirm-text > p {
    font-size: 2.5rem;
  }
  .movie-saved-alert, .gif-saved-alert {
    top: 30%;
  }
  .movie-confirm-text > button {
    font-size: 2rem;
  }
  .movie-poster-img {
    width: 45%;
  }

  .gif-saved-confirm {
    top: 30%;
  }
  .saved-gif-confirm, .saved-gif-cancel {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  .gif-confirm-text > h2 {
    font-size: 3rem;
  }
  .gif-confirm-text > button, .gif-confirm-text > p {
    font-size: 2rem;
  }

  /* SAVED GIF MODAL */
  .gif-modal {
    height: 63%;
    top: 29%;
  }
  .gif-modal > h4 {
    font-size: 2.5rem;
  }
  .gif-saved-alert > h2 {
    font-size: 2rem;
  }
  .gif-saved-alert > p {
    font-size: 1.7rem;
  }
  .gif-saved-alert > button {
    font-size: 1.2rem;
  }

  /* FOOTER SECTION */
  #saved-movies-btn, #saved-gifs-btn {
    font-size: 2rem;
  }
}


@media only screen
  and (min-device-width: 667px)
  and (max-device-width: 768px)
  and (orientation: landscape) {

  main {
    min-height: 46.5%;
  }

  /* HEADER */
  .logo {
    font-size: 3rem;
  }

  header > p {
    width: 55%;
    font-size: 1.5rem;
  }

  /* SEARCH SECTION */
  .search-input {
    font-size: 1.5rem;
  }
  .input-p {
    font-size: 1.2rem;
  }
  #search-button {
    font-size: 1.2rem;
  }

  /* MOVIE SECTION */
  .movie-info {
    height: 49%;
    width: 50%;
    top: 38%;
  }
  .info-text {
    font-size: 1.2rem;
    justify-content: start!important;
  }
  #save-movie-btn {
    font-size: 1.2rem;
  }
  .poster-container {
    width: 27%;
  }

  /* GIF SECTION */
  .gif-container {
    height: 49%;
    top: 38%;
    left: 50;
    width: 50%;
  }
  .gif-img {
    width: 50%;
    height: 50%;
  }

  /* SAVED MOVIE MODAL */
  .movie-modal {
    height: 50%;
    top: 37%;
  }
  .movie-modal > h4 {
    font-size: 1.5rem;
  }
  .modal-info-text {
    font-size: 1.1rem;
  }
  #saved-movies-btn {
    font-size: 1.5rem;
  }
  .movie-modal-info {
    margin-bottom: 16%;
  }
  .poster-img {

  }

  /* SAVED GIF MODAL */
  .gif-modal {
    height: 50%;
    top: 37%;
  }
  .gif-modal > h4{
    font-size: 1.5rem;
  }
  #saved-gifs-btn {
    font-size: 1.5rem;
  }

  .movie-saved-alert, .gif-saved-alert {
    height: 68%;
    top: 32%;
    overflow:  hidden scroll;
  }
  .prompt-gif {
    width: 50%;
  }
  .movie-confirm-text > h2, .gif-saved-alert >h2 {
    font-size: 1.5rem;
  }
  .movie-confirm-text > button{
    width: 23%;
    font-size: 1.2rem;
    /* height: 10%; */
  }
  .movie-confirm-text > p, .gif-saved-alert > p {
    font-size: 1.2rem;
  }
  .gif-saved-alert > button  {
    width: 15%;
    height: 20%;
    font-size: 1.2rem;
  }
}

@media only screen
  and (min-device-width: 1920px)
  and (orientation: landscape) {

    main {
      min-height: 64.4%;
    }
    .movie-modal, .gif-modal {
      height: 66.4%;
      top: 27%;
    }
    .movie-info, .gif-container {
      height: 63.4%;
    }
    .movie-modal > h4, .gif-modal > h4 {
      font-size: 4rem;
      font-weight: 800;
    }
    .no-movies-msg, .no-gifs-msg {
      font-size: 3rem;
    }
    .poster-container {
      width: 43%;
    }
    .info-text {
      justify-content: center;
    }
    .info-text > p {
      font-size: 1.5rem;
    }
    .modal-info-text > p {
      font-size: 1.5rem;
    }
    .modal-poster-container {
      width: 15%;
    }

    .movie-saved-alert > p {
      font-size: 1.5rem;
    }
    .movie-confirm-text > button {
      font-size: 2rem;
    }
    .movie-confirm-text > p {
      font-size: 1.5rem;
    }
    .poster-img2 {
      width: 90%;
    }
    .saved-gif {
      width: 25%;
    }

    .gif-saved-alert {
      height: 72%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .gif-saved-alert > h2 {
      font-size: 3rem;
    }
    .gif-saved-confirm {
      height: 72%;
    }
    .prompt-gif {
      width: 35%;
    }
    .saved-gif-confirm, .saved-gif-cancel {
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    .gif-confirm-text > h2 {
      font-size: 3rem;
    }
    .gif-confirm-text > p, .saved-gif-confirm-btn {
      font-size: 2.5rem;
    }
  }