html,body {
    height: 100%;
    display:flex;
    align-items:center;
}
body {
    background: #0f3854;
    background: radial-gradient(ellipse at center,  #0a2e38  0%, #000000 70%);
    background-size: 100%;
    margin: auto;
}
p {
    margin: 0;
    padding: 0;
}
a {
    color: #ffffff;
}
#clock {
    font-family: 'Share Tech Mono', monospace;
    color: #daf6ff;
    text-shadow: 0 0 20px rgba(10, 175, 230, 1),  0 0 20px rgba(10, 175, 230, 0);
    text-align: center;
        .time {
            letter-spacing: 0.05em;
            font-size: 3rem;
            padding: 5px 0;
        }
        .date {
            letter-spacing: 0.1em;
            font-size: 1.7em;
        }
        .text {
            letter-spacing: 0.1em;
            font-size: 1.3em;
            padding: 20px 0 0;
        }
}

@media (min-width: 460px) {
    #clock {
        .time {
            letter-spacing: 0.05em;
            font-size: 4rem;
            padding: 5px 0;
        }
        .date {
            letter-spacing: 0.1em;
            font-size: 2em;
        }
        .text {
            letter-spacing: 0.1em;
            font-size: 1.5em;
            padding: 20px 0 0;
        }
    }
}

@media (min-width: 576px) {
    #clock {
        .time {
            letter-spacing: 0.05em;
            font-size: 5rem;
            padding: 5px 0;
        }
        .date {
            letter-spacing: 0.1em;
            font-size: 2.5em;
        }
        .text {
            letter-spacing: 0.1em;
            font-size: 2em;
            padding: 20px 0 0;
        }
    }
}

@media (min-width: 768px) {
    #clock {
        .time {
            letter-spacing: 0.05em;
            font-size: 6em;
            padding: 5px 0;
        }
        .date {
            letter-spacing: 0.1em;
            font-size: 3em;
        }
        .text {
            letter-spacing: 0.1em;
            font-size: 2em;
            padding: 20px 0 0;
        }
    }
}

@media (min-width: 992px) {
    #clock {
        .time {
            letter-spacing: 0.05em;
            font-size: 7.5em;
            padding: 5px 0;
        }
        .date {
            letter-spacing: 0.1em;
            font-size: 3em;
        }
        .text {
            letter-spacing: 0.1em;
            font-size: 2em;
            padding: 20px 0 0;
        }
    }
}

@media (min-width: 1200px) {
    #clock {
        .time {
            letter-spacing: 0.05em;
            font-size: 9em;
            padding: 5px 0;
        }
        .date {
            letter-spacing: 0.1em;
            font-size: 3em;
        }
        .text {
            letter-spacing: 0.1em;
            font-size: 2em;
            padding: 20px 0 0;
        }
    }
}

@media (min-width: 1400px) {
    #clock {
        .time {
            letter-spacing: 0.05em;
            font-size: 12em;
            padding: 5px 0;
        }
        .date {
            letter-spacing: 0.1em;
            font-size: 3em;
        }
        .text {
            letter-spacing: 0.1em;
            font-size: 2em;
            padding: 20px 0 0;
        }
    }
}