h1,h2,h3{text-align:center}h1,h2,h3,hr{background:#444;color:#fff;line-height:2em;margin-left:-50px;margin-right:-50px;position:relative;transform:translateZ(1px);transform-style:preserve-3d}h1:after,h1:before,h2:after,h2:before,h3:after,h3:before,hr:after,hr:before{background:#2b2b2b;content:"";height:100%;position:absolute;top:0;width:50px}h1:before,h2:before,h3:before,hr:before{left:-50px;transform:rotateY(-130deg);transform-origin:100% 0}h1:after,h2:after,h3:after,hr:after{right:-50px;transform:rotateY(130deg);transform-origin:0 0}hr{background:#444;border:0;height:10px}button{background-color:#aad1ee;background-image:radial-gradient(ellipse at top,hsla(0,0%,100%,.15) 50%,transparent);border:0;color:#222;cursor:pointer;display:inline-block;font-size:24px;font-weight:700;margin:10px;min-width:48px;padding:4px 16px;position:relative;transform:translateZ(18px);transform-style:preserve-3d;user-select:none}button:focus{outline:none}button:after,button:before{background:#4098d9;height:100%;left:0;position:absolute;top:0;transform-origin:0 0;width:100%}button:before{background:#6aafe1;content:"";height:18px;transform:rotateX(-90deg)}button:after{content:"";transform:rotateY(90deg);width:18px}button.top-half:before{background:#267ebf;bottom:0;top:auto;transform:rotateX(90deg);transform-origin:100% 100%}button.left-half:after{left:auto;right:0;transform:rotateY(-90deg);transform-origin:100% 100%}button:active{animation:button 80ms steps(20) both}button:active:before{animation:buttonbefore 80ms steps(20) both}button:active:after{animation:buttonafter 80ms steps(20) both}@keyframes button{to{transform:translateZ(9px)}}@keyframes buttonbefore{to{height:9px}}@keyframes buttonafter{to{width:9px}}@media screen and (min-width:0\0){button:after,button:before{display:none}}button:after,button:before,x:-o-prefocus{display:none}