* {padding:0;margin:0;box-sizing:border-box}
html,body {height:100%}
body {
    background: #232323;
    color: #FFFFFF;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: 12pt;
}

:root {
    --size: 120px;
    --width: 1320px;
}

a:link,a:visited {
    color: #99AAFF;
    text-decoration: none;
}
a:hover {
    color: #FFAA99;
    text-decoration: underline;
}

@media only screen and (max-width: 600px) {
    :root {
        --size: 75px;
        --width: 600px;
    }

    body {font-size: 9pt}
}
.hidden {
    display: none !important;
}

h1 {text-align: center}
.container {
    margin: 0 auto;
    padding-top: 1em;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--size));
    justify-content: center;
    width: 80%;
    max-width: var(--width);
    user-select: none;
}
.links {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1em;
    width: fit-content;
    margin: 0 auto;
    text-align: center;
    user-select: none;
}

.card {
    display: grid;
    margin: 0 -0.5em;
}
.card img {
    width: var(--size);
    margin: 0 auto;
}
.card label {
    text-align: center;
    color: #999999;
}
.card img {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    opacity: 0.5;
}
.card.obtained img {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    opacity: 1;
}
.card.obtained label {
        color: #FFFFFF;
}

.new-container {
    width: 50%;
    margin: 10% auto;
}
.new-container h2 {
    margin: 0.5em 0;
}
.new-container p {
    margin: 0.5em 0;
}

.new-link {
    display: block;
}
.new-link:before {
    content: '\00a0\2022\00a0';
    display: inline-block;
}