body {
    color: #f0f0f0;
    background-color: #333;
}

h1, h1 a  {
    color: #dfaa37; /* C4 Yellow */
}

#map {
    border: 1px solid #202020;
    background-color: #4d4d4d;
    max-width: 1440px;
    max-height: 50vh;
    aspect-ratio: 2 / 1;
    box-shadow: 0px 6px 12px #000c;
}

#mapnote {
    background-color: #ccc;
    color: #333;
    border-color: #202020;
    padding: 0.25em 0.5em;
    position: relative;
    top: -1px;
    box-shadow: 0px 6px 12px #000c;
}

#mapnote:empty {
    display: none;
}

.result {
    background-color: #202020;
    border-color: #4d4d4d;
}

.result:focus {
    background-color: #202020;
    border-color: #dfaa37;
    outline-color: #dfaa37;
}

.result a {
    color: #dfaa37;
}

.note {
    background-color: #333;
    font-size: smaller;
}

.btn {
  box-shadow: 0 3px 6px -1px rgba(0,0,0,0.3);
}

.btn.primary {
    color: #220;
    background-color: #dfaa37;
}

.btn.primary:hover,.btn.primary:focus {
    background-color: #f5c251;
}

.btn.grn {
    color: #020;
    background-color: #9f6;
}

.btn.grn:hover ,.btn.grn:focus {
    background-color: #3f0;
}

.btn.red {
    color: #200;
    background-color: #ec6d5f;
}

.btn.red:hover, .btn.red:focus {
    background-color: #ff7667;
}

@keyframes blinker {
    0% { opacity: 1; }
    40% { opacity: 1; }
    90% { opacity: 0; }
    100% { opacity: 1; }
}

#mapgrid {
    outline: 2px solid #dfaa37;
    background: #dfaa3780;
    animation: blinker 1s infinite;
}