#container{
  Position: relative;
  text-align: center; 
  border: 1.125em solid black;
  border-radius:2.5em;
  margin-bottom: 1em;
  Margin-left:20%;
  height: 575px;
  Width:350px;
  overflow: auto;
}
#top-of-phone{
  Position:fixed;
  top:3;
  width:22em;
}
#top-of-chat{
  top:1.22em;
  Position:sticky;
  Height:1.5em;
  Width:10.45em;
  background:white;
  Font-size:2em;
  Text-align:center;
}
#friend-id{
  Height:1.25em;
  width:1.25em;
	background-color:lightblue;
  border-radius:50%;
  Margin-left:.5em;
  Margin-top:2.9rem;
}
#letter{
	background:transparent;
  Padding-top:0;
}
#name{
	background:transparent;
  border:.125em solid transparent;
  Font-size:1.125em;
  Font-weight:bold;
  Margin-top:-57px;
  Margin-left:100px;
}
.bubble {
  max-width: 45%; /*will keep chat bubbles from extending over 45% of the horizontal distance across the screen*/
  margin: 2%;
  padding: .25rem .5rem;
  clear: both;
  text-align:center;
}

.chat-left {
  background: linear-gradient(#ffffff,#Cd040b);
  float: left;
  border: .1875rem solid #Cd040b;
  border-radius: 3em 3em 3em 0em;
}

.chat-right {
  background: linear-gradient(#ffffff,#E10174);
  float: right;
  border: .1875rem solid #E10174;
  border-radius: 3em 3em 0em 3em
}
.image{
  Margin-top:1rem;
  border: 10px transparent #525eff;
 	Border-radius: 3rem;
 	max-width: 95%; 
}
p{
  width:90%;
  height:60%;
  background-color: #ffffff;
  border-radius:20%;
  Margin:5%;
  Padding-top:.5em;
  Text-align: center;
  font-family: "Young Serif", serif;
  font-weight: 400;
  font-style: normal;
}
.talk-bubble{
  width:8em;
  height:4em;
	Background-color: #ffffff;
	border: 10px transparent;
  border-radius:3em;
  margin:1em;
} 
.keyboard {
  Left:0;
  width: 20.5em;
  bottom:0em; 
  position: sticky;
  top:22.8em;
  z-index: 2;
  border-right:1px solid black;
  border-bottom:5px solid black;
  border-left:1px solid black;
  border-radius: 0 0 2em 2em;
}
.keyboard img {
  border-radius: 0 0 1.25em 1.25em; 
}
.loading1{
  bottom:-1.25em;
  Left:1em;
  background-color: #808080;
  border: 10px solid transparent;
  border-radius:100%;
  width:0;
  height:0;
  z-index:1;
  Position:Relative;
  Animation-name:colorchange;
  Animation-duration:.75s;
  Animation-iteration-count:infinite;
}
.loading2{
  bottom:.555em;
  Left:1.75em;
  background-color: #808080;
  border: 10px solid transparent;
  border-radius:100%;
  width:0;
  height:0;
  z-index:1;
  Position:Relative;
  Animation-name:colorchange;
  Animation-duration:1s;
  Animation-iteration-count:infinite;
}
.loading3{
  bottom:.6em;
  Left:1.75em;
  background-color: #808080;
  border: 10px solid transparent;
  border-radius:100%;
  width:0;
  Height:0;
  z-index:1;
  Position:Relative;
  Animation-name:colorchange;
  Animation-duration:1.25s;
  Animation-iteration-count:infinite;
}
@keyframes colorchange{
  0%{background:lightgrey}
  50%{background:darkgrey}
	100%{background:lightgrey}
}