@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Source Sans Pro", sans-serif;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image: radial-gradient(#666666, #000000);
    color: #ffffffdd;
    line-height: 3em;
}

.clockbox {
    padding: 3em 1.5em;
    background-image: linear-gradient(45deg, #339900, #ee9900);
    border-radius: 20% 80% 80% 20%;
    border: 2px solid #333333;
    animation: bgblob 4s infinite 1s;
}

.clock {
    font-size: 4.5em;
}

.date {
    font-size: 2em;
}

.clock .date {
    text-shadow: 0 5px 5px #000000aa;
}

@keyframes bgblob {
    0% {
        border-radius: 20% 80% 80% 20%;
    }
    25% {
        border-radius: 20% 20% 80% 80%;
        background-image: linear-gradient(135deg, #339900, #ee9900);
    }
    50% {
        border-radius: 80% 20% 20% 80%;
        background-image: linear-gradient(225deg, #339900, #ee9900);
    }
    75% {
        border-radius: 80% 80% 20% 20%;
        background-image: linear-gradient(315deg, #339900, #ee9900);
    }
    100% {
        border-radius: 20% 80% 80% 20%;
        background-image: linear-gradient(45deg, #339900, #ee9900);
    }
}