body {
	padding: 0;
	margin: 0;
	font-family: "Courier New";
}

.fixMessage{
    position:fixed;
    bottom:0px;
    left: 50%;
    width: 800px;
    transform: translateX(-50%);
}

#panel4 {
	width: 100%;
}

.FriendBubble {
	position: relative;
	background-color: #e4e4e2;
	border-radius: 2em;
	padding: 20px 20px;
	/*padding: 5px 30px;		/*add some padding so words aren't next to edge of bubble*/
}

.FriendBubble:after { /*this needs the same class name as above to work*/
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	/*border: 20px solid transparent;*/
	border: 25px solid transparent;
	border-top-color: #e4e4e2;
	border-bottom: 0;
	border-left: 0;
	margin-left: -10px;
	margin-bottom: -20px;
}

.MyBubble {
	position: relative;
	background-color: #5BC236;
	border-radius: 2em;
	padding: 20px 20px;
	/*padding: 5px 30px;		/*add some padding so words aren't next to edge of bubble*/
}

.MyText:after { 
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #5BC236;
	border-bottom: 0;
	border-left: 0;
	margin-left: -10px;
	margin-bottom: -20px;
}


/*
This style works fine for one lines, two lines, etc. 
As long as there is a width on the sticky-text box, the text will wrap to the next line.
*/
.FriendText {
	/*font-size: 1em;*/
	font-size: 1.2vw;
	font-family: "Roboto Mono";
}

.MyText {
	/*font-size: 1em;*/
	font-size: 1.2vw;
	font-family: "Roboto Mono";
}
/*
The same goes for all sticky-text:
Set the width to whatever you'd like.
• margin-left is how far it is from the left side of the browser window
• margin-top is it's starting point. At 105vh it is just out of the viewport view at bottom.
• then do position:sticky;
• use "top" value to set where it should finish, or stick
*/
.sticky-text1Message {
	/*width: 400px;
	margin-left: 50px;
	margin-top: 105vh;
	position: sticky;
	top: 2vh;*/
	width: 40%;
	margin-left: 5%;
	min-width: 500px
	margin-top: 105vh;
	position: sticky;
	top: 2vh;
}


.sticky-text2Message {
	/*width: 300px;
	margin-left: 800px;
	margin-top: 105vh;
	position: sticky;
	top: 8vh;*/
	width: 20%;
	margin-left: 65%;
	margin-top: 105vh;
	position: sticky;
	top: 8vh;
}

.sticky-text3Message {
	/*width: 400px;
	margin-left: 50px;
	margin-top: 105vh;
	position: sticky;
	top: 20vh;*/
	width: 20%;
	margin-left: 5%;
	margin-top: 105vh;
	position: sticky;
	top: 18vh;
}

.sticky-text4Message {
	/*width: 380px;
	margin-left: 800px;
	margin-top: 105vh;
	position: sticky;
	top: 25vh;*/
	width: 30%;
	margin-left: 65%;
	margin-top: 105vh;
	position: sticky;
	top: 25vh;
}

.sticky-text5Message {
	/*width: 550px;
	margin-left: 50px;
	margin-top: 105vh;
	position: sticky;
	top: 35vh;*/
	width: 40%;
	margin-left: 5%;
	margin-top: 105vh;
	position: sticky;
	top: 33vh;
}

.sticky-text6Message {
	/*width: 200px;
	margin-left: 800px;
	margin-top: 105vh;
	position: sticky;
	top: 42vh;*/
	width: 13%;
	min-width: 80px;
	margin-left: 65%;
	margin-top: 105vh;
	position: sticky;
	top: 42vh;
}

.sticky-text7Message {
	/*width: 500px;
	margin-left: 50px;
	margin-top: 105vh;
	position: sticky;
	top: 58vh;*/
	width: 35%;
	margin-left: 5%;
	margin-top: 105vh;
	position: sticky;
	top: 55vh;
}

.sticky-text8Message {
	/*width: 90px;
	margin-left: 800px;
	margin-top: 105vh;
	position: sticky;
	top: 65vh;*/
	width: 5%;
	min-width: 80px;
	margin-left: 65%;
	margin-top: 105vh;
	position: sticky;
	top: 60vh;
}

.sticky-text9Message {
	/*width: 430px;
	margin-left: 50px;
	margin-top: 105vh;
	position: sticky;
	top: 75vh;*/
	width: 30%;
	margin-left: 5%;
	margin-top: 105vh;
	position: sticky;
	top: 75vh;
}
/*
This style simply adds a long box to the end of the page so the last sticky element can get into place.
*/
.box-for-spaceMessage {
	width: 400px;
	height: 800px;
}