.countdown-timer{display:flex;gap:15px;justify-content:center}.card{text-align:center;font-size:25px}.card p{color:#8486a9;font-size:11px;letter-spacing:3px;text-transform:uppercase}.top-half,.bottom-half{color:#fb6087;font-size:35px;height:43px;width:77px;padding:23px 7px;overflow:hidden;text-align:center;position:relative;background-color:#2c2c44;border-radius:5px;box-shadow:0 3px #47537333 inset}.top-half:before,.top-half:after,.bottom-half:before,.bottom-half:after{content:"";background-color:#191a24;height:10px;width:10px;border-radius:100%;position:absolute}.top-half:before,.bottom-half:before{left:-5px}.top-half:after,.bottom-half:after{right:-5px}.top-half:before,.top-half:after{bottom:-5px}.bottom-half:before,.bottom-half:after{top:-5px}@keyframes flip-top{to{transform:rotateX(90deg)}}@keyframes flip-bottom{to{transform:rotateX(0)}}body{font-weight:700;height:100%;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:auto;background:url(https://raw.githubusercontent.com/alleycaaat/frontend-mentor/main/countdown-timer/images/bg-stars.svg),linear-gradient(0deg,rgba(37,29,44,1) 33%,rgba(30,30,40,1) 50%)}h1{text-transform:uppercase;color:#fff;text-align:center;margin-bottom:50px;letter-spacing:5px}footer{display:flex;flex-direction:column;justify-content:center;align-items:center;background-image:url(https://raw.githubusercontent.com/alleycaaat/frontend-mentor/main/countdown-timer/images/pattern-hills.svg);background-repeat:no-repeat;background-size:cover;position:absolute;min-height:20%;width:100%;bottom:0}footer .media{margin-top:60px;margin-bottom:15px}footer .media a{text-decoration:none;margin:5px 15px}footer .media a:hover{filter:invert(58%) sepia(38%) saturate(4955%) hue-rotate(310deg) brightness(101%) contrast(102%)}footer .femc{margin-bottom:10px;color:#8486a9}footer .femc a{text-decoration:none;color:#fb6087}footer .femc a:hover{text-transform:lowercase}@media screen and (min-width: 700px){main h1{font-size:31px}main .cards{gap:25px}main .cards .top-half,main .cards .bottom-half,main .cards .top-flip,main .cards .bottom-flip{font-size:70px!important;height:80px!important;width:125px!important;padding:34px 7px!important}}
