@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800");

/* Resets */

:root {
    --font-family: "Open Sans", sans-serif;
    --width: 900px;
    --blue1: hsl(220, 100%, 30%); 
    --blue2: hsl(220, 50%, 50%); 
    --blue3: hsl(220, 50%, 66%); 
    --blue4: hsl(220, 50%, 80%); 
    --blue5: hsl(220, 50%, 90%); 
    --green1: hsl(175, 100%, 30%);  
    --green2: hsl(175, 50%, 50%); 
    --green3: hsl(175, 50%, 66%); 
    --green4: hsl(175, 50%, 80%);
    --green5: hsl(175, 50%, 90%); 
    --yellow: hsl(40, 80%, 60%); 
    --red1: hsl(360, 70%, 50%); 
    --red2: hsl(360, 60%, 60%); 
    --red3: hsl(360, 60%, 75%); 
    --red4: hsl(360, 60%, 85%); 
    --red5: hsl(360, 60%, 90%); 
    --unBlue1: hsl(210, 70%, 50%); 
    --unBlue2: hsl(210, 70%, 66%); 
    --unBlue3: hsl(210, 70%, 77%); 
    --unBlue4: hsl(210, 70%, 88%); 
    --unBlue5: hsl(210, 70%, 97%); 
    --gray1: hsl(0, 0%, 30%); 
    --gray2: hsl(0, 0%, 40%); 
    --gray3: hsl(0, 0%, 60%); 
    --gray4: hsl(0, 0%, 80%); 
    --gray5: hsl(0, 0%, 95%); 
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    font: inherit;
}

strong {
    font-weight: 700;
}

emph {
    font-style: italic;
}

h1 {
    margin: 1rem 0;
}

body {
    font-family: var(--font-family);
    font-size: .8rem;
    font-size: 0.6rem;
    font-size: clamp(0.6rem, 0.4rem + 0.67vw, 0.8rem);
    margin: 1rem;
}

.container {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: var(--width);
}

/* Forms */

.forms {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--blue5);
    padding: 1rem;
    border-radius: 5px 5px 0 0;

    @media (max-width: 500px) {
        padding: .7rem;
        gap: .5rem;
    }
}

.forms > * {
    display: flex;
    flex-direction: row;
    gap: 1rem;

    @media (max-width: 500px) {
        flex-direction: column;
        gap: .2rem;
    }
}

.form-label {
    width: 7rem;
    font-weight: bold;
    color: var(--blue1);
}

.options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: .8rem;
    row-gap: .5rem;

    @media (max-width: 500px) {
        column-gap: .5rem;
        row-gap: .2rem;
    }
}

.option {
    display: flex;
    flex-direction: row;
    gap: .3rem;
}

/* Panel */

.panel {
    position: relative;
    background-color: var(--unBlue5);
}

.svg-panel {
    width: 100%;
    height: auto;
}

/* Map styling */

.globe {
    fill: var(--unBlue4);
    stroke: none;
    stroke-width: 0px;
}

.graticule {
    fill: none;
    stroke: var(--unBlue5);
    stroke-width: .5px;
}

.border {
    fill: var(--gray5);
    stroke: var(--unBlue4);
    stroke-width: 1px;
}

.border.disputed {
    fill: none;
    stroke-linejoin: round;
    stroke-dasharray: 3px;
}

.border.disputed.disputed-black {
    stroke: var(--unBlue4);
}

.border.disputed.disputed-white {
    stroke: var(--gray5);
    stroke-width: 5px;
}

/* Control panel */

.control-panel {
    position: absolute;
    top: .75rem;
    right: .75rem;

    @media (max-width: 500px) {
        top: .25rem;
        right: .2rem;
    }
}

.zoom-panel rect, .spin-button rect {
    fill: white;
    fill-opacity: .8;
    stroke: var(--gray3);
    stroke-width: .5;
    stroke-opacity: .3;
}

.zoom-panel line {
    stroke: var(--gray3);
    stroke-width: 1;
    stroke-opacity: .3;
    stroke-dasharray: 2;
}

#plus, #minus, #reset{
    fill-opacity: .3;
}

.zoom-btn {
    cursor: pointer
}

.spin-button text {
    fill: black;
    fill-opacity: .3;
    text-transform: uppercase;
}

.spin-button:hover text {
    opacity: .8;
    transition: opacity .1s ease-in;
}

/* Spikes */

.spike {
    fill-opacity: 0.75;
    transition: opacity 350ms;
}

.spike.fast-fade {
    transition: opacity 150ms;
}

.spike.hide {
    opacity: 0;
}

/* Legends */

.legend-color {
    position: absolute;
    top: .75rem;
    left: .75rem;
    display: flex;
    flex-direction: column;

    @media (max-width: 500px) {
        top: .4rem;
        left: .5rem;
    }
}

.legend-item {
    display: flex;
    gap: .3rem;
}

.legend-text {
    color: var(--blue1);
    opacity: .9;
}

.legend-key {
    display: flex;
}

.legend-key-fill {
    width: 10px;
    height: 10px;
    margin: auto;
}

.legend-spike {
    position: absolute;
    bottom: .75rem;
    left: .75rem;

    display: grid;
    grid-template-columns: auto auto;
    column-gap: .25rem;

    @media (max-width: 500px) {
        bottom: .4rem;
        left: .5rem;
    }
}

.legend-spike .legend-text {
    justify-self: end;
}

.legend-spike-key {
    display: flex;
    align-items: center;
}

/* Disclaimers */

.disclaimers p {
    color: var(--gray1);
    opacity: .75;
    padding: .1rem .5rem;
    text-wrap: pretty;
    font-size: 0.4rem;
    font-size: clamp(0.4rem, 0.3375rem + 0.52vw, 0.65rem);
}