:root {
  --main-background-color: #202122;
  --main-front-color: #f5f2e9;
  --secondary-front-color: #ece6d5;
  --tertiary-front-color: #d8d2c1;
  --main-text-color: #f8f8f8;
  --secondary-text-color: #f2f2ef;
  --accent-color-1: #FFD447;
  --accent-color-1-alt: #fade68;
  --neutral-color-1: #3c3c3c;
  --neutral-color-1-alt: #4b4b4b;
  --neutral-color-2: #d3d3d3;
  --neutral-color-3: #cecece;
  --error-color: #a02f2f;
  --deep-color: #f5f2e9;
}
/* SVG */
svg {
    background-color: var(--main-background-color);
    background-image: url(../img/noisy-texture-dark.png);
    height: 100vh;
    width: 100vw;
    display: block;
}
.country {
    fill: var(--main-front-color);
    stroke: var(--main-background-color);
    stroke-width: .75;
    stroke-linejoin: round;
    transition: fill .1s cubic-bezier(.35,.01,.41,2.55);
}
#AQ {
    fill: var(--main-front-color);
    stroke: var(--main-front-color);
}
.countrySuccess {

    animation-name: countrySuccess;
    animation-duration: .8s;
    animation-direction: alternate-reverse;
    animation-iteration-count: infinite;
    
}
.countryError {
    animation-name: countryError;
    animation-duration: .8s;
    animation-direction: alternate-reverse;
    animation-iteration-count: infinite;
}
.contested {
    stroke-dasharray: 3 6;
    stroke-width: 2;
    stroke:var(--main-front-color);
}
.country:hover {
    fill:  var(--secondary-front-color);
    cursor: pointer;
}
.countryOver {
    fill:  var(--tertiary-front-color);
}
.graticule {
    fill: none;
    stroke: rgba(233, 239, 245, 0.32);
    stroke-width: .5px;
    stroke-opacity: .5;
}

.rounds {
    color: var(--main-front-color);
    text-shadow: 0px 0 2px black;
    margin-top: 5px;
}
.typeBackArrow, .typeForwardArrow{
    display: inline-block;
    background-image: url(../img/arrow_light.svg);
}

.pacificLines {
    fill:rgba(255, 255, 255, 0);
    cursor:pointer;
}