body {
    margin: 0;
    background: #c31432; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #240b36, #c31432); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #240b36, #c31432); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;

    color: white;
    font-family: Verdana, sans-serif;
    user-select: none;
}

#bpm {
    font-size: 8em;
    font-weight: bold;
    text-shadow: 0 0 1em #333;
    text-stroke: 5px black;
}

@media (min-width: 500px) {
    #bpm {
        font-size: 13em;
        font-weight: bold;
        text-shadow: 0 0 1em #333;
    }
}

#subtitle {
    font-style: italic;
    text-shadow: 0 0 10em #333;
}

#graph {
    z-index: -9999;
    position: absolute;
    top: 0;
    left: 0;
}