@media screen and ((max-width: 524px) or (max-height: 500px))  {
  body {
    margin: 1rem;
  }

  #modal-parent {
    display: block;
    align-items: initial;
    justify-content: initial;
    height: auto;
  }

  #modal-child {
    min-height: none;
    display: block;
    align-items: initial;
    justify-content: initial;
  }
}

@media screen and (max-width: 524px)  {
  html {
    font-size: 16px;
  }

  #main-column {
    max-width: none;
    width: auto;
    height: auto;
    margin-top: 4rem;

    display: block;
    align-items: initial;
    justify-content: initial;
  }

  h1 {
    padding: 0 1rem;
  }

  h1 img {
    width: 100%;
    height: auto;
  }

  .user-credentials-pic {
    width: calc(15vw);
    height: calc(15vw);
  }

  .index-h3 {
    white-space: initial;
    margin-bottom: 0;
  }

  .index-h3 nobr {
    white-space: normal;
  }
}

@media screen and (max-height: 600px) {
  #main-column {
    height: auto;
    max-width: 36rem;
    margin-top: 2rem;

    display: block;
    align-items: initial;
    justify-content: initial;
  }

  .index-h3 {
    white-space: initial;
    margin-bottom: 0;
  }

  .index-h3 nobr {
    white-space: normal;
  }
}