body {
  background-color: #488ac3(250, 193, 78);
  display: block;
  margin: 0px;
  font-family: Arial, Helvetica, sans-serif;
  color: #463730;
}

h1, p {
  display: flex;
}

#nav_search {    
  width: 100%;
  margin: 0 auto;
  grid-area: search;
}

#search_output {
  display: flex;
  width: 30%;
  -webkit-box-flex: 1;
  flex-grow: 1;
  flex-direction: column;
  overflow: hidden;
  margin: 0px 0px 0px 0rem;
  padding: 0px;
  background-color: #488ac3;

  grid-area: search_output;
}
  
#grid-navbar { /*  */
  grid-area: navbar;
}

#cartoon_picture { 
  /*  displays cartoon picture <img id="cartoon_picture"
      found in display.php, line 22, as php echo */
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  grid-area: cartoon_picture;
}

#cartoon_title { 
  /*  displays cartoon title <h1 id="cartoon_title">
      found in display.php, line 20, as php echo */
  max-width: 100%;
  height: auto;
  content: center;
  grid-area: cartoon_title;
}

#cartoon_description { 
  /*  displays cartoon description <p id="cartoon_description">
      found in display.php, line 25, as php echo */
  max-width: 100%;
  height: auto;
  grid-area: cartoon_description;
}

#menu2-parents-lovers { 
  /* the header for the PARENTS/ANIMATION LOVERS content */
  max-width: 100%;
  height: auto;
  grid-area: menu2-parents-lovers;
}

#menu2-info { 
  /* the div for the PARENTS/ANIMATION LOVERS with the stars, ratings, etc */
  max-width: 100%;
  height: auto;
  grid-area: menu2-info;
}

@media only screen and (max-width: 768px) {
  .nav-link1 {
    margin-left: 250px;
  }

  .login-button {
    background-color: #3898ec;
    color: #fff;
    padding: 7px 20px;
    border-radius: 10px;
  }

  .logout-button {
    background-color: #3898ec;
    color: #fff;
    padding: 7px 20px;
    border-radius: 10px;
  }

  .nav-link2 {
    margin-left: 100px;
    padding-top: 5px;
  }

  .add-button {
    background-color: #3898ec;
    color: #fff;
    padding: 7px 20px;
    border-radius: 10px;
  }

  .nav_src_res_form,
  .nav_src_res_button {
    display: flex;
    -webkit-box-flex: 1;
    flex-grow: 1;
    flex-direction: inline;
    overflow: hidden;
    margin: 0px 0px 0px 0rem;
    padding: 0px;
    background-color: #488ac3;
  }
}

@media only screen and (max-width: 1200px) {
.nav-link1 {
  margin-left: 50px;
}

.login-button {
    background-color: #3898ec;
    color: #fff;
    padding: 12px 25px;
    border-radius: 10px;
  }

  .logout-button {
    background-color: #3898ec;
    color: #fff;
    padding: 12px 25px;
    border-radius: 10px;
  }

.nav-link2 {
  margin-left: 50px;
  padding-top: 5px;
}

.add-button {
  background-color: #3898ec;
  color: #fff;
  padding: 12px 25px;
  border-radius: 10px;
}

.nav_src_res_form, .nav_src_res_button {
  display: flex;
  -webkit-box-flex: 1;
  flex-grow: 1;
  flex-direction: inline;
  overflow: hidden;
  margin: 0px 0px 0px 0rem;
  padding: 0px;   
  background-color: #488ac3;
}
}

@media only screen and (min-width: 1280px) {
  .nav-link1 {
    margin-left: 300px;
  }

  .login-button {
    background-color: #3898ec;
    color: #fff;
    padding: 12px 25px;
    border-radius: 10px;
  }

  .logout-button {
    background-color: #3898ec;
    color: #fff;
    padding: 12px 25px;
    border-radius: 10px;
  }

  .nav-link2 {
    margin-left: 200px;
    padding-top: 5px;
  }

  .add-button {
    background-color: #3898ec;
    color: #fff;
    padding: 12px 25px;
    border-radius: 10px;
  }

  .nav_src_res_form,
  .nav_src_res_button {
    display: flex;
    -webkit-box-flex: 1;
    flex-grow: 1;
    flex-direction: inline;
    overflow: hidden;
    margin: 0px 0px 0px 0rem;
    padding: 0px;
    background-color: #488ac3;
  }
}

@media only screen and (max-width: 550px) {
  .nav-link1 {
    margin-left: 0px;
  }

  .login-button {
    background-color: #3898ec;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
  }

  .logout-button {
    background-color: #3898ec;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
  }

  .nav-link2 {
    margin-left: 0px;
    padding-top: 5px;
  }

  .add-button {
    background-color: #3898ec;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
  }

}

@media only screen and (max-width:360px) {
  .nav-link1 {
    margin-left: 0px;
  }

  .login-button {
    background-color: #3898ec;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
  }

  .logout-button {
    background-color: #3898ec;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
  }

  .nav-link2 {
    margin-left: 0px;
    padding-top: 5px;
  }

  .add-button {
    background-color: #3898ec;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
  }

}

  @media only screen and (max-width:550px) {
    #grid-container {

      /*
      grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
      grid-template-rows: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
      */

      grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
      grid-template-rows: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
        grid-template-areas: 
        "navbar"
        "search"
        "search_output"
        "cartoon_title"
        "cartoon_picture"
        "cartoon_description"
        "menu2-parents-lovers"
        "menu2-info"
        ;
    }
}

@media only screen and (max-width:360px) {
  #grid-container {

    /*
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    grid-template-rows: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    */

    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    grid-template-rows: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
      grid-template-areas: 
      "navbar"
      "search"
      "search_output"
      "cartoon_title"
      "cartoon_picture"
      "cartoon_description"
      "menu2-parents-lovers"
      "menu2-info"
      ;
  }
}