.splitflap{position:relative;min-width:100px;height:100px;margin:5px;line-height:100px;text-align:center;perspective:1000px}.center{position:relative;width:100%;display:flex;justify-content:center;flex-wrap:wrap;overflow:hidden}.splitflap .bottom,.splitflap .nextFull,.splitflap .nextHalf,.splitflap .top{background-image:linear-gradient(90deg,#06b6d4,#2563eb);color:white}.top{height:50%;border-radius:10px 10px 0 0;overflow:hidden;z-index:0}.bottom,.top{position:relative;width:100%}.bottom{height:100%;margin-top:-50%;border-radius:10px;z-index:-1;transform-origin:center}.nextHalf{height:50%;margin-top:-100%;overflow:hidden;border-radius:10px 10px 0 0;z-index:2;transform-origin:bottom}.nextFull,.nextHalf{position:relative;width:100%}.nextFull{height:100%;margin-top:-50%;border-radius:10px;z-index:-3}.flip1{animation:flip1 ease-in 1;animation-duration:1s}.flip2{animation:flip2 ease-out 1;animation-duration:1s}@keyframes flip1{0%{transform:rotateX(0deg)}50%{transform:rotateX(90deg)}to{transform:rotateX(90deg)}}@keyframes flip2{0%{transform:rotateX(-90deg)}50%{transform:rotateX(-90deg)}to{transform:rotateX(0deg)}}@media (max-width:1024px){.splitflap{min-width:70px;height:70px;line-height:70px;font-size:60px;margin:5px}.bottom,.nextFull,.nextHalf,.top{border-radius:6px}}@media (max-width:600px){.splitflap{min-width:30px;height:30px;line-height:30px;font-size:30px;margin:5px}.bottom,.nextFull,.nextHalf,.top{border-radius:6px}}