body {
    background-color: rgb(250, 193, 78);
    display: block;
    margin: 0px;
    font-family: 'Sofia', sans-serif;
}

h1, h2, h3, p {
    text-align:center;
}


.extra-button-div {
    width: 200px;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
  }
  
  .extra-button-div input {
    width: 100%;
    padding: 6px 10px;
    margin-bottom: 4px;
    border-radius: 5px;
    background-color: #fff;
  }
  
  .extra-button-div button {
    width: 176px;
    padding: 6px 10px;
    margin-top: 8px;
    border-radius: 5px;
    background-color: #b39a33;
    color: #fff;
    text-align: center;
    cursor: pointer;
  }
  
  .extra-button-div button:hover {
    background-color: #313131;
  }



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

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

#search_output {
    display: flex;
    width: 100%;
    -webkit-box-flex: 1;
    flex-grow: 1;
    flex-direction: column;
    overflow: hidden;
    margin: 0px 0px 0px 0rem;
    padding: 0px;
  
    grid-area: search_output;
}

#menu2-info {
    display: inline;
    display: flex;
    justify-content: center;
}

#stars-div {
    display: inline;
    display: flex;
    justify-content: center;
}


/* USERMADE for form and suggestion button */
.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;   
}


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

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

#cartoon_score {
    text-align: left;
    grid-area: cartoon_score;
}

#div-cartoon-stars {
    grid-area: div-cartoon-stars;
}
#imdb_link {
    text-align: left;
    grid-area: imdb_link;
}

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

#menu2-parents-lovers {
    grid-area: menu2;
}

#menu2-info {
    grid-area: menu2-info;
    display: flex;
    justify-content: center;
}