/*But :  Fichier avec tous les styles du site internet
Auteur : Prin Jérémy
Date :   16.06.2021 / V1.0*/
html, body, pre, code, kbd, samp {
    font-family: "Press Start 2P",serif;
}

.imageAPOD {
    max-width: 100%;
    min-width: 150px;
}

#container {
    padding-top: 150px;
    margin-left: 10%;
    margin-right: 10%;
}

.nes-icon.research::before {
    width: 1px;
    height: 1px;
    color: #f22426;
    box-shadow: 4px 1px 0 #020103, 5px 1px 0 #020103, 6px 1px 0 #020103, 7px 1px 0 #020103, 3px 2px 0 #020103, 4px 2px 0 #7DE7DC, 5px 2px 0 #7DE7DC, 6px 2px 0 #7DE7DC, 7px 2px 0 #7DE7DC, 8px 2px 0 #020103, 2px 3px 0 #020103, 3px 3px 0 #7DE7DC, 4px 3px 0 #7DE7DC, 5px 3px 0 #7DE7DC, 6px 3px 0 #FFFFFF, 7px 3px 0 #7DE7DC, 8px 3px 0 #7DE7DC, 9px 3px 0 #020103, 1px 4px 0 #020103, 2px 4px 0 #7DE7DC, 3px 4px 0 #7DE7DC, 4px 4px 0 #7DE7DC, 5px 4px 0 #7DE7DC, 6px 4px 0 #7DE7DC, 7px 4px 0 #FFFFFF, 8px 4px 0 #7DE7DC, 9px 4px 0 #7DE7DC, 10px 4px 0 #020103, 1px 5px 0 #020103, 2px 5px 0 #7DE7DC, 3px 5px 0 #7DE7DC, 4px 5px 0 #7DE7DC, 5px 5px 0 #7DE7DC, 6px 5px 0 #7DE7DC, 7px 5px 0 #7DE7DC, 8px 5px 0 #7DE7DC, 9px 5px 0 #7DE7DC, 10px 5px 0 #020103, 1px 6px 0 #020103, 2px 6px 0 #7DE7DC, 3px 6px 0 #7DE7DC, 4px 6px 0 #7DE7DC, 5px 6px 0 #7DE7DC, 6px 6px 0 #7DE7DC, 7px 6px 0 #7DE7DC, 8px 6px 0 #7DE7DC, 9px 6px 0 #7DE7DC, 10px 6px 0 #020103, 1px 7px 0 #020103, 2px 7px 0 #7DE7DC, 3px 7px 0 #7DE7DC, 4px 7px 0 #7DE7DC, 5px 7px 0 #7DE7DC, 6px 7px 0 #7DE7DC, 7px 7px 0 #7DE7DC, 8px 7px 0 #7DE7DC, 9px 7px 0 #7DE7DC, 10px 7px 0 #020103, 2px 8px 0 #020103, 3px 8px 0 #7DE7DC, 4px 8px 0 #7DE7DC, 5px 8px 0 #7DE7DC, 6px 8px 0 #7DE7DC, 7px 8px 0 #7DE7DC, 8px 8px 0 #7DE7DC, 9px 8px 0 #020103, 3px 9px 0 #020103, 4px 9px 0 #7DE7DC, 5px 9px 0 #7DE7DC, 6px 9px 0 #7DE7DC, 7px 9px 0 #7DE7DC, 8px 9px 0 #020103, 9px 9px 0 #020103, 4px 10px 0 #020103, 5px 10px 0 #020103, 6px 10px 0 #020103, 7px 10px 0 #020103, 10px 10px 0 #020103, 11px 10px 0 #020103, 10px 11px 0 #020103, 11px 11px 0 #020103, 12px 11px 0 #020103, 11px 12px 0 #020103, 12px 12px 0 #020103, 13px 12px 0 #020103, 12px 13px 0 #020103, 13px 13px 0 #020103, 14px 13px 0 #020103, 13px 14px 0 #020103, 14px 14px 0 #020103, 15px 14px 0 #020103, 14px 15px 0 #020103, 15px 15px 0 #020103;
}

.nes-field {
    padding-bottom: 20px;

}

#APODdatePickerEntry {
    max-width: 30%;
    padding-right: 10px;
}

#APODdateButtonEntry {
    margin-left: 5%;
    margin-right: 30%;
}
.nes-field.is-inline label {
    text-align: left;
}

.nav-brand {
    top: 0;
    overflow: hidden;
    position: fixed;
    background-color: #333;
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    width: 100%;
    z-index: 8;
}

#mapid {
    height: 680px;
    z-index: 7;
}

.filter-nasa {
    /*bleu*/
    filter: brightness(0) saturate(100%) invert(43%) sepia(74%) saturate(2045%) hue-rotate(206deg) brightness(108%) contrast(105%);
}

.filter-esa {
    /*bleu clair*/
    filter: brightness(0) saturate(100%) invert(72%) sepia(6%) saturate(7477%) hue-rotate(132deg) brightness(108%) contrast(105%);
}

.filter-cnsa {
    /*rouge*/
    filter: brightness(0) saturate(100%) invert(17%) sepia(98%) saturate(6790%) hue-rotate(9deg) brightness(99%) contrast(123%);
}

.filter-jaxa {
    /*orange*/
    filter: brightness(0) saturate(100%) invert(58%) sepia(100%) saturate(612%) hue-rotate(359deg) brightness(101%) contrast(108%);
}

.filter-roscosmos {
    /*rose*/
    filter: brightness(0) saturate(100%) invert(30%) sepia(100%) saturate(6703%) hue-rotate(297deg) brightness(120%) contrast(122%);
}

.filter-autres {
    /*jaune*/
    filter: brightness(0) saturate(100%) invert(92%) sepia(24%) saturate(1692%) hue-rotate(358deg) brightness(111%) contrast(104%);
}
.filter-david {
    animation: rgbanimation 3s infinite;
}

.responsive-mars-map {
    min-height: 600px;
    width: 100%;
    height: 100%;
}

@keyframes rgbanimation {
    0% {
        filter: brightness(0) saturate(100%) invert(43%) sepia(74%) saturate(2045%) hue-rotate(206deg) brightness(108%) contrast(105%);
    }
    20% {
        filter: brightness(0) saturate(100%) invert(72%) sepia(6%) saturate(7477%) hue-rotate(132deg) brightness(108%) contrast(105%);
    }
    40% {
        filter: brightness(0) saturate(100%) invert(17%) sepia(98%) saturate(6790%) hue-rotate(9deg) brightness(99%) contrast(123%);
    }
    60% {
        filter: brightness(0) saturate(100%) invert(58%) sepia(100%) saturate(612%) hue-rotate(359deg) brightness(101%) contrast(108%);
    }
    80% {
        filter: brightness(0) saturate(100%) invert(30%) sepia(100%) saturate(6703%) hue-rotate(297deg) brightness(120%) contrast(122%);
    }
    100% {
        filter: brightness(0) saturate(100%) invert(92%) sepia(24%) saturate(1692%) hue-rotate(358deg) brightness(111%) contrast(104%);
    }

}