:root{--days:0;--hours:0;--minutes:0;--seconds:0;--grayish-blue:hsl(237, 18%, 59%);--desaturated-blue:hsl(236, 21%, 26%);--dark-blue-800:hsl(235, 16%, 14%);--dark-blue-900:#f8f8f8;--soft-red:darkslateblue;--bg-clr-body:var(--dark-blue-800);--bg-clr-card:var(--desaturated-blue);--bg-clr-card-shadow:var(--dark-blue-900);--txt-clr-card:var(--soft-red);--txt-clr-card-title:var(--grayish-blue);--txt-size-card:4rem}*,::after,::before{box-sizing:border-box;margin:0;padding:0}#compte_a_rebours .container{display:flex;align-items:flex-start;justify-content:center;height:200px}.content-grid{display:grid;gap:16px 32px;grid-template:repeat(2,1fr)/repeat(4,1fr)}.flip-card{line-height:67px;--_flip-card-size:125px;border-radius:.5rem;color:var(--txt-clr-card);display:inline-flex;flex-direction:column;font-size:var(--txt-size-card);font-weight:700;position:relative;perspective:800px;perspective-orgin:center;height:var(--_flip-card-size);width:var(--_flip-card-size)}.flip-card::after,.flip-card::before{--_pivot-pt-size:12px;content:"";background:var(--dark-blue-900);border-radius:50%;height:var(--_pivot-pt-size);width:var(--_pivot-pt-size);top:50%;position:absolute;transform:translateY(-50%);z-index:99}.flip-card::before{left:calc(var(--_pivot-pt-size)/ -2)}.flip-card::after{right:calc(var(--_pivot-pt-size)/ -2)}.flip-card .top::before{content:"";background:var(--bg-clr-card-shadow);inset:0;opacity:.2;z-index:99}.flip-card .time{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:-1}.flip-card .bottom,.flip-card .top{--_flip-speed:450ms;display:flex;justify-content:center;position:absolute;overflow:hidden;height:50%;width:100%;transform-style:preserve-3d}.flip-card .top[data-flip=true]{animation:top-to-bottom var(--_flip-speed) ease-in}.flip-card .bottom[data-flip=true]{animation:bottom-to-top var(--_flip-speed) ease-out var(--_flip-speed)}.flip-card .top{border-radius:.5rem .5rem 0 0;transform-origin:bottom;background:rgb(72 61 139 / 5%)}.flip-card .bottom{border-radius:0 0 .5rem .5rem;top:50%;transform-origin:top;background:#fff}.flip-card .top::after{top:50%}.flip-card .bottom::after,.flip-card .top::after,.flip-card .top::before{position:absolute}.flip-card .bottom::after{top:-50%}.flip-card:first-child .bottom::after,.flip-card:first-child .top::after{counter-reset:days var(--days);content:counter(days,decimal-leading-zero)}.flip-card:nth-child(2) .bottom::after,.flip-card:nth-child(2) .top::after{counter-reset:hours var(--hours);content:counter(hours,decimal-leading-zero)}.flip-card:nth-child(3) .bottom::after,.flip-card:nth-child(3) .top::after{counter-reset:minutes var(--minutes);content:counter(minutes,decimal-leading-zero)}.flip-card:nth-child(4) .bottom::after,.flip-card:nth-child(4) .top::after{counter-reset:seconds var(--seconds);content:counter(seconds,decimal-leading-zero)}.card-title{color:black;justify-self:center;letter-spacing:.3em;text-transform:uppercase}@keyframes top-to-bottom{100%{transform:rotateX(-90deg)}}@keyframes bottom-to-top{0%{transform:rotateX(90deg);box-shadow:0 5px 5px rgba(0,0,0,.3)}100%{transform:rotateX(0);box-shadow:0 5px 5px transparent}}#duree_essai{width:596px;background:linear-gradient(45deg,#40bf77,#2e8b57);margin:0 auto;box-shadow:0 0 50px 0 rgb(72 61 139 / 50%);padding:25px;border-radius:8px;font-family:Bangers,cursive;text-align:center;color:#fff;font-size:32px}.wowah{display:flex;justify-content:center;align-items:center;margin-bottom:10px;gap:2px}.wowah span{display:inline-block;}.wowah span:first-child{font-size:32px!important}.wowah span:nth-child(2){font-size:36px!important}.wowah span:nth-child(3){font-size:40px!important}.wowah span:nth-child(4){font-size:44px!important}.wowah span:nth-child(5){font-size:48px!important}.wowah span:nth-child(6){font-size:52px!important}.wowah span:nth-child(7){font-size:56px!important}.wowah span:nth-child(8),.wowah span:nth-child(9){font-size:60px!important}.wowah span:nth-child(9){margin-top:-15px}#duree_essai span,.wowah span{font-size:50%;font-family:Bangers,cursive;color:#fff}@media (max-width:768px){.content-grid{gap:16px 16px}.flip-card{line-height:33.5px;--_flip-card-size:62.5px;font-size:2rem}.card-title{max-width:50px;text-overflow:ellipsis;overflow:hidden;letter-spacing:0}#duree_essai{width:100%}}