body{
	background-color: #f6f6f6;
}
.phone{
	position: absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}
.display{
	z-index: 1000;
	position: absolute;
	top:50%;
	left:50%;
	background-color: white;
	width:364px;
	height:670px;
	transform:translate(-50%, -50%);
	display: flex;
	flex-direction: column-reverse;
	align-content: flex-end;
}
.chatWindow{
	padding:0 10px 10px 15px;
}
.message{
	display: flex;
	font-family: Heebo;
}
.textContainer{
	background-color: green;
	flex-grow: 1;
	padding:5px;
}
.textRightContainer{
	background-color: red;
	flex-grow: 1;
	padding:5px;
}
.triangleContainer .triangle{
	width: 0;
    height: 0;
    border-top: 10px solid green;
    border-right: 10px solid transparent;
}
.triangleRightContainer .triangleRight{
	width: 0;
    height: 0;
    border-top: 10px solid red;
    border-left: 10px solid transparent;
}
.circleContainer .circle{
	width:50px;
	height:50px;
	border-radius: 100px;
	border:1px solid black;
	background-image: url(../img/todd.png);
	background-size: auto 100%;

}
.circleContainer .circle{
	width:50px;
	height:50px;
	border-radius: 100px;
	border:1px solid black;
	background-image: url(../img/todd.png);
	background-size: auto 100%;
}
.circleRightContainer .circleRight{
	width:50px;
	height:50px;
	border-radius: 100px;
	border:1px solid black;
	background-image: url(../img/eir.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 80%;
}
.messageWindow{
	height:50px;
	padding:0 10px 10px 15px;
	display: flex;
}
.messageWindow input{
	outline: none;
	padding:5px;
}
.messageWindow i{
	font-size: 2em;
}