#df-buttons-magnet {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
  width: fit-content;
  height: fit-content;
  margin: auto;
  padding: 20px;
  background: url(/../ui/denim075.png) repeat;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 6px;
}
#df-buttons-magnet button {
  width: fit-content;
  height: fit-content;
  vertical-align: middle;
}
#df-buttons-magnet button img {
  width: 24px;
  height: 24px;
  border: none;
  margin: 0;
  padding: 0;
  margin-top: 4px;
  margin-bottom: -4px;
}
#df-buttons-magnet .close {
  color: var(--color-text-light-highlight);
  grid-area: 1/3/1/3;
  width: fit-content;
  height: fit-content;
  padding: 4px;
  transform: translate(40px, -20px);
}
#df-buttons-magnet .left {
  grid-column: 1/1;
  grid-row: 2/2;
  margin-right: 10px;
}
#df-buttons-magnet .left img {
  transform: rotate(0.25turn);
}
#df-buttons-magnet .top {
  grid-column: 2/2;
  grid-row: 1/1;
  margin-bottom: 10px;
}
#df-buttons-magnet .top img {
  transform: rotate(0.5turn);
}
#df-buttons-magnet .right {
  grid-column: 3/3;
  grid-row: 2/2;
  margin-left: 10px;
}
#df-buttons-magnet .right img {
  transform: rotate(-0.25turn);
}
#df-buttons-magnet .bottom {
  grid-column: 2/2;
  grid-row: 3/3;
  margin-top: 10px;
}