@import "index.css";

:root {
    --light-pink: #f2c0f6;
    --turf-blue: #164c73;
    --grass-green: #b4edb4;

    --dark-red: #981818;
    --dark-orange: #9a631f;
    --dark-yellow: #8b8b19;
    --dark-green: #137913;
    --dark-black: #111111;
    --dark-blue: #1940a4;
    --light-gray: #cccccc;
}

.game * {
    color: var(--turf-blue);
}

.disclaimer {
    text-align: center;
    padding-bottom: 0;
    margin-bottom: 0;
    font-style: italic;
}

.king-sized-header {
    position: static;
}

.article-encloser * {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#wc-top {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 10;
    background-color: var(--light-pink);
}

.game-banner {
    margin: 0;
    padding-bottom: 10px;
}

#finished-games-text {
    margin-top: 10px;
}

#wc-opening-banner {
    display: block;
    width: 100%;
    margin: auto;
    background-color: var(--light-pink);
    color: var(--turf-blue);
    padding: 5px 0;    
}

#wc-choices {
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-content: space-evenly;
    justify-content: center;
    width: 90%;
    margin: 0px auto;
    padding-bottom: 8px;
}

.wc-choice-button {
    padding: 8px;
    margin: auto;
    border: 3px solid var(--turf-blue);
    background-color: var(--grass-green);
    width: 70%;
    text-align: center;
    margin-bottom: 0;
}

.wc-choice-button a {
    text-decoration: none;
    font-weight: bold;
    color: var(--turf-blue);
}

.game-banner {
    color: var(--turf-blue);
    text-align: center;
}

.game {
    display: grid;
    grid-template-columns: 1fr;
    padding: 5px 0;
    border: 4px solid var(--turf-blue);
    width: 80%;
    margin: 7px auto;
}

.date-and-group {
    width: 80%;
    font-size: 1.5vw;
    font-style: italic;
    border-bottom: 1px solid var(--turf-blue);
    margin: auto;
    text-align: center;
    padding-bottom: 3px;
}

.countries {
    display: grid;
    grid-template-columns: 25% 50% 25%;
    align-content: center;
    justify-content: center;
    width: 80%;
    margin: auto;
    padding: 5px 0 3px;
}

.country-image {
    width: 30%;
}

.left-country-image {
    justify-self: end;
}

.right-country-image {
    justify-self: start;
}

.country-score {
    width: 100%;
    font-size: 2.5vw;
    text-align: center;
}

.little-text-banner {
    width: 90%;
    margin: auto;
    text-align: center;
    border-top: 1px solid var(--turf-blue);
    border-bottom: 1px solid var(--turf-blue);
    padding: 2px 0;
}

.adams-prediction {
    border-bottom: none;
    padding-bottom: 0;
    padding-top: 5px;
}

.percent-colors {
    display: grid;
    width: 90%;
    margin: auto;
}

.color-swatch {
    height: min(25px, 2.5vw);
    text-align: center;
    font-size: min(18px, 1.8vw);
    overflow: hidden;
}

.left-win-color, .right-win-color {
    color: white;
    font-weight: bold;
}

.tie-color {
    color: black;
    font-weight: bold;
    background-color: var(--light-gray);
}

.adam-was {
    text-align: center;
    font-weight: bold;
}

.correct {
    color: var(--dark-green);
}

.wrong {
    color: var(--dark-red);
}

.bold {
    font-weight: bold;
}

.red {
    background-color: var(--dark-red);
}
.orange {
    background-color: var(--dark-orange);
}
.yellow {
    background-color: var(--dark-yellow);
}
.green {
    background-color: var(--dark-green);
}
.blue {
    background-color: var(--dark-blue);
}
.black {
    background-color: var(--dark-black);
}

.t-red {
    color: var(--dark-red);
}
.t-orange {
    color: var(--dark-orange);
}
.t-yellow {
    color: var(--dark-yellow);
}
.t-green {
    color: var(--dark-green);
}
.t-blue {
    color: var(--dark-blue);
}
.t-black {
    color: var(--dark-black);
}

.article-encloser {
    margin-bottom: 50px;
}

#finished-games-banner {
    margin-top: 25px;
}