@font-face {
	font-family: 'Fira Code';
	src: url('res/fonts/FiraCode-VariableFont_wght.ttf');
}

:root {
    --background: #0A0A0A;
    --background_darker: black;
    --highlight: rgba(255, 255, 255, .05);
    --highlight_bright: rgba(255, 255, 255, .1);
    --selected: rgb(170, 217, 76, .3);
    --border: #3F4145;
    --border_light: #5E6166;
    --text: #FEFEFE;
    --dull: #999999;
    --text_bright: #FFFFFF;
    --accent: #AAD94C;
    --accent2: #D6A76B;
    --accent3: #3498DB;
    --error: #D95757;
    --warning: #EDBC5A;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --monospace: "Fira Code", Inconsolata, "SFMono-Regular", "Consolas", "Menlo", monospace;
}

* {
    -webkit-font-smoothing: subpixel-antialiased;
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    height: 100%;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    background: var(--background);
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
    color: var(--text);
    font-family: var(--font);
    letter-spacing: 1px;
}

.screen {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--background);
    pointer-events: none;
    opacity: 0;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: -1;
    transition: opacity .5s;
}
#game {
    overflow: hidden;
    display: grid;
    grid-template-rows: 1fr auto;
}
.centered {
    display: grid;
    align-items: center;
    justify-content: center;
}
.centeredContent {
    width: 100%;
    text-align: center;
    max-width: 700px;
    display: inline-block;
}
.screen.visible {
    opacity: 1;
    z-index: 0;
    pointer-events: inherit;
}
.screen.paddedContent {
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}
p {
    width: 100%;
    max-width: 500px;
    font-size: .8em;
    margin: 10px 0;
    display: inline-block;
}
p b {
    color: var(--text_bright);
    font-weight: bold;
}
p a {
    text-decoration: none;
    color: var(--accent);
    position: relative;
}
p a:before {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -o-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
    border-bottom: 1px solid;
    transition: width .3s;
}
p a:hover:before {width: 100%;}
.hidden {
    height: 0;
    width: 0;
    display: none;
    opacity: 0;
    pointer-events: none;
}

.title {
    font-family: var(--font);
    color: var(--text_bright);
    font-weight: 700;
    font-size: 3em;
    margin: 10px 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.subtitle {
    font-family: var(--monospace);
    color: var(--dull);
    font-weight: 400;
    font-size: .9em;
    margin: -5px 0 0 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


#logo {
    height: 128px;
    width: 128px;
    position: relative;
    display: inline-block;
    margin: 10px 0;
    padding: 10px 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#logo > svg {
    height: 100%;
    width: 100%;
    -webkit-animation: hover 3s ease-in-out infinite;
    -moz-animation: hover 3s ease-in-out infinite;
    -o-animation: hover 3s ease-in-out infinite;
    -ms-animation: hover 3s ease-in-out infinite;
    animation: hover 3s ease-in-out infinite;
    will-change: transform;
    transform: translateZ(0);
}
#logo:after {
    content: "";
    width: 80%;
    height: 20px;
    position: absolute;
    top: 100%;
    left: 50%;
    background: radial-gradient(rgba(0,0,0,.3) 0%, transparent 100%);
    border-radius: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-animation: shadow 3s ease-in-out infinite;
    -moz-animation: shadow 3s ease-in-out infinite;
    -o-animation: shadow 3s ease-in-out infinite;
    -ms-animation: shadow 3s ease-in-out infinite;
    animation: shadow 3s ease-in-out infinite;
    will-change: transform;
}

.titlebtn {
    margin: 5px;
    font-size: .9em;
    font-family: var(--monospace);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text_bright);
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.titlebtn > div {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    cursor: pointer;
}
.titlebtn > div:after {
    content: "";
    position: absolute;
    height: 75%;
    width: 90%;
    left: -100%;
    top: 12.5%;
    background: var(--accent);
    opacity: 0;
    transition: opacity .3s ease-in, transform .3s, left .3s;
    z-index: -1;
}
.titlebtn > div:hover:after {
    opacity: .7;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -ms-transform: skew(-20deg);
    -o-transform: skew(-20deg);
    transform: skew(-20deg);
    left: 5%;
}
.halfhalf {
    display: grid;
    grid: 1fr / 1fr 1fr;
    text-align: center;
}
.halfhalf > div > div {
    margin: 10px 0;
}
.halfhalf label:first-child {
    text-align: center !important;
}

.radioLabel {
    padding: 7px 12px;
    margin: 5px;
    border-radius: 4px;
    box-sizing: border-box;
    display: inline-block;
    background: var(--highlight);
    font-family: var(--monospace);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: .8em;
    border: 1px solid var(--border_light);
    transition: background .3s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}
.radioLabel:hover {
    background: var(--highlight_bright);
}
input:disabled + .radioLabel {
    background: var(--highlight) !important;
    opacity: .5;
    cursor: default;
}
input:checked + .radioLabel {
    background: var(--selected);
}


.inputWrap {
    width: 95%;
    max-width: 300px;
    margin: 20px 0;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
.inputWrap.checkbox {
    margin: 10px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.inputWrap > label, .halfhalf > div > label, .newGameLabel {
    font-size: .8em;
    margin: 0 0 1px 5px;
    font-family: var(--monospace);
    text-align: left;
    text-transform: uppercase;
    color: var(--dull);
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 1;
}
.inputWrap input, .inputWrap select, .inputWrap textarea {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text_bright);
    font-family: var(--font);
    font-size: 1em;
    outline: none;
    resize: none;
    transition: border-color .3s, opacity .3s;
}
.inputWrap input:disabled, .inputWrap select:disabled, .inputWrap textarea:disabled {
    opacity: .5;
}
.inputWrap input:focus, .inputWrap select:focus, .inputWrap textarea:focus {
    border-color: var(--accent);
}
.inputWrap select:focus {
    border-radius: 4px 4px 0 0;
}
.inputWrap input[type="checkbox"] {
    width: 1em;
    height: 1em;
    margin: 0;
    cursor: pointer;
}
.inputWrap input[type="checkbox"] + label {
    display: inline-block;
    margin: 0;
    padding: 5px 10px;
    cursor: pointer;
    color: var(--text_bright);
    transition: color .3s;
}
.inputWrap input[type="checkbox"]:checked + label {
    color: var(--accent);
}
.inputWrap input[type="checkbox"]:disabled + label {
    color: var(--dull);
    cursor: default;
}
.inputWrap select {
    padding-right: 44px;
    -webkit-appearance: none;
    appearance: none;
}
.inputWrap option {background-color: var(--background);color: var(--text);}
.inputWrap option:checked {color: var(--text_bright);}
.inputWrap select + svg {
    height: 10px;
    width: 10px;
    position: absolute;
    top: calc(50% - 5px);
    right: 10px;
    fill: var(--text_bright);
    pointer-events: none;
}
#regionCheckboxes {
    width: auto;
    display: inline-block;
    text-align: left;
}
#regionCheckboxes > .inputWrap {
    display: flex;
    width: auto;
    margin: 0;
    justify-content: left;
}

.gameModes {
    width: 90%;
    display: inline-block;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.gameModes > label {
    width: 120px;
    margin: 10px;
    border: 1px solid var(--border_light);
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    border-radius: 4px;
    background: var(--highlight);
    transition: background .3s;
    cursor: pointer;
}
.gameModes > label:hover {
    background: var(--highlight_bright);
}
.gameModes > input:checked + label {
    background: var(--selected);
}
.gameModes > label > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
}
.gameModes > label svg {
    width: 60%;
    fill: var(--text_bright);
}
.gameModes > label span {
    margin-top: 10px;
    display: block;
    font-size: .7em;
    letter-spacing: 0px;
    font-family: var(--monospace);
    text-transform: uppercase;
}
.gameModes > label:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.settingGroup {display: none;}
.settingGroup.visible {display: block;}
#newGameErr {
    display: none;
    color: var(--error);
    font-family: var(--monospace);
    letter-spacing: 1px;
    font-size: .8em;
    margin: 20px 0;
}

/* Game Elements */
.map {
    height: 100%;
    width: 100%;
    background: var(--background) !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: none;
    perspective: 800px;
    z-index: 0;
}
.countryMarker {
    background: var(--background);
    border-radius: 50%;
    box-shadow: 0 0 10px 3px rgba(0,0,0,.4);
    padding: 10px;
}
.countryMarker svg {
    height: 100%;
    width: 100%;
    fill: var(--error);
    transform-origin: center center;
    -webkit-animation: countryMarker 3s ease-in-out infinite;
    -moz-animation: countryMarker 3s ease-in-out infinite;
    -ms-animation: countryMarker 3s ease-in-out infinite;
    -o-animation: countryMarker 3s ease-in-out infinite;
    animation: countryMarker 3s ease-in-out infinite;
}
.question {
    width: 100%;
    height: 100%;
    padding: 3% 5%;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 5em;
    font-family: var(--font);
    color: var(--text_bright);
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s;
}
.question > img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 3px;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.2);
    border: 5px solid white;
}
.question.visible {
    opacity: 1;
}
.question.small {
    height: auto;
    color: var(--background_darker);
    text-shadow: 0 0 10px rgba(255,255, 255, .5);
    align-items: flex-end;
}
.question.small > img {
    height: 100px;
    opacity: .85;
}
.countryShapeQuestion {
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-filter: invert();
    -moz-filter: invert();
    -ms-filter: invert();
    -o-filter: invert();
    filter: invert();
}
#answerBank {
    width: 100%;
    text-align: center;
    z-index: 1;
}
#answerBank.floating {
    position: absolute;
    bottom: 25px;
    left: 0;
}
#fr_answer {
    width: 100%;
    box-shadow: 0 -4px 10px rgba(0,0,0,.5);
    display: none;
    position: relative;
}
#fr_answer.visible {
    display: block;
}
#fr_suggestions {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column-reverse;
}
#fr_suggestions > div {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    font-family: var(--monospace);
    font-size: .8em;
    letter-spacing: 1px;
    text-transform: capitalize;
    position: relative;
    color: var(--text);
    text-align: left;
    transition: color .3s;
    cursor: pointer;
}
#fr_suggestions > div:hover, #fr_suggestions > div.selected {
    color: var(--text_bright);
}
#fr_suggestions > div b {
    color: var(--accent) !important;
}
#fr_suggestions > div:before, #fr_suggestions > .err:before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--background);
    opacity: .85;
    z-index: -1;
}
#fr_suggestions > div:after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--accent);
    opacity: 0;
    transition: opacity .3s;
    z-index: -1;
}
#fr_suggestions > div:hover:after {
    opacity: .08;
}
#fr_suggestions > div.selected:after {
    opacity: .25 !important;
}
#fr_suggestions > .err {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    color: var(--error);
    font-family: var(--monospace);
    font-size: .8em;
    letter-spacing: 1px;
    position: relative;
    text-align: left;
}
#fr_answer_input {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    padding: 12px 10px;
    font-size: 1.2em;
    font-family: var(--monospace);
    color: var(--text_bright);
    background: var(--background);
    border: 0;
    margin: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    text-transform: capitalize;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}
.mc_answers {
    width: 100%;
    text-align: center;
    opacity: 0;
    position: relative;
    pointer-events: none;
    transition: opacity .5s;
}
.mc_answers.visible {
    opacity: 1;
    pointer-events: inherit;
}
.mc_a {
    padding: 12px 20px;
    margin: 15px;
    position: relative;
    box-sizing: border-box;
    color: var(--background);
    font-family: var(--font);
    font-size: 1em;
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
    transition: color .3s, background .3s, opacity .3s, font-size .3s;
    cursor: pointer;
}
.mc_a.correct {
    position: absolute;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    left: 50%;
    bottom: 15px;
    pointer-events: none;
    font-size: 1.5em;
}
.mc_a:before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--accent2);
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -ms-transform: skew(-20deg);
    -o-transform: skew(-20deg);
    transform: skew(-20deg);
    opacity: .8;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.5);
    transition: opacity .3s;
    z-index: -1;
}
.mc_a.correct:before {
    background: var(--accent);
}
.mc_a.incorrect:before {
    background: var(--error);
}
.mc_a:hover {
    color: var(--background_darker);
}
.mc_a:hover:before {
    opacity: 1;
}
.mc_a.flag {
    padding: 0;
    border: 2px solid var(black);
    box-shadow: 0 0 0 2px white;
    border-radius: 3px;
    transition: border .3s, height .3s, width .3s;
    overflow: hidden;
}
.mc_a.flag.correct {
    border: 4px solid var(--accent);
    box-shadow: 0 0 5px rgba(0,0,0,.2);
}
.mc_a.flag.incorrect {
    display: none;
}
.mc_a.flag > img {
    height: 64px;
    display: block;
}
.mc_a.flag.correct > img {
    height: 100px;
}
.mc_a.flag:before {
    opacity: 0;
}

.feedbackSymbol {
    max-width: 256px;
    max-height: 256px;
    width: 90%;
    height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    z-index: 1;
}
.feedbackSymbol.visible {
    opacity: 1;
}
#fs_correct {
    fill: var(--accent);
}
#fs_incorrect {
    fill: var(--error);
}
.gameBtns {
    position: fixed;
    top: 15px;
    right: 15px;
    display: flex;
    flex-direction: column;
    z-index: 2;
}
.floatingBtn {
    height: 32px;
    width: 32px;
    position: relative;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 50%;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.5);
    cursor: pointer;
    outline: none;
    overflow: hidden;
    backdrop-filter: blur(2px);
    z-index: 2;
}
.floatingBtn:before, #gameTimer:before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--background);
    opacity: .8;
    z-index: -1;
}
.floatingBtn.red:before {
    background: var(--error);
}
.floatingBtn > svg {
    width: 100%;
    fill: var(--text);
}
.floatingBtn.smaller {
    width: 24px;
    height: 24px;
}
#gameTimer {
    display: inline-block;
    padding: 15px;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    color: var(--text);
    border-bottom-right-radius: 5px;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.5);
    -moz-pointer-events: none;
    -ms-pointer-events: none;
    -o-pointer-events: none;
    -webkit-pointer-events: none;
    pointer-events: none;
    border-right: 1px solid rgba(0,0,0, .3);
    border-bottom: 1px solid rgba(0,0,0, .3);
    font-family: var(--monospace);
    overflow: hidden;
    backdrop-filter: blur(2px);
    z-index: 2;
}
#gameTimer div {
    font-size: 2em;
}
#gameTimer.finale div {
    color: var(--error);
}
#gameTimer span {
    display: block;
    text-align: center;
    letter-spacing: 0;
    font-size: .8em;
    color: var(--dull);
}
#gameTimer span b {
    color: var(--accent);
    font-weight: normal;
}
#gameTimer span b.mid {
    color: var(--warning);
}
#gameTimer span b.bad {
    color: var(--error);
}
#menuStat {
    font-family: var(--font);
    color: var(--text_bright);
}
#menuStat > div:first-child {
    font-size: 4em;
    color: var(--accent);
}
#menuStat > div.mid:first-child {
    color: var(--warning);
}
#menuStat > div.bad:first-child {
    color: var(--error);
}
#menuStat > div:last-child {
    font-size: 1em;
    color: var(--dull);
    font-family: var(--monospace);
    letter-spacing: 1px;
}
#shareBtn {
    display: inline-block;
    padding: 5px;
    font-size: .8em;
    font-family: var(--monospace);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--dull);
    stroke: var(--text);
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    text-align: center;
    transition: stroke .3s, color .3s;
}
#shareBtn > svg {
    display: inline-block;
    height: 24px;
    width: 24px;
    stroke: inherit;
    fill: transparent;
}
#shareBtn:hover {
    stroke: var(--accent);
    color: var(--accent);
}
#menuSummary {
    box-sizing: border-box;
    display: inline-grid;
    grid-template-columns: auto auto auto auto;
    padding: 30px 40px 50px 40px;
}
#menuSummary > div {
    text-align: left;
    display: inline-grid;
    justify-content: left;
    grid-template-columns: auto auto;
    padding: 10px 20px;
    font-size: .8em;
    align-items: center;
    font-family: var(--font);
}
#menuSummary > div > svg {
    height: 1em;
    width: 1em;
    margin-right: 8px;
}

#explore {
    display: grid;
    grid-template-columns: 1fr 350px;
    grid-template-rows: 1fr;
}
#exploreMap {
    width: 100vw;
    height: 100vh;
    background: var(--background) !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: none;
    z-index: 0;
}
#exploreDetails {
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    display: none;
    flex-direction: column;
    background: var(--background);
    box-shadow: 0 0px 15px 10px rgba(0,0,0,.2);
    border-left: 1px solid var(--border);
    z-index: 1;
}
#resizeTarget {
    height: 100%;
    width: 11px;
    position: absolute;
    top: 0;
    left: -6px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: col-resize;
}
#resizeTarget:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: transparent;
    z-index: 2;
    transition: background .3s;
}
#resizeTarget.active:before  {
    background: var(--highlight_bright);
}
#clickCover {
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    display: none;
    cursor: col-resize;
    z-index: 10000;
}
.closeExploreDetails {
    position: absolute;
    top: 10px;
    right: 10px;
    height: 24px;
    width: 24px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    fill: var(--dull);
    transition: fill .3s;
}
.closeExploreDetails:hover, .closeExploreDetails:active {
    fill: var(--error);
}
.exploreTitle {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 20px 20px 0 20px;
    box-sizing: border-box;
}
#exploreFlag {
    margin: 0 20px 20px 0;
    padding: 0;
    border: 2px solid white;
    border-radius: 3px;
}
#exploreCountryName {
    font-size: 2em;
    font-weight: bold;
    display: inline-block;
}
#exploreCountrySubtitle {
    color: var(--dull);
    font-family: monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
#exploreCountrySubtitle > svg {
    height: 1em;
    width: 1em;
    fill: var(--accent3);
    margin-right: 5px;
}
#exploreCountryCodes {
    display: flex;
    grid-gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}
.listen {
    height: 1.5em;
    width: 1.5em;
    fill: var(--dull);
    display: inline-block;
    cursor: pointer;
    transition: fill .3s;
}
.listen:hover, .listen:active {
    fill: var(--accent);
}
#exploreFacts {
    flex: 1;
    width: 100%;
    padding: 0 20px 20px 20px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}
#exploreFactGrid > div {
    display: flex;
    align-items: center;
    margin: 20px 0;
}
#exploreFactGrid > div > svg {
    height: 28px;
    width: 28px;
    fill: var(--text);
    margin-right: 10px;
}
#exploreFactGrid img {
    width: 32px;
    margin-right: 10px;
    border: 2px solid white;
    border-radius: 3px;
}
#exploreFactGrid span {
    font-family: var(--monospace);
    letter-spacing: 1px;
    font-size: .8em;
}
#exploreFactGrid span > d {
    color: var(--dull);
}
#exploreFactGrid > div > div > span:first-child {
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--dull)
}
#exploreFactGrid > div > div > span:last-child {
    display: flex;
    grid-gap: 5px;
    align-items: center;
}
.exploreSection {
    margin: 20px 0;
}
.exploreSectionTitle {
    padding: 10px 36px 10px 0;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    font-family: var(--monospace);
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px dashed var(--dull);
    fill: var(--text);
    transition: color .3s, fill .3s, stroke .3s;
    display: flex;
    align-items: center;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}
.exploreSectionTitle > svg:last-child {
    height: 16px;
    width: 16px;
    position: absolute;
    right: 10px;
    top: calc(50% - 8px);
    fill: inherit;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    transition: transform .3s;
}
.exploreSectionTitle.visible > svg:last-child {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); 
}
.exploreSectionTitle:hover, .exploreSectionTitle:active, .exploreSectionTitle.visible {
    color: var(--accent);
    fill: var(--accent);
}
.exploreSectionTitle > svg:first-child {
    height: 24px;
    width: 24px;
    fill: inherit;
    display: inline-block;
    margin-right: 10px;
}
.exploreSectionContent {
    display: none;
    margin-top: 10px;
}
.exploreSectionTitle.visible + .exploreSectionContent {
    display: block;
}
#exploreDetailSovereigntyImg {
    cursor: pointer;
}

#borderCountries, #territoryCountries {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
}
.noData {
    display: block;
    text-align: center;
    color: var(--dull);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .9em;
    font-family: var(--monospace);
    margin: 5px 0;
}
#borderCountries > div, #territoryCountries > div {
    margin: 10px;
    padding: 10px;
    max-width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: var(--monospace);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: .8em;
    word-wrap: break-word;
    text-align: center;
    transition: background .3s, border .3s;
}
#borderCountries > div:hover, #territoryCountries > div:hover {
    background: var(--highlight);
    border: 1px solid var(--border);
}
#borderCountries > div > img, #territoryCountries > div > img {
    height: 32px;
    border-radius: 3px;
    margin-bottom: 5px;
    border: 2px solid white;
}
ul, ol {
    margin: 0;
    font-family: var(--monospace);
    letter-spacing: 1px;
    font-size: .8em;
}
ul {
    list-style-type: none;
}
ul > li, ol > li {
    text-indent: -10px;   
}
ul > li:before {
    content: "-";
    text-indent: -10px;
    margin-right: 10px;
}
ul d, ol d {
    color: var(--dull);
}
.subtleTable {
    width: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    font-family: var(--monospace);
    letter-spacing: 1px;
    font-size: .8em;
    text-align: left;
    border-collapse: collapse;
}
.subtleTable th:first-child, .subtleTable td:first-child, .subtleTable td:last-child {
    color: var(--dull);
}
.subtleTable td:nth-child(2) {
    text-transform: capitalize;
}
.subtleTable th {
    text-transform: uppercase;
    font-weight: normal;
    border-bottom: 1px solid var(--border);
}
.subtleTable td, .subtleTable th {
    padding: 2px 8px;
    white-space: nowrap;
}
.subtleTable td:last-child, .subtleTable th:last-child  {
    width: 99%;
}

#exploreMenu {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    z-index: 3;
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    -ms-pointer-events: none;
    -o-pointer-events: none;
    pointer-events: none;
}
#exploreMenu > div {
    height: 32px;
    width: 32px;
    padding: 12px;
    border-radius: 50%;
    margin: 10px;
    display: block;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.5);
    cursor: pointer;
    outline: none;
    fill: var(--text);
    -webkit-pointer-events: all;
    -moz-pointer-events: all;
    -ms-pointer-events: all;
    -o-pointer-events: all;
    pointer-events: all;
    backdrop-filter: blur(2px);
    overflow: hidden;
    position: relative;
    z-index: 2;
}
#exploreMenu > div:before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--background);
    opacity: .8;
    z-index: -1;
}
#exploreSearch {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15% 5% 5% 5%;
    background: rgba(0, 0, 0, .2);
    justify-content: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    z-index: 4;
    display: none;
    text-align: center;
}
#exploreSearch.visible {
    display: block;
}
#exploreSearch.visible + div, #exploreSearch.visible + div + div, #exploreSearch.visible + div + div + div {
    -webkit-filter: blur(1px);
    filter: blur(1px);
}
#exploreSearch > div {
    width: 100%;
    max-width: 500px;
    display: inline-block;
    box-shadow: 0 0 15px 10px rgba(0,0,0,.2);
    border: 1px solid var(--border);
    background: var(--background);
    border-radius: 5px;
    overflow: hidden;
}
#searchBarWrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    z-index: 0;
}
#searchBarWrapper > svg {
    padding: 13px;
    height: 16px;
    width: 16px;
    fill: var(--text);
}
#exploreSearch input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    font-size: 1em;
    font-family: var(--monospace);
    letter-spacing: 1px;
    color: var(--text);
    border: 0;
    background: transparent;
    outline: none;
}
#exploreSearchSuggestions {
    width: 100%;
    border-top: 0;
    box-sizing: border-box;
    z-index: 2;
} 
#exploreSearchSuggestions > div {
    padding: 10px;
    font-family: var(--monospace);
    color: var(--dull);
    text-align: left;
    letter-spacing: 1px;
    font-size: .8em;
    position: relative;
    cursor: pointer;
    text-transform: capitalize;
    z-index: 0;
}
#exploreSearchSuggestions > div:hover {
    background: var(--highlight);
}
#exploreSearchSuggestions > div.active {
    background: transparent !important;
}
#exploreSearchSuggestions > div.active:before {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    -ms-pointer-events: none;
    -o-pointer-events: none;
    pointer-events: none;
    background: var(--accent);
    opacity: .2;
    z-index: -1;
}
#exploreSearchSuggestions > div > b {
    color: var(--accent);
    font-weight: 400;
}





.loader {
    height: 64px;
    width: 64px;
    position: fixed;
    top: calc(50% - 90px);
    left: calc(50% - 32px);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .5);
    border-left-color: var(--accent);
    -webkit-animation: loader 1.5s linear infinite;
    -moz-animation: loader 1.5s linear infinite;
    -o-animation: loader 1.5s linear infinite;
    -ms-animation: loader 1.5s linear infinite;
    animation: loader 1.5s linear infinite;
    z-index: 3;
}
.loaderText {
    margin-top: 58px;
    letter-spacing: 3px;
    font-family: var(--monospace);
    -webkit-animation: loaderText 2s ease-in-out infinite;
    -moz-animation: loaderText 2s ease-in-out infinite;
    -o-animation: loaderText 2s ease-in-out infinite;
    -ms-animation: loaderText 2s ease-in-out infinite;
    animation: loaderText 2s ease-in-out infinite;
}
.fadeMsg {
    display: inline-block;
    padding: 5px 10px;
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 4px;
    font-size: .8em;
    letter-spacing: 1px;
    font-family: var(--monospace);
    background: var(--background);
    color: var(--text);
    box-shadow: 0 0 5px 0 rgba(0,0,0,.2);
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    -ms-pointer-events: none;
    -o-pointer-events: none;
    pointer-events: none;
    -webkit-animation: fadeMsg 3s ease-in-out 1;
    -mos-animation: fadeMsg 3s ease-in-out 1;
    -ms-animation: fadeMsg 3s ease-in-out 1;
    -o-animation: fadeMsg 3s ease-in-out 1;
    animation: fadeMsg 3s ease-in-out 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    border: 1px solid var(--border);
    background: var(--highlight);
    z-index: 5;
    overflow: hidden;
}
.fadeMsg:before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--highlight);
    z-index: -1;
}
@-webkit-keyframes fadeMsg {
    50% {opacity: 1;}
    100% {opacity: 0;-webkit-transform: translate(30px, -30px);-moz-transform: translate(30px, -30px);-ms-transform: translate(30px, -30px);-o-transform: translate(30px, -30px);transform: translate(30px, -30px);}
}
@keyframes fadeMsg {
    50% {opacity: 1;}
    100% {opacity: 0;-webkit-transform: translate(30px, -30px);-moz-transform: translate(30px, -30px);-ms-transform: translate(30px, -30px);-o-transform: translate(30px, -30px);transform: translate(30px, -30px);}
}
@-webkit-keyframes countryMarker {
    100% {-webkit-transform: rotateY(-360deg);-moz-transform: rotateY(-360deg);-ms-transform: rotateY(-360deg);-o-transform: rotateY(-360deg);transform: rotateY(-360deg);}
}
@keyframes countryMarker {
    100% {-webkit-transform: rotateY(-360deg);-moz-transform: rotateY(-360deg);-ms-transform: rotateY(-360deg);-o-transform: rotateY(-360deg);transform: rotateY(-360deg);}
}
@-webkit-keyframes loaderText {
    50% {color: var(--dull);}
}
@keyframes loaderText {
    50% {color: var(--dull);}
}
@-webkit-keyframes loader {
    100% {-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@keyframes loader {
    100% {-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@-webkit-keyframes skewhover {
    75% {left: 15%;-webkit-transform: skew(-20deg);-moz-transform: skew(-20deg);-ms-transform: skew(-20deg);-o-transform: skew(-20deg);transform: skew(-20deg);}
    100% {left:5%;-webkit-transform: skew(-20deg);-moz-transform: skew(-20deg);-ms-transform: skew(-20deg);-o-transform: skew(-20deg);transform: skew(-20deg);}
}
@keyframes skewhover {
    75% {left: 15%;-webkit-transform: skew(-20deg);-moz-transform: skew(-20deg);-ms-transform: skew(-20deg);-o-transform: skew(-20deg);transform: skew(-20deg);}
    100% {left:5%;-webkit-transform: skew(-20deg);-moz-transform: skew(-20deg);-ms-transform: skew(-20deg);-o-transform: skew(-20deg);transform: skew(-20deg);}
}
@-webkit-keyframes hover {
    50% {-webkit-transform: translateY(-5%);-moz-transform: translateY(-5%);-o-transform: translateY(-5%);-ms-transform: translateY(-5%);transform: translateY(-5%);}
    100% {-webkit-transform: translateY(0);-moz-transform: translateY(0);-o-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
}
@keyframes hover {
    50% {-webkit-transform: translateY(-5%);-moz-transform: translateY(-5%);-o-transform: translateY(-5%);-ms-transform: translateY(-5%);transform: translateY(-5%);}
    100% {-webkit-transform: translateY(0);-moz-transform: translateY(0);-o-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
}
@-webkit-keyframes shadow {
    50% {-webkit-transform: translateX(-50%) scaleX(.9);-moz-transform: translateX(-50%) scaleX(.9);-o-transform: translateX(-50%) scaleX(.9);-ms-transform: translateX(-50%) scaleX(.9);transform: translateX(-50%) scaleX(.9);}
    100% {-webkit-transform: translateX(-50%) scaleX(1);-moz-transform: translateX(-50%) scaleX(1);-o-transform: translateX(-50%) scaleX(1);-ms-transform: translateX(-50%) scaleX(1);transform: translateX(-50%) scaleX(1);}
}
@keyframes shadow {
    50% {-webkit-transform: translateX(-50%) scaleX(.9);-moz-transform: translateX(-50%) scaleX(.9);-o-transform: translateX(-50%) scaleX(.9);-ms-transform: translateX(-50%) scaleX(.9);transform: translateX(-50%) scaleX(.9);}
    100% {-webkit-transform: translateX(-50%) scaleX(1);-moz-transform: translateX(-50%) scaleX(1);-o-transform: translateX(-50%) scaleX(1);-ms-transform: translateX(-50%) scaleX(1);transform: translateX(-50%) scaleX(1);}
}
* {
  scrollbar-width: thin;
  scrollbar-color: dark;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: none; 
}
::-webkit-scrollbar-track {
  background: none;
}
::-webkit-scrollbar-thumb {
  background-color: var(--highlight);
  border-radius: 5px;
  border: 0;
}
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active {
  background-color: var(--highlight_bright);
  border: 0;
}
::-webkit-scrollbar-track-thumb {
  background-color: red;
}
::-webkit-scrollbar-corner, ::-webkit-scrollbar-button {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  display: none;
  border: 0;
}

@media all and (max-width: 1000px) {
    #explore {
        grid-template-rows: auto 40%;
        grid-template-columns: 1fr;
    }
    #exploreDetails {
        height: 100%;
        width: 100vw;
        border-left: 0;
        border-top: 1px solid var(--border);
    }
    #exploreFactGrid {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    #exploreFactGrid > div {
        margin: 20px;
    }
    #exploreMenu {
        display: flex;
    }
    #exploreMenu > svg {
        display: inline-block;
    }
    #resizeTarget {
        width: 100%;
        height: 51px;
        left: 0px;
        top: -11px;
        cursor: default;
    }
    #resizeTarget:before {
        width: 100%;
        height: 11px;
        top: 5px;
        left: 0;
        cursor: row-resize;
    }
    #clickCover {
        cursor: row-resize;
    }
}
@media all and (max-width: 1000px) and (max-height: 900px) {
    #explore {
        grid-template-rows: auto 50%;
        grid-template-columns: 1fr;
    }
}
@media all and (max-width: 800px) {
    #menuSummary {
        grid-template-columns: auto auto auto;
    }
    #menuSummary > div {
        padding: 10px;
    }
}
@media all and (max-width: 500px) {
    #menuSummary {
        grid-template-columns: auto auto;
        padding: 30px 20px 50px 20px;
    }
    #exploreFactGrid {
        display: grid;
        grid: 1fr 1fr 1fr / 1fr 1fr;
    }
    #exploreFactGrid > div {
        margin: 15px;
    }
}
@media all and (max-width: 400px) {
    #menuSummary {
        grid-template-columns: auto;
        padding: 30px 15px 50px 15px;
    }
}