::selection {color: #000; background: #ffaec9;}
:root {cursor: url('/static/img/cursor-default.gif'), auto;}

body {font-family: sans-serif; text-align: center; color: #fff; padding: 0; margin: 0 auto; width: 600px;}

.header, nav, .main {margin: 4px 0; overflow: hidden; box-sizing: border-box;}
.main, nav > a, .btn {background-color: rgba(0,0,0,0.8); border: 4px outset #fff;}

nav {display: flex; gap: 4px;}
nav > a {flex-basis: 20%; overflow: hidden;}
nav > a:hover, nav > a:active {background-color: #000;}

nav > a, .btn {font-family: "Tahoma", sans-serif; text-decoration: none; font-weight: bold; padding: 8px;}
nav > a:hover, .btn:hover {border-style: inset}
.btn {display: inline-block; font-size: 0.8em; margin: 8px 2px}

.main {padding: 16px 0 24px;}
.header {margin: 16px 0}

h1, h2, h3 {margin: 16px 64px 16px; font-family: monospace}
p {margin: 12px 64px 12px; text-align: justify; text-align-last: center; line-height: 1.5; word-spacing: 0.25px;}
a {color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: url('/static/img/cursor-pointer.gif'), pointer;}

ul, ol {display: inline-block; text-align: left; max-width: 80%}
li {margin-bottom: 16px;}

img {max-height: 100%; max-width: 100%; image-rendering: pixelated;}
img, span, .inline {display: inline-block; vertical-align: middle;}
.main img {margin: 1px 0; border: 0;}
.btn > img {margin: 0}

.buttons {margin: 8px 0;}
.socials {margin-bottom: 24px;}
.buttons img {margin: 1px 1px;}
.buttons > a > img:hover {margin: 0; border: 1px solid #fff;}

.servers {margin: 16px 0 8px;}
.servers img {margin: 1px -1px}
.servers > * {display: block;}
.servers a > *:hover {margin: 0 -2px; border: 1px solid #fff;}

@media screen and (max-width: 600px) {
	body {width: 100vw;}
	header, nav, .main {margin: 4px}
	nav {flex-wrap: wrap;}
	nav > a {flex-basis: 25%; flex-grow: 1; padding: 6px 2px}
	nav > a:first-child, nav > a:first-child+a {flex-basis: 40%;}
	h1, h2, h3, p {margin-left: 32px; margin-right: 32px;}
	.mb {display: block;} .mv {display: none;}
}