html, body, canvas {
    height:100%;
    margin:0;
    padding:0;
    overflow: hidden;
}

.all-screen {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: table;
    padding: 0;
    width: 100%;
    height: 100%;
}

.center {
    text-align: center;
}

.digital-clock {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-family: Calibri, serif;
}

#digital-text {
    font-size: 310px;
}

#city-text {
    margin-top: -50px;
    font-size: 55px;
}

@media (max-width: 1150px) {
    #digital-text {
        font-size: 210px;
        padding-bottom: 10px;
    }
}

@media (max-width: 775px) {
    #digital-text {
        font-size: 150px;
        padding-bottom: 35px;
    }
}

@media (max-width: 550px) {
    #digital-text {
        font-size: 75px;
        padding-bottom: 45px;
    }

    #city-text {
        font-size: 25px;
    }
}

@media (max-width: 265px) {
    #digital-text {
        font-size: 29px;
    }

    #city-text {
        font-size: 19px;
    }
}

@media (max-height: 300px) {
    #digital-text {
        font-size: 65px;
        padding-bottom: 35px;
    }

    #city-text {
        font-size: 25px;
    }
}

@media (max-width: 230px), (max-height: 80px) {
    #digital-text {
        font-size: 29px;
        padding-bottom: 41px;
    }

    #city-text {
        font-size: 19px;
    }
}