@import url("https://fonts.googleapis.com/css?family=Montserrat:700"); html {   box-sizing: border-box; } *, *:before, *:after {   box-sizing: inherit;   transition: all 0.3s ease !important; } #timer{     -webkit-animation: 15s 0.875s cubic-bezier(0.9, 0, 0.1, 1) forwards background_color;           animation: 15s 0.875s cubic-bezier(0.9, 0, 0.1, 1) forwards background_color; } @-webkit-keyframes background_color {   6.6666666667% {     background-color: #479eeb;   }   13.3333333333% {     background-color: #7347eb;   }   20% {     background-color: #eb47e0;   }   26.6666666667% {     background-color: #eb475d;   }   33.3333333333% {     background-color: #ebb447;   }   40% {     background-color: #9eeb47;   }   46.6666666667% {     background-color: #47eb73;   }   53.3333333333% {     background-color: #47e0eb;   }   60% {     background-color: #475deb;   }   66.6666666667% {     background-color: #b447eb;   }   73.3333333333% {     background-color: #eb479e;   }   80% {     background-color: #eb7347;   }   86.6666666667% {     background-color: #e0eb47;   }   93.3333333333% {     background-color: #5deb47;   }   100% {     background-color: #47ebb4;   }   106.6666666667% {     background-color: #479eeb;   } } @keyframes background_color {   6.6666666667% {     background-color: #479eeb;   }   13.3333333333% {     background-color: #7347eb;   }   20% {     background-color: #eb47e0;   }   26.6666666667% {     background-color: #eb475d;   }   33.3333333333% {     background-color: #ebb447;   }   40% {     background-color: #9eeb47;   }   46.6666666667% {     background-color: #47eb73;   }   53.3333333333% {     background-color: #47e0eb;   }   60% {     background-color: #475deb;   }   66.6666666667% {     background-color: #b447eb;   }   73.3333333333% {     background-color: #eb479e;   }   80% {     background-color: #eb7347;   }   86.6666666667% {     background-color: #e0eb47;   }   93.3333333333% {     background-color: #5deb47;   }   100% {     background-color: #47ebb4;   }   106.6666666667% {     background-color: #479eeb;   } }
#timer { width: 50vmin; height: 50vmin; box-shadow: 0px 0px 5px 3px #000; border: 8px solid #fff; font-size: 25vmin; text-shadow: 3.75vmin 3.75vmin 7.5vmin rgba(0, 0, 0, 0.125); position: relative; left: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; color: white; border-radius: 50%; font-weight: 700; text-decoration: none; cursor: not-allowed; pointer-events: none; transition: all 0.3s ease !important; right: 0; margin: 0 auto;
} @media (min-width: 600px) { #timer {     transition: all 0.3s ease !important;     width: 50vmin;     height: 50vmin;     font-size: 25vmin;     text-shadow: 2.5vmin 2.5vmin 5vmin rgba(0, 0, 0, 0.125);   } } #timer:before {   content: "15";   transition: all 0.3s ease !important;   -webkit-animation: 15s 1s forwards timer_countdown, 1s 0.875s 15 timer_beat;           animation: 15s 1s forwards timer_countdown, 1s 0.875s 15 timer_beat;           animation-play-state: running; } #timer:after {   content: "";   position: absolute;   top: 0;   left: 0;   z-index: -100;   width: 100%;   height: 100%;   transition: all 0.3s ease !important;   background-color: rgba(0, 0, 0, 0.125);   -webkit-animation: 15s 1s linear forwards timer_indicator;           animation: 15s 1s linear forwards timer_indicator;           animation-play-state: running; }.zero-animation {  font-size: 5em !important;  background-color: #06ae87;  box-shadow: 0px 0px 15px 5px #000 !important;     cursor: pointer !important;     pointer-events: all !important;     transition: all 0.3s ease !important; }.zero-animation:before{   content: "تنزيل" !important; }.stop-animation{ }.stop-animation:before{ animation-play-state: paused !important; }.stop-animation:after{ animation-play-state: paused !important; } @-webkit-keyframes timer_beat {   40%, 80% {     transform: none;   }   50% {     transform: scale(1.125);   } } @keyframes timer_beat {   40%, 80% {     transform: none;   }   50% {     transform: scale(1.125);   } } @-webkit-keyframes timer_countdown {   0% {     content: "15";   }   6.6666666667% {     content: "14";   }   13.3333333333% {     content: "13";   }   20% {     content: "12";   }   26.6666666667% {     content: "11";   }   33.3333333333% {     content: "10";   }   40% {     content: "9";   }   46.6666666667% {     content: "8";   }   53.3333333333% {     content: "7";   }   60% {     content: "6";   }   66.6666666667% {     content: "5";   }   73.3333333333% {     content: "4";   }   80% {     content: "3";   }   86.6666666667% {     content: "2";   }   93.3333333333% {     content: "1";   }   100% {     content: "0";   } } @keyframes timer_countdown {   0% {     content: "15";   }   6.6666666667% {     content: "14";   }   13.3333333333% {     content: "13";   }   20% {     content: "12";   }   26.6666666667% {     content: "11";   }   33.3333333333% {     content: "10";   }   40% {     content: "9";   }   46.6666666667% {     content: "8";   }   53.3333333333% {     content: "7";   }   60% {     content: "6";   }   66.6666666667% {     content: "5";   }   73.3333333333% {     content: "4";   }   80% {     content: "3";   }   86.6666666667% {     content: "2";   }   93.3333333333% {     content: "1";   }   100% {     content: "0";   } } @-webkit-keyframes timer_indicator {   100% {     transform: translateY(100%);   } } @keyframes timer_indicator {   100% {     transform: translateY(100%);   } }