body {
    margin:0;
    font-family: 'Poppins', sans-serif;
    background:#0b0b0b;
    color:#fff;
}

/* SPLASH */
#splash {
    position:fixed;
    width:100%;
    height:100%;
    background:#000;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:999;
}

#splash h1 {
    color:#ff3b3b;
    font-size:26px;
}

#splash p {
    opacity:0.6;
    font-size:12px;
}

/* WELCOME */
#welcome {
    position:fixed;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#0b0b0b;
}

/* CARD */
.card {
    background:#141414;
    padding:22px;
    border-radius:14px;
    width:85%;
    max-width:350px;
    text-align:center;
    box-shadow:0 0 25px rgba(0,0,0,0.6);
    animation:fadeIn 0.5s ease;
}

.brand {
    font-size:11px;
    opacity:0.5;
    letter-spacing:1px;
    margin-bottom:5px;
}

.card h2 {
    margin:10px 0;
}

.card p {
    font-size:13px;
    opacity:0.75;
}

/* BUTTON */
button {
    width:100%;
    padding:12px;
    margin-top:10px;
    border:none;
    border-radius:10px;
    background:#ff3b3b;
    color:#fff;
    font-size:14px;
    cursor:pointer;
}

button.secondary {
    background:#1f1f1f;
    border:1px solid #333;
}

/* PRIVACY */
.privacy {
    font-size:11px;
    opacity:0.5;
    margin-top:12px;
}

/* APP */
#app {
    height:100vh;
    display:flex;
    flex-direction:column;
    animation:fadeIn 0.4s ease;
}

/* HEADER */
.header {
    padding:14px;
    text-align:center;
    background:#111;
    border-bottom:1px solid #222;
    font-weight:600;
    letter-spacing:1px;
}

/* MAP */
#map {
    flex:1;
    width:100%;
    height:100%;
}

/* CONTROLS */
.controls {
    display:flex;
    justify-content:space-around;
    padding:10px;
    background:#111;
    border-top:1px solid #222;
}

.controls button {
    width:auto;
    padding:10px 14px;
    font-size:12px;
    background:#1a1a1a;
    border:1px solid #333;
    border-radius:20px;
}

/* ANIMATION */
@keyframes fadeIn {
    from {
        opacity:0;
        transform:translateY(20px);
    }
    to {
        opacity:1;
        transform:translateY(0);
    }
}

/* HIDDEN */
.hidden {
    display:none;
}