main.css

*{
    box-sizing: border-box;
}
body{
    background-color: white;
    color: black ;
    font-family: 'Advent Pro';
}
h1{
    text-align: center;
    text-align: center;
    background-color: lightcoral;
    padding: 1em;
    border-radius: 40px;
    color: white;
    font-size: 15px;
}
#chatBox{
    width: 100%;
    position: absolute;
    bottom: 50px;
    right: 0px;
    left: 0px;
    top: 60px; 

}
#chatInput{
    position: fixed;
    bottom: 0px;
    width: 100%;
    background-color: lightcoral;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
            justify-content: space-between;
    height: 80px;  
    padding: .5em;
    border-radius: 30px;
    margin-top: 30px;
}
#sendBtn{
    font-family: 'Advent Pro';
    background-color: white;
    border: lightcoral;
    border-radius: 30px;
}
#newMsg{
    font-family: 'Advent Pro';
    background-color: white;
    border: lightcoral;
    border-radius: 30px;
}
#sendBtn:hover{
    background-color: lightseagreen;
}
p{
text-align: center;

}
.button{

}
.user{
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
        flex-direction: column;
}
h2{
    text-align: center;
    margin: .5em;
}
h3{
    margin-top: 4px;
    margin-bottom: 6px;
    font-style: italic;
}
#pic{
    max-width: 300px;
    max-height: 300px;
}
a:link {
    color:coral;
    text-decoration: none;
  }
  
  /* visited link */
  a:visited {
    color: white; 
    text-decoration: none;
  }
  
  /* mouse over link */
  h1:hover{
    color: coral;
    background-color: lightseagreen;
    text-decoration: none;
  }
  
  /* selected link */
  a:active {
    color: coral;
    text-decoration: none;
  }