body{
    background-color: black;
    text-align:center;
}

.container{
    max-width: 1300px;
    margin: 0 auto;
    background-color: black;
    padding-left: 5%;
    padding-right: 5%;
}
                
#title_heading{

    background-color: black;
    color: ghostwhite;
}

.heading{
    background-color: black;
    color: ghostwhite;
}



hr{
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, rgba(250, 250, 150, 0), rgba(250, 250, 250, 0.75), rgba(250, 250, 250, 0));
}

h3, h2, h4{
    color: white;
}


p{
    font-size: 20px;
    color: white;
}

.user_p{
    color: blue;
    text-align: right;
    border-radius: 10px;
}

.chatbot_p{
    color: orange;
    text-align: left;
    border-radius: 10px;
}

.black_p{
    color: black;
    font-size: 18px;
}

.gradient_p{
    
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(0, 20, 0, 0.99), rgba(0, 0, 0, 0.25));
}

.main_section_grid{
    display: grid;
    grid-template-columns: 100%;
}



.five_columns_grid{
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
}

.seven_columns_grid{
    display: grid;
    grid-template-columns: 14% 14% 14% 16% 14% 14% 14%;
}

.two_columns_grid{
    display: grid;
    grid-template-columns: 50% 50%;
}

.three_columns_grid{
    display: grid;
    grid-template-columns: 33% 33% 33%;
}


.three_columns_grid > div {
    text-align: center;
}

#canvas-div{

    width: auto;
    height: auto;
    padding: 5px;
    text-align: center;
    background-color: none;
}

.top_row{
    text-align: left;
    background-color: black;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 120, 0, 0.75), rgba(0, 0, 0, 0.1));
}


.bottom_row{
    text-align: center;
    width: 90%;
    background-color: skyblue;
    padding-left: 5%;
    padding-right: 5%;
}

.text_area{
    resize: none;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 10px;
    padding-bottom: 5px;
}

#chats_area_div{
    text-align: center;
    resize: none;
    width: auto;
    padding-left: 10px;
    padding-right: 20px;
    height: 300px;
    overflow-y: scroll;
    background-color: ghostwhite;
    border-radius: 10px;
}

.about_div{
    background-color: ghostwhite;
    text-align: justify;
    padding: 20px;
}

.img_div_center{
    text-align: center;
    padding: 5px;
}

.responsive_image{    
    max-width: 100%;
    height: auto;
}