@font-face {
  font-family: 'Montserrat';
  src: url('Montserrat-Bold.woff2') format('woff2'),
       url('Montserrat-Bold.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

* {
box-sizing: border-box;
}

.chat-image {
    max-width: 150px;
    height: auto;
}

body {
	margin:0;
	padding:0;
  	color:#fff;
	font-family: 'Montserrat', Arial, sans-serif;
	}
	
#metBG{
    background-color: #303030;
}

a {
 color:#f44336;
}

.smiley {
    margin-right: 8px;
}

#header {
	width:100%;
	}

.smileys{
	text-align:center;
	padding:3px;
	}

.smileys img{
	padding:3px;
	}

.form {
	width:100%;
	max-width: 600px;
	margin: 0 auto;
}

form {
	padding: 2px 25px;
	text-align: center;
}

input {
	background-color: #303030;
	font-size:16px;
	margin: 3px auto;
	color:#fff;
	font-family: 'Montserrat', Arial, sans-serif;
	}

input[type=text] {
	width: 100%;
	padding: 6px;
	border: 1px solid #ccc;
  	border-radius: 4px;
  	resize: vertical;
	text-align:center;
}

input[type=password] {
	width: 100%;
	padding: 6px;
	border: 1px solid #ccc;
  	border-radius: 4px;
  	resize: vertical;
	text-align:center;

  	}

input[type=submit] {
  	width: 50%;
	padding: 6px;
	background-color: #1156b3;
  	border: none;
  	border-radius: 4px;
  	cursor: pointer;
	font-weight:bold;
	}
	
	
.button-style {
  	width: 50%;
	padding: 6px;
	background-color: #1156b3;
  	border: none;
  	border-radius: 4px;
  	cursor: pointer;
	font-weight:bold;
	color:#ffffff;
	text-decoration: none;
	}
#tags {
	overflow-y: auto;
	width:100%;
	max-width: 1200px;
	margin:0 auto;
	text-shadow: 2px 4px 2px #000000;
	}

#tags a {
	color: #ffffff;
	font-weight:bold;
	}

.online {
	font-size:small;
	text-align:center;
	width:100%;
	margin-bottom:10px;
	}

.time {
	font-size:80%;
	}

.messages {
	padding: 3px;
	font-size:18px;
	}

.ip_adress {
	text-align:center;
	font-size:small;
	}

@media screen and (max-width: 600px) {
	
	.messages {
	font-size:90%
	}

	.smileys img{
	padding:0;
	}

	#header {
	width: 100%;
	}
    
	#tags {
	width: 100%;
	}

 input {
	font-size:90%;
	padding:3px;
	}

}