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

body {
  background: #050620;
  background: radial-gradient(rgba(5,6,32,0.79), rgba(5,6,32,0.91));
  color: #ecf0f1;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 1.3rem;
  margin: 0;
  padding: 0;
}
h1, h2, h3 {
  margin: 0;
  padding: 0;
}
h1 {
  margin-bottom: 1em;
}
h2 {
  margin-bottom: 0.5em;
  color: lightsalmon;
}
h3 {
  margin-bottom: 0.25em;
  color: lightseagreen;
}

header {
  position: sticky; 
  top: 0;
  width: 100%; 
  margin-bottom: 1rem;
  background: rgba(5,6,32,0.8); 
  padding: 1rem;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.gesture-area {
  position: relative;
  height: 18vh; 
  border: 6px solid lightgoldenrodyellow;
  border-radius: 0.2em;
}
.gesture-area > div {
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%);
}
.circle {
  width: 100px; 
  height: 100px; 
  background: linear-gradient(lime, green, black);
  border-radius: 50%;
  pointer-events: none;
}



main {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  padding: 1rem;
}
main section {
  flex: 1 1 30ch;
  border: 2px solid lightslategray;
  border-radius: 0.2em;
  padding: 0.5em;
  min-height: 20ch;
}
main {
  margin-bottom: 50vh;
}