body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}
#homeholder {
    position:absolute;
}
#menuholder {
    position: absolute;
    background-color:#5F9BD5;
    width:100%;
    height:100%;
    z-index:100;
    background-image: url("../img/SplashScreen.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    max-height:100%;
}
#menu {
    position: absolute;
    bottom: 0%;
    width:100%;
    height:10%;
    display: flex;
    justify-content: center;
    
   /* justify-content: space-between; */
    align-items: center;
    flex-direction:column;
}
#menu button {
    margin:0.5em;
    /* align-self: flex-end; */
}

#progressholder {
    position: absolute;
    width:100%;
    height:50%;
    z-index:100;
}
#progress {
    /*height:100%;*/
    width:50%;
    height:50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;
    background-color:red;
}
progress-bar {
    width:50%;
    height:1em;
    
    background-color:green;
}
#ready-overlay {
    display:none;
    position:absolute;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 101;
/*    display: flex;*/
    justify-content: center;
    align-items: center;
    flex-direction:column;
}
audio {
/*    position: absolute;*/
    display: none;
}

.drag-dot {
    position: absolute;
    background-color: #1DA1F2;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0,0,0,0.25);
/*    border: 2px solid #fff;*/
    transform: translate(100px, 100px);
}

.invisible {
    display: none;
}