@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;800;900&family=Oswald:wght@300;400;500;700&display=swap');

:root {
    --bg-color: rgb(15, 15, 15);
    --text-color: lightgray;
    --link-color: lightblue;
    --link-hover-color: white;
    --bg-image: url("../images/icecrown_citadel.webp");
}

* {
    color: var(--text-color);
    font-family: Oswald, sans-serif;
    font-weight: 400;
}

.title {
    user-select: none;
    font-size: 5em;
}

a:hover {
    cursor: pointer;
    color: var(--link-hover-color);
}

.inlineLink {
    text-decoration: none;
    color: var(--link-color);
    transition: 0.2s;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
}

.nav {
    padding-bottom: 1.7em;
    padding-top: 3.4em;
    background-image: var(--bg-image);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}

.footer {
    position: fixed;
    bottom: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 25%;
    right: 25%;
}

.footer.hide {
    display: none;
}

.footer a {
    text-decoration: none;
}

.page {
    padding: 1em 2em;
}

.links {
    align-self: center;
    text-align: center;
    align-items: center;
}

.links > a {
    margin: 0 0.5em;
    font-size: 1.4em;
    letter-spacing: 0.1em;
}

.links > a.current {
    color: white;
    pointer-events: none;
}

.nav a {
    text-decoration: none;
    transition: 0.2s;
}

h1 {
    text-align: center;
}

option:hover {
    background-color: white;
}

[data-place="VICTORY"] {
    color: gold;
}

[data-place="GRANDFINAL"] {
    color: #00DD00;
}

[data-place="FINAL"] {
    color: #55CC00;
}

[data-place="TOP 2"] {
    color: #CCAA00;
}

[data-place="TOP 3"] {
    color: #EEAA00;
}

[data-place="TOP 4"] {
    color: #FFAA00;
}

[data-place="TOP 5"] {
    color: #FFA500;
}

[data-place="TOP 6"] {
    color: #FFA000;
}

[data-place="TOP 7"] {
    color: #FF9500;
}

[data-place="TOP 8"] {
    color: #FF9000;
}

[data-place="TOP 9"] {
    color: #FF8500;
}

[data-place="TOP 10"] {
    color: #FF8000;
}

[data-place="TOP 11"] {
    color: #FF7700;
}

[data-place="TOP 12"] {
    color: #FF7400;
}

[data-place="TOP 13"] {
    color: #FF7000;
}

[data-place="TOP 14"] {
    color: #FF6700;
}

[data-place="TOP 15"] {
    color: #FF6400;
}

[data-place="TOP 16"] {
    color: #FF6000;
}

[data-place="TOP 17"] {
    color: #FF5700;
}

[data-place="TOP 18"] {
    color: #FF5400;
}

[data-place="TOP 19"] {
    color: #FF5000;
}

[data-place="TOP 20"] {
    color: #FF4700;
}

[data-place="TOP 21"] {
    color: #FF4400;
}

[data-place="TOP 22"] {
    color: #FF4000;
}

[data-place="TOP 23"] {
    color: #F03700;
}

[data-place="TOP 24"] {
    color: #E83400;
}

[data-place="TOP 25"] {
    color: #E03000;
}

[data-place="TOP 26"] {
    color: #D82700;
}

[data-place="TOP 27"] {
    color: #D02400;
}

[data-place="TOP 28"] {
    color: #C82000;
}

[data-place="TOP 29"] {
    color: #C01700;
}

[data-place="TOP 30"] {
    color: #B81400;
}

[data-place="TOP 31"] {
    color: #B01000;
}

[data-place="TOP 32"] {
    color: #A80700;
}

[data-place="TOP 33"] {
    color: #A00000;
}

[data-place="TOP 34"] {
    color: #980000;
}

[data-place="TOP 35"] {
    color: #900000;
}

[data-place="TOP 36"] {
    color: #880000;
}

[data-place="TOP 37"] {
    color: #800000;
}

[data-place="TOP 38"] {
    color: #780000;
}

[data-place="TOP 39"] {
    color: #700000;
}

@media only screen and (max-width: 800px) {
    .footer {
        display: none;
    }
}