html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
        font-family:
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Roboto,
            Helvetica,
            Arial,
            "Helvetica Neue",
            sans-serif;
        background: #001;
        color: white;
    }

    body.has-map {
        height: 100vh;
        overflow: hidden;
    }

    #info p {
        padding-bottom: 1rem;
    }

    #map {
        height: calc(100vh - 56px - 73px - 56px);
        /* entire height minus top navbar minus hero minus bottom navbar */
        width: 100vw;
        z-index: 10;
    }
    @media (max-width: 600px) and (orientation: portrait) {
        #map {
            height: calc(100svh - 56px - 98px - 56px);
            /* entire height minus top navbar minus two-line hero minus bottom navbar */
        }
    }

    .hero {
        padding-top: 56px;
        /* account for fixed top nav */
    }

    .muted {
        opacity: .9;
        font-weight: 600;
        display: none;
    }

    #snow {
        position: fixed;
        inset: 0;
        z-index: 1000;
        pointer-events: none;
    }