body{
  background:#008080;
  font-family: monospace;
  margin:0;
}
.window{
  position:absolute;
  top:10px;left:10px;
  border:2px solid #fff;
  box-shadow:4px 4px #000;
  background:#c0c0c0;
  display:flex;
  flex-direction:column;
  max-width:100%;
}
.title-bar{
  background:#000080;
  color:#fff;
  padding:2px 4px;
  cursor:move;
  user-select:none;
}
.toolbar{
  display:flex;
  flex-wrap:wrap;
  background:#e0e0e0;
  padding:2px;
}
.toolbar button{
  margin:2px;
  width:32px;height:32px;
  background:#fff;
  border:1px solid #808080;
  cursor:pointer;
}
.toolbar button.active{
  background:#000080;
  color:#fff;
}
.content{
  display:flex;
  flex-wrap:wrap;
}
.palette{
  display:flex;
  flex-wrap:wrap;
  width:128px;
  padding:4px;
  box-sizing:border-box;
}
.fgbg{
  display:flex;
  align-items:center;
  margin-bottom:4px;
}
.color-display{
  width:24px;height:24px;
  border:1px solid #000;
  margin-right:4px;
}
#swap-colors{
  width:24px;height:24px;
}
.palette button{
  width:24px;height:24px;
  margin:2px;
  border:1px solid #000;
  cursor:pointer;
}
.canvas-wrapper{
  position:relative;
  flex:1;
}
#canvas,#grid{
  position:absolute;
  top:0;left:0;
  image-rendering:pixelated;
  width:512px;height:512px;
}
.status-bar{
  background:#e0e0e0;
  padding:2px 4px;
  display:flex;
  justify-content:space-between;
  font-size:12px;
}
@media (max-width:700px){
  .palette{width:100%;order:2;justify-content:center;}
  .canvas-wrapper{order:1;}
}