@import 'world.css';
@import 'countrylist.css';
@import 'input.css';
@import 'info.css';

:root {

    --color-primary: var(--ink-black);
    --color-background: var(--ink-black);
    --color-bg: var(--shell-white);

    --color-danger: #ae2012;
    --color-warning: #ca6702;

    --north-america: var(--storm-cloud);
    --south-america: var(--oxidized-iron);
    --europe: var(--dark-teal);
    --asia: var(--lavender-dusk);
    --africa: var(--burnt-caramel);
    --oceania: var(--emerald-green);

    /* Ocean Sunset */
    --ink-black: #001219;
    --dark-teal: #005f73;
    --dark-cyan: #0a9396;
    --pearl-aqua: #94d2bd;
    --wheat: #e9d8a6;
    --golden-orange: #ee9b00;
    --burnt-caramel: #ca6702;
    --rusty-spice: #bb3e03;
    --oxidized-iron: #ae2012;
    --brown-red: #9b2226;

    /* Deep Ocean */
    --abyss: #00070d;
    --midnight-water: #001219;
    --deep-ocean: #002b36;
    --ocean-shadow: #003845;

    /* Teals */
    --storm-teal: #004c5f;
    --dark-teal: #005f73;
    --sea-teal: #00798c;
    --dark-cyan: #0a9396;
    --lagoon: #24a6a8;
    --tropical-water: #48b8b4;

    /* Aquas */
    --pearl-aqua: #94d2bd;
    --seafoam: #b7e4d3;
    --mint-surf: #d4efe5;
    --coastal-mist: #edf8f4;

    /* Sand & Beach */
    --driftwood: #c9bc8d;
    --wheat: #e9d8a6;
    --sand: #f1e4bc;
    --sunlit-sand: #f8efd5;
    --shell-white: #fffaf0;

    /* Golden Hour */
    --amber-gold: #d88a00;
    --golden-orange: #ee9b00;
    --sunset-gold: #f6b11a;
    --honey-glow: #fbc74f;
    --warm-light: #ffe08a;

    /* Sunset Orange */
    --burnt-caramel: #ca6702;
    --copper-orange: #d97706;
    --sunset-orange: #e67e22;
    --apricot-glow: #f4a261;

    /* Red Horizon */
    --rusty-spice: #bb3e03;
    --oxidized-iron: #ae2012;
    --brick-red: #c0392b;
    --terracotta: #cd6155;
    --desert-rose: #e59888;

    /* Dusk Reds */
    --brown-red: #9b2226;
    --wine-red: #7f1d1d;
    --burgundy: #6d1b1f;
    --plum-shadow: #5a1a24;
    --twilight-purple: #4a1c2a;

    --moonlight-blue: #4f6d7a;
    --slate-sea: #556b78;
    --storm-cloud: #708090;

    --lavender-dusk: #7d5ba6;
    --dusky-violet: #6c4f77;

    --coral: #e76f51;
    --soft-coral: #f08a6b;
    --salmon-glow: #ff9f80;

    /* Greens */
    --kelp-green: #2a9d8f;
    --emerald-green: #38b000;
    --forest-jade: #40916c;
}

html,
body {
    font-family: 'Courier New', Courier, monospace;
}

header {
    text-align: center;
}


li {
    list-style-type: none;
}

.container {
    max-width: 95%;

}

/* screen is smaller than 768px */
@media (max-width: 768px) {

    body {
        font-size: 10px;
    }

    input {
        font-size: 10px;
    }

    .container {
        max-width: 62%;
        margin: 0 auto;
    }

    header {
        font-size: 9px;
    }
}

#scoreboard {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

#scoreboard>* {
    text-align: center;
    /* flex: 1; */
    border-top: 1px solid var(--color-primary);
    border-left: 1px solid var(--color-primary);
    border-right: 1px solid var(--color-primary);
    padding: 0.25em 1em;
}

.game-over {
    color: var(--color-warning);
}