*{box-sizing:border-box}:root{--white-piece-color: #ebecd1;--dark-piece-color: #779557}html,body,#app{width:100%;margin:0}#app{display:flex;justify-content:center}.chess-border{width:800px;height:800px;border:solid 2px black;margin:0 50px;display:flex;flex-direction:column;background-color:var(--white-piece-color)}.row{width:100%;flex:1;display:flex}.field{height:100%;flex:1}.row:nth-of-type(odd)>.field:nth-child(even){background-color:var(--dark-piece-color)}.row:nth-of-type(even)>.field:nth-of-type(odd){background-color:var(--dark-piece-color)}.pieces{display:flex;flex-direction:column;margin-top:100px}.piece{display:flex;height:100px;width:100px}.piece-image{display:block;margin:auto}.field.highlight-possible-field{position:relative}.field.highlight-possible-field:after{pointer-events:none;position:absolute;content:"";display:block;background-color:#00000042;width:40px;height:40px;border-radius:50px;z-index:+1;top:50%;left:50%;transform:translate(-50%,-50%)}.draggable{user-select:none;cursor:grab}body.dragging,.draggable.dragging{cursor:grabbing}.draggable.cloned-element{position:absolute;pointer-events:none;top:0;left:0;will-change:transform;transition:transform .1s}.draggable>img{pointer-events:none}