html{margin:0;padding:0;width:100%;height:100%}body{background:#000;color:#fff;font-family:Roboto Mono;font-size:16px;font-weight:400;height:200%;margin:0;padding:0;width:100%}button{background:transparent;border-radius:0;border:none;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;outline:none;pointer-events:none;position:absolute;text-align:center;user-select:none}button.top{left:0;top:0;width:100%}button.right{right:0;top:0;height:100%}button.bottom{bottom:0;left:0;width:100%}button.left{left:0;top:0;height:100%}button.size{position:relative}.container{align-items:center;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}.box{margin:auto;inset:0;background:#d3070799;height:300px;position:absolute;transition:background .2s ease-out;touch-action:none;user-select:none;width:300px;z-index:0}.box:hover{cursor:pointer}.box:active,.box:hover{background:#d30707;z-index:1}#main{background:#ffffff14;height:80%;inset:0;margin:auto;position:absolute;width:80%}#viewport{height:100%;left:0;position:fixed;top:0;width:100%;z-index:0}#intersection{background:#600975cc;height:100%;max-height:300px;max-width:300px;inset:0;margin:auto;opacity:0;pointer-events:none;position:fixed;transform:scale(.9);transition:all .2s ease-out;width:100%;z-index:10}#intersection.active{opacity:1;transform:scale(1)}#main>button{color:#ffffff4d}#viewport>button{color:#ffffff1a}#intersection>button{color:#ffffff80}.box>button{color:#fff9}