/********** Reset **********/

* {border:0px; margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; box-sizing:border-box; font-family:'Yantramanav',sans-serif; transition-duration:0.2s;}
html, body {height: 100%;}

/********** Animations **********/

/********** Fonts **********/

/********** Style **********/

*::selection {background: #ff0080;}

body {
    overflow: hidden;
}


header {
    width: 100%;
    height: 40px;
    background: #101010;
    border-bottom: 1px solid #ffd480;
}
header h1 {text-align:center; font-size:1em; font-weight:200; color: black;}

main {
    position: relative;
    min-height: calc(100vh - 80px);
}

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

.mapboxgl-ctrl-attrib {
    background: #00000080 !important;
}

.mapboxgl-ctrl-attrib a {
    color: #ffd48080 !important;
}

#loading_screen {
    display: flex;
    align-items:center; flex-direction:column; justify-content:space-around;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background: radial-gradient(#101010, #000);
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: #101010;
    border-top: 1px solid #ffd480;
}

@keyframes square_fade
{
    55% {background:rgba(255,255,255,0.0);}
    70% {background:#ff0080;}
    85% {background:#000;}
    100% {background:rgba(255,255,255,0.0);}
}

#loading_squares
{
    display:flex;
    flex-wrap:wrap;
    width:40px;
    height:40px;
}

#loading_squares > div
{
    width:33.33%;
    height:33.33%; 
    animation-name:square_fade;
    animation-duration:1.5s;
	animation-iteration-count:infinite; 
	animation-timing-function:ease-in;
}

#loading_squares > div:nth-child(1){animation-delay:-1.0s}
#loading_squares > div:nth-child(2){animation-delay:-0.9s}
#loading_squares > div:nth-child(3){animation-delay:-0.8s}
#loading_squares > div:nth-child(4){animation-delay:-0.9s}
#loading_squares > div:nth-child(5){animation-delay:-0.8s}
#loading_squares > div:nth-child(6){animation-delay:-0.7s}
#loading_squares > div:nth-child(7){animation-delay:-0.8s}
#loading_squares > div:nth-child(8){animation-delay:-0.7s}
#loading_squares > div:nth-child(9){animation-delay:-0.6s}