* {
    margin:0;
    padding:0;
}

body {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
    font-family:sans-serif;
}

#map {
    position:absolute;
    width:100%;
    height:100%;
}

#status-val {
    position: absolute;
    background-color: rgba(128,0,0, 0.5);
    color: #fff;
    padding:1rem;
    border-radius:3rem;
    text-align:center;
    z-index:1000;
}

#status-val.error {
    background-color: rgba(100,100,100,0.5);
    color: #C00;
}

#status-val.info {
    background-color: rgba(0,100,0,0.5);
    color: #fff;
}

.error#status-val::after {
    display:block;
    content: 'Erreur de chargement';
    background-color:#800;
    color:#fff;
    font-size: 2vw;
}

#status-val h4 {
    font-size: 3vw;
    line-height:130%;
    font-weight: normal;
}

#status-val h4 em {
    color:#F00;
    font-weight: bold;
}

#status-val output {
    text-align: center;
    font-size: 4vw;
}

#status-val progress {
    width: 90%;
    font-size: 1vw;
}