body { 
    color: #421; 
    font-weight: bold; 
    font-size: 12px; 
    font-family: cursive; 
    background: rgb(200, 232, 241); 
    -webkit-overflow-y: scroll;

}
body::after {
    content: "";
    background: linear-gradient(grey,white);
    opacity: 0.35;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: fixed;
    z-index: -1;
    -webkit-background-size: cover; 
  }
span { 
    color: rgb(36, 17, 119); 
}


::-webkit-input-placeholder { 
    color: #711 ;
}

.intro{
    text-align: center;
}


.block{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    
}



#main { 
    /*grid-column: 2/3;*/
   /* position: fixed;*/
    bottom: 4%; 
    border: 0px solid #421; 
    padding: 10px; 
}
#main div { 
    margin: 15px; 
} 

#ip{
    display: flex;
    justify-content: center;
}

#input { 
    text-align: center;
    position: fixed;
    bottom: 10%;
    padding: 8px;
    background-color: #b6e1f7;
    border-top-right-radius:15px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border: 1px solid black; 
    outline: none;
}

#repout{
    display: flex;
    align-items: baseline;
    justify-content: center;
}

#rep{
    margin:15px;
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items: center;
    position: fixed;
    bottom: 20%;
    top: 15%;
    overflow-y: auto;
}



#user{
    
    padding: 8px;
    background-color: #b6e1f7;
    border-top-right-radius:15px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border: 1px solid black;
}

#bot{
    padding: 8px;
    background-color: #b6e1f7;
    border-top-right-radius:15px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border: 1px solid black;
}

#type{
     padding: 8px;
    background-color: #b6e1f7;
    border-top-right-radius:15px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border: 1px solid black;
}