@font-face { 
  font-family: Farhang;
  src: url('./FarhangVariable.woff') format('woff-variations'),
  url('./FarhangVariable.woff') format('woff');
  font-display: fallback;
}

html,body {
  margin: 0;
  padding: 0;
  background-color: #404040;
}

.panel {
  --width: 65.79vh;
  --height: 100vh;
  position: fixed;
  left: 50%;
  top: 0;
  width: var(--width);
  height: var(--height);
  margin-left: calc(var(--width) / -2);
  // background-color: rgba(255, 255, 255, 0.3);

  .layer {
    position: absolute;
    inset: auto 0 0 0;
    height: var(--width);
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */

    *.master {
      height: 100%;
    }

    &.layer-03 {
      opacity: 0;
    }
    &.layer-04 {
      opacity: 0;
    }
    &.layer-05 {
      opacity: 0;
    }

    &.rete {
      // transition: transform 1s ease-out;
    }

    &.overlay {
      canvas {
        position: absolute;
        inset: 0;
        width: 100%;
      }
    }

    &.action {
      &.hover {
        cursor: grab;
      }
    }

    img {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
    }
  }
}