html,
body {
    margin: 0;
    overflow: hidden;
}

aod-area {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
    animation: blinkbg 10s ease-in-out infinite;
}

@keyframes blinkbg {
    0% {
        background: #000;
    }

    50% {
        background: #000000ef;
    }

    100% {
        background: #000;
    }
}

clock-text {
    position: absolute;
    font-family: 'ClockFonts';
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: transparent;
    text-align: center;
    font-size: 275px;
    white-space: nowrap;
    letter-spacing: -8px;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    opacity: 0.75;
    background-image: url(./res/aod_blur.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(0px 0px 64px #db544010);
    -webkit-filter: drop-shadow(0px 0px 64px #db544010);
}

clock-hh {
    background-image: url(./res/aod_blur.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-clip: text;
    -webkit-background-clip: text;
}

clock-ss {
    margin-left: -100px;
    margin-right: -100px;
}

clock-ss {
    opacity: 1.0;
    transition: 0.2s ease-in-out;
}

.blink {
    opacity: 0.0;
}