@CHARSET "UTF-8";

html, body, #map {
    height: 100%; width: 100%; padding: 0; margin: 0;
}

#titleContainer {
    position: absolute;
    top: 40%;
    left: 50%;
    z-index: 1000;
    pointer-events: none;
}

#mapTitle {
    position: relative;
    left: -50%;
    padding: 0.5em 1em;
    border-radius: 8px;
    background: rgba(15, 74, 37, 0.82);
    backdrop-filter: blur(4px);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

#mapTitle:before {
    content: "TransitClock";
}

#routesContainer {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1000;
}

#select2-drop, #routesDiv {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.9rem;
}

.vehicle   { font-size: 0.75rem; font-weight: normal; }
.prediction { font-size: 1.1rem; font-weight: 700; }

sup {
    vertical-align: super;
    font-size: 0.6em;
}