body{--block-text-color:#222;--block-background-color:#fff;--block-accent-color:#00ae86;--block-shadow-color:#444}.block{display:block;color:var(--block-text-color);border:3px solid var(--block-text-color);border-radius:var(--block-border-radius);padding:4px 8px;background:var(--block-background-color);font-weight:700;cursor:pointer;box-sizing:border-box;position:relative;top:-2px;left:-2px;transition:transform .2s;margin:8px 6px 10px;z-index:1;user-select:none;-webkit-user-select:none;-moz-user-select:none}.block:before{content:'';background:var(--block-background-color);border:3px solid var(--block-text-color);border-radius:var(--block-border-radius);box-sizing:border-box;position:absolute;top:-3px;left:-3px;height:calc(100% + 6px);width:calc(100% + 6px);z-index:-1}.block:focus,.block:hover{transform:translate(2px,2px)}.block:after{content:'';display:block;box-sizing:border-box;background:var(--block-shadow-color);border:3px solid var(--block-text-color);border-radius:var(--block-border-radius);height:calc(100% + 6px);width:calc(100% + 6px);position:absolute;top:3px;left:3px;right:0;z-index:-2;transition:transform .2s}.block:focus:after,.block:hover:after{transform:translate(-2px,-3px)}.block:active{color:var(--block-text-color);transform:translate(3px,3px)}.block:active:after{transform:translate(-4px,-4px)}.block:focus{outline:0}