@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Cinzel:400,700,900&display=swap');

body {
	background-color:#222222;
	margin:0px;
	padding: 0px;
	border:0px;
	text-align:center;
	font-family: 'Lato', 'Open Sans', sans-serif;
	font-weight: 100;
	font-size:1em;
	color:white;
	
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Cinzel', serif;
	font-weight: 300;
}

p {
	font-family: 'Lato', 'Open Sans', sans-serif;
	font-weight: 300;
}

a:link {
	text-decoration:none;
	color:#ffffff;
}

a:visited {
	text-decoration:none;
	color:#ffffff;
}

hr {
	height:1px;
	border:0px;
	background-color:#cccccc;
}

.heroHeader{
	margin: 30px;
	font-size: 22px;
}

.addaburp {
	position:relative;
	top:-20px;
	font-family:monospace;
	font-size:10px;
	cursor: pointer;
	font-weight: bold;
	border-radius:10px;
	border: 1px solid #444444;
    background-color: #333333;
    padding: 10px;
    width: 25%;
    margin: auto;
    box-shadow: 0px 5px 10px #888888;
    border-radius: 10px;
}

.username{
	border-radius:10px;
	width:50%;
        font-size:16px;
	max-width:340px;
	padding:10px;
}
 #messageContainer {
        align-items: center;
        justify-content: center;
        }

.messagearea{
        width: 35%;
        max-width: 350px;
        height: 100px;
	padding:10px;        
}

.button {
	cursor:pointer;
	margin:auto;
	text-align:center;
	border:1px #cccccc solid;
	border-radius:5px;
	padding:10px;
	width:15%;
	min-width:200px;
}

.messageBox {
	text-align:left;
        border: 6px solid #444444;
    border-radius: 10px;
    background-color: #333;
    padding: 10px 10px;
    width: 85%;
    margin: auto;
    box-shadow: 0px 10px 20px #888888;
}

.handle {
	font-family: Lato;
	font-weight: normal;
	font-size: 12px;
	
}

.message {
	font-family: Lato;
	font-weight: normal;
        border-radius: 10px
}