:root {
	--good: LimeGreen;
	--bad: crimson;
	--text_color: #ccc;
	--background: #1a1a1a;
}
* { font-family: 'Montserrat', sans-serif; }
body { margin: 20px auto 150px auto; padding:0; background-color: var(--background); max-width: 600px; }
h1 { color: var(--text_color); margin-top: 60px; margin-bottom: 10px; }
h2 { color: var(--text_color); }
h3 { color: var(--text_color); margin-bottom: 5px; }
p { color: var(--text_color); margin-top: 0; margin-bottom: 0.5em; }
a { color: var(--text_color); cursor: pointer; text-decoration: underline; }
a:hover { color: cornflowerblue; }

#js-check { padding: 30px; text-align: center; position: fixed; max-width: 600px; background-color: #2b2b2b; color: var(--bad); font-size: 18; font-weight: bolder; border: 3px solid var(--bad); border-radius: 5px; }

.button { margin-left: 20px; margin-top: 5px; padding: 10px 20px; max-width: 200px; color: black; background-color: cornflowerblue; text-align: center; display: block; border-radius: 5px; text-decoration: none; }
.button:hover { color: black; filter: brightness(85%); }
.blocked { background-color: brown; }

#header h1 { display: inline; vertical-align: middle; margin-left: 10px;}

.display_success { background-color: var(--bad); border-radius: 5px; padding: 20px; text-align: center; margin-bottom: 10px; width: 320px;}
#online { width: 180px; }
#tests { display: none; padding: 0 20px; }
#bluemap { display: none; }
.fa-copy {cursor: pointer; color: black;}
.fa-copy::before { margin-right: 8px;}
@media only screen and (max-width: 640px) {
	body { margin: 20px; }
	#js-check { margin-left: -20px;}
	.button { margin: auto; margin-top: 5px;}
	.display_success { width: auto; }
	#online { width: auto; }
}