nav {
    grid-area: nav;
    padding-left: 2em;
    margin-right: 2em;
    max-height: 100%;

    h1 {
        margin-bottom: 0.5em;
        letter-spacing: 0.05em;
    }

    h2:first-child {
        margin: 0;
    }

    h2 {
        margin-top: 2em;
    }

    hr {
        margin: 1em 0;
        border-color: #444;
    }

    button {
        text-overflow: ellipsis;
        display: block;
        color: #888;
        flex: 1 1 100%;
        padding: 0;
        margin: 0;
        border-width: 0px;
    }

    button.active {
        color: whitesmoke;
    }

    button[disabled], button[disabled]:hover {
        color: #333;
        text-decoration: none;
    }

    button:hover {
        color: whitesmoke;
        text-decoration: underline;
    }

    button:focus, button:active {
        color: whitesmoke;
    }

    .account-info {
        display: flex;
    }

    .account-header {
        letter-spacing: 0.05em;
        flex: 1;
        display: inline;
    }

    .account-info svg {
        margin: 0.5em 0 0 1em;
        height: 1em;
        background-color: black;
        stroke: whitesmoke;
    }

    .ping-path {
        fill: none;
        stroke-width: 4px;
        stroke-dasharray: 121, 242;
        animation: saw 2s infinite linear;

        transition-property: stroke-color;
        transition-duration: 0.25s;
        transition-timing-function: ease;
    }

    .ping-text {
        margin-left: 1em;
        min-width: 3em;
        display: inline-block;
    }

    .play-btn {
        font-size: 150%;
    }
}

@keyframes saw {
    0% {
        stroke-dashoffset: 363;
    }
    100% {
        stroke-dashoffset: 0;
    }
}