@charset "UTF-8";
/* CSS Document */
a:link{color:black;text-decoration:none;}
	a:active{text-decoration:none;}
	a:visited{text-decoration:none;color:black;}
	a.image:hover{opacity:.5;}
	a:hover{color:#0641F5;}
	
body {
	font-size:0px;
}

*{
	box-sizing:border-box;
}

.conversation {

	width: 70%;
	margin: auto;
	padding:20px 20px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
}

.bold {
	font-weight:600;
}

.blank{
	height:250px;
}

.blanktwo{
	height:50px;
}

#shane {
	font-size:130pt;
	font-weight:bold;
	text-align:center;
		display: inline-block;
width: auto;
border-radius: 10px;
max-width: 100%;
padding: 20px 20px;
border-bottom:100px;
		background-color:lightblue;
}

#story {
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:30pt;
	text-align:center;
		font-weight:bold;
		display: inline-block;
width: auto;
border-radius: 10px;
max-width: 100%;
padding: 20px 20px;
		background-color:lightgrey;
}

.openingconversation {

	width: 100%;
	font-size:0px;
	margin:0 auto;
}

.data {
	width:100%;
	margin-bottom:5px;
		text-align: center;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:600;
}

.name {
	font-size: 20px;
}

.date {
font-size: 17px;
}

.location {
	display: inline-block;
width:100%;
	font-size: 12px;
}

.message {
	width: 100%;
	margin-bottom: 15px;
}

.me {
text-align: right;

}

.them {
	text-align: left;

}

.time {
	text-align: center;
}

.message-inner {
display: inline-block;
width: auto;
border-radius: 10px;
max-width: 60%;
padding: 20px 20px;
}

.message-opening {
display: inline-block;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
width: calc(100% - 100px);
border-radius: 10px;
max-width: 90%;
padding: 20px 20px;
	vertical-align:middle;

}

.them .message-inner {
		background-color: lightgrey;

}

.me .message-inner {
		background-color:#3082E5;

		color:#F4F4F4;
}

.time .message-opening {
		background-color: lightgrey;

}

.openingconversation img {
	display: inline-block;
	vertical-align:middle;
	width:100px;
	height:auto;
}

.chatnav {
	display:inline-block;
	width:35%;
	font-size:initial;
	vertical-align:top;
	border-right: 3px solid black;
	padding-right: 46px;
	height:100vh;
	overflow-y:scroll;
}

.chat {
	display:inline-block;
	width:65%;
	font-size: initial;
		height:100vh;
	overflow-y:scroll;
}