*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --color-background: hsl(115, 100%, 80%);
  --color-highlight: hsl(231, 100%, 60%);
  --color-drop-background: hsl(231, 100%, 85%);
  --color-drop-background-hover: hsl(231, 100%, 70%);
}

body {
  width: 100vw;
  height: 100vh;
  margin-bottom: 100vh;
  font-size: 1.2rem;
  font-family: "San Francisco Rounded", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.item {
  padding: 1em;
  border-radius: 0.3em;
  background: var(--color-background);
  min-width: 10ch;
  height: 10ch;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  vertical-align: top;
}
.item.dragging {
  background: greenyellow;
}
.drop {
  border-radius: 0.3em;
  background: var(--color-drop-background);
  min-width: 10ch;
  height: 10ch;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  vertical-align: top;
}
.drop[dragover] {
  background: var(--color-drop-background-hover) !important;
}

@keyframes drop {
  0%  { transform: scale(1); }
  20%  { transform: scale(0.95); }
  40%  { transform: scale(1.04); }
  60%  { transform: scale(0.97); }
  80%  { transform: scale(1.02); }
  90%  { transform: scale(1); }
}

.live-region {
  position: absolute;
  margin: -1px;
  border: 0;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}