/***************************/
/*        variables        */
/***************************/

:root {
  font-size: 16px;
  overflow: hidden;
}

/**************************/
/*        elements        */
/**************************/

body {
  height: 100vh;
  height: 100dvh;
  padding: 0;
  margin: 0;
  position: relative;
  display: grid;
  grid-template-areas: "stack";
  overflow: hidden;
  background: radial-gradient(white, var(--doraemon-canvas-color-primary));
}

#canvas-app {
  grid-area: stack;
  justify-self: center;
}

#canvas-tool-panel {
  grid-area: stack;
}

#tooltips {
  grid-area: stack;
}

/*********************************/
/*        Doraemon's hand        */
/*********************************/

.dora-hand {
  width: 14%;
  min-width: 200px;
  max-width: 500px;
  aspect-ratio: 1;
  clip-path: ellipse(50% 50% at 50% 50%);

  grid-area: stack;
  position: absolute;
  top: 15%;
  height: auto;

  overflow: hidden;
  background: white;
}

#dora-hand-left {
  left: -6%;
}

#dora-hand-right {
  right: -6%;
}

@media screen and (width < 860px) {
  .dora-hand {
    z-index: -1;
  }
}