:root {
    --runningtime: 0;
    --animationrunning: running;
}


html {
    height: 100%
}
/* 
body.lock-position {
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: fixed;
  } */


body {
    /* background: linear-gradient(rgba(2,0,36,1) 0%, rgba(0,0,0,1) 9%, rgba(5,22,65,1) 25%, rgba(8,24,131,1) 43%, rgba(15,95,167,1) 100%, rgba(6,64,157,1) 100%, rgba(0,212,255,1) 100%) fixed; */
    background: linear-gradient(
        rgba(6,64,157,1) 0%,
        rgba(15,95,167,1) 9%,
        rgba(8,24,131,1) 25%, 
        rgba(5,22,65,1) 43%,
        rgba(0,0,0,1) 100%,
        rgba(2,0,36,1) 100%
        ) fixed;

    /* 
        */
        /* -webkit-mask-image: -webkit-radial-gradient(white, black); */
        /* overflow: hidden; */
}

.timer-wrap {
    text-align: center;
    overflow: hidden;

}

.timer {
    background: linear-gradient( rgba(208,207,226,0.7) 19%, rgba(59,137,179,0.7) 72%); 
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 1);
    position: relative;
    border-radius: 50%;
    height: 300px;
    width: 300px;
    overflow: hidden;
    font-family: 'Lato', sans-serif;
    padding: 0;
    pointer-events:auto;
    vertical-align: middle;
   
    animation: popping;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);

}

.display {
    padding-top: 30%;
  
}

.wave-wrapper {
    pointer-events:none; 
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    left: 0;
}

.wave-animation {
    animation: move-to-top var(--runningtime) linear; 
    animation-play-state: var(--animationrunning);
    animation-fill-mode: forwards;
}

.wave {
    pointer-events:none; 
    margin: auto;  
    pointer-events:none; 
    padding: 0;
    width: 100%;
    height: 100%;
    background: none;
    top: 100;
    border-radius: 30%;
}

.wave:before,
.wave:after {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -100%;
    left: -50%;
}

.wave:before {
    border-radius: 45%;
    background: rgba(255, 255, 255, 0.1);
    animation: animate 10s linear infinite;
}
.wave:after {
    border-radius: 40%;
    background: rgba(255, 255, 255, 0.05);
    animation: animate 9s linear infinite;
}

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

@keyframes move-to-top {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, -107%);
    }
}   


.play-icon, .reset-icon, .pause-icon{
    transition: 0.3s;
}

.play-icon:hover, .reset-icon:hover, .pause-icon:hover{
    color: #423f3e;
    
}