*{margin:0}body{background-color:#ffd2a8}#root{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#ffd2a8}button{position:relative;display:inline-block;cursor:pointer;outline:none;border:0;text-decoration:none;font-family:Fuzzy Bubbles;font-size:2.25em;margin:10px}#coffee-button{font-weight:800;color:#382b22;padding:1em 1.15em;background:#fff0f0;border:2px solid #b18597;border-radius:.75em;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:background .15s cubic-bezier(0,0,.58,1),-webkit-transform .15s cubic-bezier(0,0,.58,1);transition:transform .15s cubic-bezier(0,0,.58,1),background .15s cubic-bezier(0,0,.58,1),-webkit-transform .15s cubic-bezier(0,0,.58,1)}#coffee-button:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;right:0;bottom:0;background:#f9c4d2;border-radius:inherit;-webkit-box-shadow:0 0 0 2px #b18597,0 .625em 0 0 #ffc28a;box-shadow:0 0 0 2px #b18597,0 .625em #ffc28a;-webkit-transform:translate3d(0,.75em,-1em);transform:translate3d(0,.75em,-1em);transition:transform .15s cubic-bezier(0,0,.58,1),box-shadow .15s cubic-bezier(0,0,.58,1),-webkit-transform .15s cubic-bezier(0,0,.58,1),-webkit-box-shadow .15s cubic-bezier(0,0,.58,1)}#coffee-button:hover{background:#ffe9e9;-webkit-transform:translate(0,.25em);transform:translateY(.25em)}#coffee-button:hover:before{-webkit-box-shadow:0 0 0 2px #b18597,0 .5em 0 0 #ffc28a;box-shadow:0 0 0 2px #b18597,0 .5em #ffc28a;-webkit-transform:translate3d(0,.5em,-1em);transform:translate3d(0,.5em,-1em)}#coffee-button:active{background:#ffe9e9;-webkit-transform:translate(0em,.75em);transform:translateY(.75em)}#coffee-button:active:before{-webkit-box-shadow:0 0 0 2px #b18597,0 0 #ffe3e2;box-shadow:0 0 0 2px #b18597,0 0 #ffe3e2;-webkit-transform:translate3d(0,0,-1em);transform:translateZ(-1em)}