@import url("https://fonts.googleapis.com/css?family=Aleo");

:root {
    font-family: "Aleo", sans-serif;
}

html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: rgb(119, 13, 13);
    background: radial-gradient(circle,
            rgba(119, 13, 13, 0.92) 64%,
            rgba(0, 0, 0, 0.6) 100%);
}

canvas {
    width: 100%;
    height: 100%;
}

/* Thanks Traversy Media for this text background animation tut:
https://www.youtube.com/watch?v=lX5LZTWc4f8&t
*/
.label {
    font-size: 2.2rem;
    background: url("https://res.cloudinary.com/nikita-rudenko/image/upload/v1544906837/stripe_c982eebe592d6c30f2034f5ce80b1fc6.png");
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: moveBg 30s linear infinite;
}

@keyframes moveBg {
    0% {
        background-position: 0% 30%;
    }

    100% {
        background-position: 1000% 500%;
    }
}

.middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    user-select: none;
}

.time {
    gap: 50px;
    color: #d99c3b;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
}

.time span {
    padding: 0 14px;
    font-size: 0.8rem;
}

.time span div {
    font-size: 8rem;
}

@media (max-width: 740px) {
    .label {
        font-size: 1.7rem;
    }

    .time span {
        padding: 0 16px;
        font-size: 0.6rem;
    }

    .time span div {
        font-size: 2rem;
    }
}