*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;overflow:hidden}h1{font-size:28px}h2{font-size:25px}h3{font-size:22px}h4{font-size:21px}h5{font-size:20px}html,body,#app{display:flex;flex-wrap:wrap;width:100%;height:100%}north{display:flex;justify-content:center;align-items:center;width:100%;height:50px}west{display:flex;justify-content:center;align-items:center;width:50px;height:calc(100% - 100px)}main{position:relative;z-index:0;display:flex;width:calc(100% - 100px);height:calc(100% - 100px);padding:25px;border:2px solid hsla(0,0%,0%,.95)}east{display:flex;justify-content:center;align-items:center;width:50px;height:calc(100% - 100px)}south{display:flex;justify-content:center;align-items:center;width:100%;height:50px}north,west,east,south{background:#000;color:#fff;font-size:25px;line-height:25px}north:hover,west:hover,east:hover,south:hover{background:#000000e6;cursor:pointer}#B,#N,#W,#E,#S{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;width:100%;height:100%;overflow-x:hidden;overflow-y:auto}@media(max-width:768px){html,body,#app{display:flex;flex-wrap:wrap;width:100%;height:100%;cursor:default}north{display:flex;justify-content:center;align-items:center;width:100%;height:20px}west{display:flex;justify-content:center;align-items:center;width:20px;height:calc(100% - 40px)}main{position:relative;z-index:0;display:flex;width:calc(100% - 40px);height:calc(100% - 40px);padding:10px;border:2px solid hsla(0,0%,0%,.95)}east{display:flex;justify-content:center;align-items:center;width:20px;height:calc(100% - 40px)}south{display:flex;justify-content:center;align-items:center;width:100%;height:20px}north,west,east,south{font-size:16px;line-height:16px}}