body, html{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

#map{
  width:50%;
  margin:0 auto;
  position:relative;
}

.enabled #map{
  cursor:pointer;
}


.pixel{
  position:relative;
  float:left;
  width:1%;
}

.pixel:after{
  content: "";
  display:block;
  padding-bottom:100%;
}

#tools{
  text-align: center;
}

#tools span{
  padding: 3px;
  border: 5px solid grey;
  display: inline-block;

}
.enabled #tools span:not(#status){
  cursor: pointer;
  border: 10px solid blue;
}

#tools #status{
  cursor: default;
  pointer-events: none;
  border: 20px solid red;
  color: green;
  font-weight: bold; 
}

#tools #slow {
  display: inline-block;
  padding: 12px 22px;
  border: 2px solid #166534;
  border-radius: 999px;
  background: #22c55e;
  color: #052e16;
  font: bold 16px system-ui, sans-serif;
  cursor: pointer;
}

#tools #slow:hover { background: #4ade80; }
#tools #slow:focus-visible { outline: 3px solid #14532d; outline-offset: 3px; }