*{box-sizing:border-box}body{margin:0}.container{display:flex;justify-content:center;align-items:center;overflow:hidden}.card{background:#000;min-height:100vh;min-width:100vh;transition:transform .6s ease;transform-style:preserve-3d;display:flex;justify-content:center;align-items:center;height:100%;width:100%;position:relative;border-radius:10px;text-align:center}.card button{background:none;border:none;padding:0;cursor:pointer}.card:hover{transform:scale(.9)}.trigger{width:100%;height:100%;color:#000;font-size:xx-large}.reset{position:absolute;bottom:15px;right:15px;color:#000;font-size:14px}.card-front,.card-back{position:absolute;backface-visibility:hidden;height:100%;width:100%;color:#000;cursor:pointer;font-size:xx-large}html{font-size:xx-large!important}.card-back{transform:rotateY(180deg);width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}.card.active{transform:perspective(700px) rotateY(180deg)}.canvas{position:absolute;height:100%;width:100%;z-index:0}.card-back :not(.canvas){z-index:1}