@import "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css";

@font-face {
    font-family: "RetroPixels";
    src: url("./RetroPixels.ttf") format("truetype");
}

body {
    align-items: center;
    background-color: black;
    color: white;
    display: flex;
    flex-direction: column;
    font-family: "RetroPixels";
    text-align: center;
}

main> :first-child {
    margin-top: 0;
}

header {
    padding-top: 1em;
}

header, main, footer {
    max-width: 1280px;
    width: 90%;
}

header a img:hover {
    opacity: .75;
}

header nav ul {
    margin-bottom: 0;
    margin-top: 0;
}

header nav ul li {
    display: inline;
}

header nav ul li:not(:last-child):after {
    content: "|";
    position: relative;
    right: .05em;
    top: .1em;
}

header #players:not(:empty) {
    color: #ffe737;
    display: block;
    margin-bottom: .5em;
}

footer nav ul li {
    display: inline;
}

footer nav ul li:not(:last-child):after {
    content: "|";
    position: relative;
    right: .05em;
    top: .1em;
}

h1, h2, h3, h4 {
    font-weight: normal;
    margin: .5em 0;
}

p {
    text-align: center;
}

a {
    color: #5ba8ff;
}

a:not(:hover) {
    text-decoration: none;
}

ul {
    list-style: none;
    padding-left: 0;
}

sup {
    top: -.35em;
}

button, .button-link {
    background-color: black;
    border: .05em solid white;
    color: white;
    cursor: pointer;
    display: inline-block;
    padding: .125em .5em;
    text-decoration: none;
}

button:hover, .button-link:hover {
    background-color: white;
    color: black;
}

button:focus {
    outline: none;
}

img {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -o-crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
    max-width: 100%;
}

table {
    border-bottom: 1px solid white;
    border-collapse: collapse;
    border-left: 1px solid white;
    border-right: 1px solid white;
    margin-block-end: 1em;
    margin-block-start: 1em;
    width: 100%;
}

table th, table td {
    border-top: 1px solid white;
    border-right: 1px solid white;
    font-weight: 400;
}

input {
    outline: none;
}

.left-centered-text {
    display: flex;
    justify-content: center;
    text-align: start;
}

#ownership {
    margin-bottom: .5em;
}

#ownership a {
    color: white;
}

#social-links {
    align-items: center;
    display: flex;
    justify-content: center;
}

#social-links a:hover {
    opacity: .75;
}

#social-links a:not(:last-child) {
    margin-right: .5em;
}

@media (min-width: 768px) {
    body {
        font-size: 2em;
    }
    .bi-image img {
        width: 47.25%;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 1.5em;
    }
    .bi-image img {
        width: 100%;
    }
}