body {
    background-color: rgb(0,0,0);
    margin: 0px;
    color: white;
}

.map {
    position: relative;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    image-rendering: pixelated;
    /* Constant determined by the aspect ratio of the map images */
    aspect-ratio: 4930 / 2414;
    max-width: 100rem;
    max-height: 100rem;
}

.map.ntsc {
    background-image: url("images/map-ntsc.png");
}

.map.ntsc.flip{
    background-image: url("images/map-ntsc-flip.png");
}

.map.pal{
    background-image: url("images/map-pal.png");
}

.map.pal.flip {
    background-image: url("images/map-pal-flip.png");
}

.bottom-container {
    display: grid;
    grid-template-areas:
        "instructions controls";
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    grid-auto-columns: auto;
    max-width: 100rem;
    max-height: 100rem;
}

.instructions {
    grid-area: instructions;
    text-align: center;
    align-content: center;
    font-size: 1.5rem;
    color: grey;
}

.controls {
    grid-area: controls;
    position: relative;
}

.control-button {
    width: 4rem;
    height: 4rem;
    background-size: 100% 100%;
    background-color: rgb(255, 255, 255);
    position: absolute;
    cursor: pointer;
}

.control-button.save {
    right: 7rem;
    background-image: url("images/save.png");
}

.control-button.save.highlight {
    background-image: url("images/highlighted.png"), url("images/save.png");
}

.control-button.load {
    right: 2rem;
    background-image: url("images/load.png");
}

.control-button.load.highlight {
    background-image: url("images/highlighted.png"), url("images/load.png");
}

.control-button.version {
    left: 2rem;
}

.control-button.version.ntsc {
    background-image: url("images/ntsc.png");
}

.control-button.version.ntsc.highlight {
    background-image: url("images/highlighted.png"), url("images/ntsc.png");
}

.control-button.version.pal {
    background-image: url("images/pal.png");
}

.control-button.version.pal.highlight {
    background-image: url("images/highlighted.png"), url("images/pal.png");
}

.control-button.flipPanels {
    left: 7rem;
    background-image: url("images/flip.png");
}

.control-button.flipPanels.highlight {
    background-image: url("images/highlighted.png"), url("images/flip.png");
}

.control-button.lockSaved {
    left: 12rem;
}

.control-button.lockSaved.locked {
    background-image: url("images/lock.png");
}

.control-button.lockSaved.locked.highlight {
    background-image: url("images/highlighted.png"), url("images/lock.png");
}

.control-button.lockSaved.unlocked {
    background-image: url("images/unlock.png");
}

.control-button.lockSaved.unlocked.highlight {
    background-image: url("images/highlighted.png"), url("images/unlock.png");
}

.check {
    width: 1.8rem;
    height: 1.8rem;
    background-size: 100% 100%;
    background-image: url("images/outline.png");
    position: absolute;
    /* center element on position instead of using top-left corner */
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.check.highlight {
    background-image: url("images/highlighted.png"), url("images/outline.png");
}

.available{
    background-color: rgb(127,127,127);
}

.collected{
    background-color: rgb(210, 190, 30);
}

.possible{
    background-color: rgb(255, 0, 0);
}

.saved{ 
    background-color: rgb(0, 255, 0);
}

.check .tooltip {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 170%;
    left: 50%;
    margin-left: -60px;
}

.check .tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.check .tooltip:hover {
    display: none;
}

.check:hover .tooltip {
    visibility: visible
}

.control-button .tooltip {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 170%;
    left: 50%;
    margin-left: -60px;
}

.control-button .tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.control-button .tooltip:hover {
    display: none;
}

.control-button:hover .tooltip {
    visibility: visible
}