@media (min-width: 0px) and (max-width: 539px) {
    .controls {
        padding: 12px 0 0 0;
        display: block;
        grid-template-rows: none;
        grid-template-columns: none;
    }

    .left {
        width: 100vw;
        display: flex;
        text-align: center;
        justify-content: center;
    }

    .center {
        width: 100vw;
        display: inline-block;
        text-align: center;
    }

    .right {
        display: none;
    }

    #control-box {
        height: 120px;
    }

    #track-image {
        display: none;
    }

    #time {
        width: 100vw;
        margin: 10px 0;
        display: inline-block;
        text-align: center;
        font-size: 1.2rem;
    }
}

@media (min-width: 540px) and (max-width: 767px) {
    .controls {
        padding: 12px 0 0 0;
        display: block;
        grid-template-rows: none;
        grid-template-columns: none;
    }

    .left {
        width: 100vw;
        display: flex;
        text-align: center;
        justify-content: center;
    }

    .center {
        width: 100vw;
        display: inline-block;
        text-align: center;
    }

    .right {
        display: none;
    }

    #control-box {
        height: 120px;
    }

    #track-image {
        display: none;
    }

    #time {
        width: 100vw;
        margin: 10px 0;
        display: inline-block;
        text-align: center;
        font-size: 1.2rem;
    }
}

@media (min-width: 768px) and (max-width: 911px) {
    .controls {
        padding: 12px 0 0 0;
        display: block;
        grid-template-rows: none;
        grid-template-columns: none;
    }

    .left {
        width: 100vw;
        display: flex;
        text-align: center;
        justify-content: center;
    }

    .center {
        width: 100vw;
        display: inline-block;
        text-align: center;
    }

    .right {
        display: none;
    }

    #control-box {
        height: 120px;
    }

    #track-image {
        display: none;
    }

    #time {
        width: 100vw;
        margin: 10px 0;
        display: inline-block;
        text-align: center;
        font-size: 1.2rem;
    }
}

@media (min-width: 912px) and (max-width: 1023px) {
    .controls {
        padding: 12px 0 0 0;
        display: block;
        grid-template-rows: none;
        grid-template-columns: none;
    }

    .left {
        width: 100vw;
        display: flex;
        text-align: center;
        justify-content: center;
    }

    .center {
        width: 100vw;
        display: inline-block;
        text-align: center;
    }

    .right {
        display: none;
    }

    #control-box {
        height: 120px;
    }

    #track-image {
        display: none;
    }

    #time {
        width: 100vw;
        margin: 10px 0;
        display: inline-block;
        text-align: center;
        font-size: 1.2rem;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .controls {
        font-size: 1.3rem;
    }
}

@media (min-width: 1280px) and (max-width: 1500px) {}