.circle {
    -webkit-border-radius: 50%;
    margin: auto;
}

.pointer {
    cursor: pointer;
}

/* smartphones, iPhone, portrait 480x320 phones */
@media (min-width:320px)  {
    .circle-30 {
        width: 75px;
        height: 75px;
        padding-top: 1.5rem;
        font-size: 1.5rem;
        line-height: 1.5rem;
    }

    h1, #msg .txt {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    #finished {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
}

/* big landscape tablets, laptops, and desktops */
@media (min-width:1025px) {
    .circle-30 {
        width: 100px;
        height: 100px;
        padding-top: 1.5rem;
        font-size: 3rem;
        line-height: 1;
    }

    h1, #msg .txt {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    #finished {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
}

/* hi-res laptops and desktops */
@media (min-width:1281px) {
    .circle-30 {
        width: 100px;
        height: 100px;
        padding-top: 1.5rem;
        font-size: 3rem;
        line-height: 1;
    }

    h1, #msg .txt {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    #finished {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
}