:root {
    --timerSize: 4rem;
    --timerFullTime: 7;
    --timerPreTime: 2;
    --timerBorderSize: 10px;
    --timerGreenColor: rgba(102, 255, 0,0.7);
}

.timer_wrapper {
    position: absolute;
    bottom: 3rem;
    right: 3rem;
    width: var(--timerSize);
    height: var(--timerSize);
    z-index: 100;  
    visibility:hidden;
}

.timer_loader {
    position: absolute;
    top: calc(var(--timerBorderSize)*-1);
    left: calc(var(--timerBorderSize)*-1);
    /*background: rgba(255,255,255,0.3);*/
    border-width: var(--timerBorderSize);
    border-style: solid;
    border-color: rgba(102, 255, 0,0.7);
    border-top-color: white;
    border-radius: 50%;
    width: var(--timerSize);
    height: var(--timerSize);
    animation: spin, colors;
    animation-duration: 1s, 5s;
    animation-iteration-count: var(--timerFullTime), 1;
    animation-delay: 0s,calc(var(--timerPreTime) * 1s);
    animation-fill-mode: forwards,forwards;
    animation-timing-function: linear, linear;
}

.timer_noSec {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 2rem;
    font-weight: bold;
}

    .timer_noSec::before {
        color: black;
        content: "";
        animation-name: noSec;
        animation-duration: 5s;
        animation-iteration-count: 1;
        animation-delay: calc(var(--timerPreTime) * 1s);
        animation-fill-mode: forwards;
        animation-timing-function: linear;
    }

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

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

@keyframes colors {
    0% {
        border: var(--timerBorderSize) solid var(--timerGreenColor);
        border-top: var(--timerBorderSize) solid rgba(255,255,255,1);
        background: rgba(255,1,1,0.01);
    }

    100% {
        border: var(--timerBorderSize) solid red;
        border-top: var(--timerBorderSize) solid rgba(255,255,255,0);
        background: rgba(255,1,1,.8);
    }
}

@keyframes noSec {
    0% {    content: "5";   }

    20% {   content: "4";   }

    40% {   content: "3";    }

    60% {   content: "2";    }

    80% {   content: "1";    }

    100% {  content: "0";    }
}