body {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-size: 20px;
  background: linear-gradient(
    23deg,
    rgba(197, 33, 222, 1) 0%,
    rgba(26, 139, 219, 1) 100%
  );
  overflow: hidden;
  white-space: nowrap;
}

a {
  text-decoration: none;
}

button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

my-drag-area {
  display: block;
  height: 100vh;

  &.grabbing,
  &.grabbing * {
    cursor: grabbing !important;
  }

  &:not(.grabbing) my-draggable,
  &:not(.grabbing) my-animal {
    cursor: grab;

    > * {
      cursor: auto;
    }
    /* for some reason, <a> and <button> tags dont get the pointer with auto */
    > a,
    > button {
      cursor: pointer;
    }
  }
}

my-draggable,
my-animal {
  width: fit-content;
  padding: 20px;
  border: 1px solid red;
  position: absolute;
  background: rgba(255, 255, 255, 0.24);
  border-radius: 16px;
  backdrop-filter: blur(6px);

  &:has(my-audio-player) {
    display: flex;
  }
}

my-audio-player {
  --big: 55px;
  --small: 15px;
  display: grid;
  grid-template-columns: var(--big) var(--small);
  grid-template-rows: var(--big) var(--small);
  gap: 5px;

  button {
    line-height: var(--big);
  }

  [name="progress"] {
    grid-column: 1 / span 2;
  }

  input[type="range"] {
    appearance: none;
    cursor: pointer;
    accent-color: black;
    color: black;
    border: 2px solid black;

    &[orient="vertical"] {
      width: 0;
      writing-mode: vertical-lr;
      direction: rtl;
    }
    &:not([orient="vertical"]) {
      height: 0;
    }

    &::-moz-range-thumb {
      border: none;
      background-color: currentColor;
    }
  }
}