.overlay {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1051;
    position: fixed;
    opacity: 0.5;
    background: #222;
}

.overlay__inner {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.overlay__content {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.spinner {
    width: 75px;
    height: 75px;
    display: inline-block;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.05);
    border-top-color: #fff;
    animation: spin 1s infinite linear;
    border-radius: 100%;
    border-style: solid;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.time-loader {
    position: absolute;
    top: 45%;
    left: 48%;
}

.time-1 {
    width: 60px;
    height: 60px;
    border: 4px solid;
    border-radius: 50%;
    display: flex;
    background:
        radial-gradient(circle 5px, currentColor 95%, #0000),
        linear-gradient(currentColor 50%, #0000 0) center/4px 60% no-repeat;
    animation: t1 2s infinite linear;
}

.time-1:before {
    content: "";
    flex: 1;
    background: linear-gradient(currentColor 50%, #0000 0) center/4px 80% no-repeat;
    animation: inherit;
}

@keyframes t1 {
    100% {
        transform: rotate(1turn)
    }
}

.time-2 {
    width: 40px;
    height: 40px;
    border: 2px solid;
    position: relative;
    background:
        radial-gradient(circle 3px, currentColor 95%, #0000),
        linear-gradient(currentColor 50%, #0000 0) center/3px 80% no-repeat,
        linear-gradient(90deg, currentColor 50%, #0000 0) center/60% 3px no-repeat;
}

.time-2:before {
    content: "";
    position: absolute;
    height: 50px;
    inset: 100% 10% auto;
    background:
        radial-gradient(circle closest-side at 50% calc(100% - 10px), currentColor 94%, #0000),
        linear-gradient(currentColor 0 0) top/3px 80% no-repeat;
    transform-origin: top;
    animation: t2 2s infinite cubic-bezier(0.5, 200, 0.5, -200);
}

@keyframes t2 {
    100% {
        transform: rotate(0.4deg)
    }
}

.time-3 {
    display: flex;
    border: 2px solid;
    background:
        linear-gradient(currentColor 0 0) 50% calc(50% - 5px)/5px 5px,
        linear-gradient(currentColor 0 0) 50% calc(50% + 5px)/5px 5px;
    background-repeat: no-repeat;
}

.time-3::before,
.time-3::after {
    content: "12 00 23 40 31 45 60 17 45 32 29 42 50 08 14 07 46 11 03 55";
    font-size: 30px;
    font-family: monospace;
    font-weight: bold;
    line-height: 1em;
    height: 1em;
    width: 2ch;
    color: #0000;
    text-shadow: 0 0 0 #000;
    overflow: hidden;
    margin: 5px 10px;
    animation: t3 1s steps(20) infinite;
}

.time-3::before {
    animation-duration: 1.5s;
}

@keyframes t3 {
    100% {
        text-shadow: 0 -20em 0 #000
    }
}

.time-4 {
    display: flex;
    border: 10px solid;
    border-radius: 5px;
}

.time-4::before,
.time-4::after {
    content: "0 1 2 3 4 5 6 7 8 9 0";
    font-size: 30px;
    font-family: monospace;
    font-weight: bold;
    line-height: 1em;
    height: 1em;
    width: 1.2ch;
    text-align: center;
    outline: 1px solid #000;
    color: #0000;
    text-shadow: 0 0 0 #000;
    overflow: hidden;
    animation: t4 2s infinite linear;
}

.time-4::before {
    animation-duration: 4s;
}

@keyframes t4 {
    100% {
        text-shadow: 0 var(--t, -10em) 0 #000
    }
}


.time-5 {
    --c1: #673b14;
    --c2: #f8b13b;
    width: 40px;
    height: 80px;
    border-top: 4px solid var(--c1);
    border-bottom: 4px solid var(--c1);
    background: linear-gradient(90deg, var(--c1) 2px, var(--c2) 0 5px, var(--c1) 0) center/7px 8px no-repeat;
    display: grid;
    overflow: hidden;
    animation: t5-0 2s infinite linear;
}

.time-5::before,
.time-5::after {
    content: "";
    grid-area: 1/1;
    width: 75%;
    height: calc(50% - 4px);
    margin: 0 auto;
    border: 2px solid var(--c1);
    border-top: 0;
    border-radius: 0 0 40% 40%;
    -webkit-mask:
        linear-gradient(#000 0 0) bottom/4px 2px no-repeat,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    background:
        linear-gradient(var(--d, 0deg), var(--c2) 50%, #0000 0) bottom /100% 205%,
        linear-gradient(var(--c2) 0 0) center/0 100%;
    background-repeat: no-repeat;
    animation: inherit;
    animation-name: t5-1;
}

.time-5::after {
    transform-origin: 50% calc(100% + 2px);
    transform: scaleY(-1);
    --s: 3px;
    --d: 180deg;
}

@keyframes t5-0 {
    80% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(0.5turn)
    }
}

@keyframes t5-1 {

    10%,
    70% {
        background-size: 100% 205%, var(--s, 0) 100%
    }

    70%,
    100% {
        background-position: top, center
    }
}

.time-6 {
    width: 60px;
    height: 60px;
    border: 10px solid;
    border-radius: 50%;
    animation: t6 2s infinite linear;
    position: relative;
}

.time-6:before {
    content: "";
    position: absolute;
    height: 20px;
    inset: auto calc(50% - 10px) 100%;
    border-radius: 5px 5px 0 0;
    background:
        linear-gradient(currentColor 0 0) top/100% 30%,
        linear-gradient(currentColor 0 0) top/50% 100%;
    background-repeat: no-repeat;
}

.time-6:after {
    content: "";
    position: absolute;
    inset: -8px -10px auto;
    height: 15px;
    background:
        radial-gradient(farthest-side, currentColor 94%, #0000) left,
        radial-gradient(farthest-side, currentColor 94%, #0000) right;
    background-size: 15px 15px;
    background-repeat: no-repeat;
}

@keyframes t6 {
    0% {
        background: conic-gradient(#77a4bd 0, #0000 0)
    }

    12.5% {
        background: conic-gradient(#77a4bd 45deg, #0000 46deg)
    }

    25% {
        background: conic-gradient(#77a4bd 90deg, #0000 91deg)
    }

    37.5% {
        background: conic-gradient(#77a4bd 135deg, #0000 136deg)
    }

    50% {
        background: conic-gradient(#77a4bd 180deg, #0000 181deg)
    }

    62.5% {
        background: conic-gradient(#77a4bd 225deg, #0000 226deg)
    }

    75% {
        background: conic-gradient(#77a4bd 270deg, #0000 271deg)
    }

    87.5% {
        background: conic-gradient(#77a4bd 315deg, #0000 316deg)
    }

    100% {
        background: conic-gradient(#77a4bd 360deg, #0000 360deg)
    }
}


.time-7 {
    width: 60px;
    height: 60px;
    border: 3px solid;
    border-radius: 50%;
    display: grid;
    background:
        radial-gradient(circle 3px, currentColor 95%, #0000),
        linear-gradient(currentColor 50%, #0000 0) center/2px 60% no-repeat;
}

.time-7:before,
.time-7:after {
    content: "";
    grid-area: 1/1;
}

.time-7:before {
    background: repeating-conic-gradient(from -2deg, #000 0 4deg, #0000 0 90deg);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 6px), #000 0);
}

.time-7:after {
    background: linear-gradient(currentColor 50%, #0000 0) center/2px 80% no-repeat;
    animation: t7 1s infinite;
}

@keyframes t7 {

    0%,
    100% {
        transform: rotate(30deg)
    }

    90% {
        transform: rotate(42deg)
    }

    95% {
        transform: rotate(15deg)
    }
}

.time-8 {
    background: #000;
    padding: 0 8px;
    font-size: 30px;
    font-family: monospace;
    color: #fff;
    font-weight: bold;
    border-radius: 8px;
    position: relative;
}

.time-8::before {
    content: "08:00";
    white-space: pre;
    animation: t8 .5s infinite;
}

.time-8::after {
    content: "";
    position: absolute;
    inset: auto auto 100% 10px;
    height: 5px;
    width: 40%;
    background: linear-gradient(90deg, red 40%, #0000 0 60%, #444 0);
}

@keyframes t8 {
    100% {
        content: "  :  "
    }
}

.time-9 {
    width: 50px;
    height: 50px;
    color: #ce0800;
    border: 7px solid;
    border-radius: 50%;
    position: relative;
    background:
        radial-gradient(circle 3px, #000 95%, #0000),
        linear-gradient(180deg, #000 50%, #0000 0) center/3px 70%,
        linear-gradient(90deg, #000 50%, #0000 0) center/50% 3px;
    background-repeat: no-repeat;
    animation: t9 1s infinite;
}

.time-9:before,
.time-9:after {
    content: "";
    position: absolute;
    border-radius: 20px 20px 0 0;
    inset: -20px calc(50% - 10px);
    transform: rotate(40deg);
    background:
        linear-gradient(currentColor 0 0) top /100% 10px,
        linear-gradient(currentColor 0 0) bottom/3px 10px;
    background-repeat: no-repeat;
}

.time-9:after {
    transform: rotate(-40deg);
}

@keyframes t9 {

    0%,
    70%,
    100% {
        transform: translateY(0) rotate(0)
    }

    75%,
    85%,
    95% {
        transform: translateY(-3px) rotate(10deg)
    }

    80%,
    90% {
        transform: translateY(-3px) rotate(-10deg)
    }
}

.time-10 {
    width: 60px;
    height: 40px;
    position: relative;
}

.time-10::after {
    content: "";
    position: absolute;
    inset: 0;
    --c: ;
    background:
        radial-gradient(farthest-side at bottom, #ffc10a 92%, #0000) top /30px 15px,
        radial-gradient(farthest-side at top left, #0000 92%, #ffc10a) bottom left / 15px 20px,
        radial-gradient(farthest-side at top right, #0000 92%, #ffc10a) bottom right/ 15px 20px,
        linear-gradient(#ffc10a 0 0) bottom/30px 26px;
    background-repeat: no-repeat;
    transform-origin: 50% -3px;
    animation: t10-1 .5s infinite alternate linear;
}

.time-10::before {
    content: "";
    position: absolute;
    inset: -6px calc(50% - 10px) -10px;
    background:
        radial-gradient(farthest-side, #ff9f04 90%, #0000) top /10px 10px,
        radial-gradient(farthest-side, #ff9f04 90%, #0000) bottom/20px 20px;
    background-repeat: no-repeat;
    transform-origin: 50% 3px;
    animation: t10-2 .5s infinite alternate linear;
}

@keyframes t10-1 {
    0% {
        transform: rotate(-30deg)
    }

    100% {
        transform: rotate(30deg)
    }
}

@keyframes t10-2 {
    0% {
        transform: rotate(-20deg)
    }

    100% {
        transform: rotate(20deg)
    }
}