html,
body {
  width: 100%;
  height: 100%;
  background-color: var(--light-colour);
  overflow: hidden;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -------------------------------------------------------------------------- */
/*                                THE RESOURCE                                */
/* -------------------------------------------------------------------------- */

.moveHolder {
  width: 90vw;
  height: 90vh;
  height: 90svh;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  align-content: flex-end;
  gap: 2vmin;
}

.moveable {
  position: relative;
  font-size: 2.25vmin;
  font-weight: 200;
  color: var(--white-colour);
  text-align: center;
  padding: 1vmin 2vmin;
  background-color: var(--dark-colour);
  border-radius: 1vmin;
  white-space: nowrap;
  max-width: 50vw;
  text-wrap: balance;
  overflow-wrap: normal;
  margin-bottom: 0.5vmin;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 0.25vmin solid rgba(255, 255, 255, 0.3);
  box-shadow: rgba(0, 0, 0, 0.2) 0px -0.35vmin 0px inset;
  user-select: none;
}

.moveable:hover {
  filter: brightness(1.2);
  cursor: pointer;
}

.ghost-moveable {
  pointer-events: none;
  user-select: none;
  border-radius: 1vmin;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid var(--dark-colour);
}

/* -------------------------------------------------------------------------- */
/*                                  TEMPLATES                                 */
/* -------------------------------------------------------------------------- */

.templateHolder {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.templateOptionsHolder {
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  z-index: 1000000;
}

#templatePicker {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--white-colour);
  padding: 2vmin;
  border-radius: 1vmin;
  gap: 2vmin;
  display: flex;
  flex-wrap: wrap; /* Add this line */
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0.1vmin 0.2vmin,
    rgba(0, 0, 0, 0.3) 0px 0.35vmin 0.75vmin -0.15vmin,
    rgba(0, 0, 0, 0.2) 0px -0.15vmin 0px inset;
  max-width: 90vw; /* Optional: prevent from being too wide */
  max-height: 70vh; /* Optional: prevent from being too tall */
  overflow: auto; /* Optional: scroll if overflows */
  justify-content: center; /* Optional: center items on each row */
}

#templatePicker .simpleButton {
  width: 10vmin;
  height: 10vmin;
}

.templateButton {
  cursor: pointer;
  width: 10vmin;
  height: 10vmin;
  padding: 1vmin;
  flex: none;
  border-radius: 1vmin;
  border: 2px solid transparent;
  transition: border 0.2s;
}

.templateButton:hover {
  border: 2px solid var(--dark-colour);
}

.blankTemplateButton {
  background: rgba(0, 0, 0, 0.05);
}

#templateBg svg,
.template-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.template-svg.venn,
.template-svg.target {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  display: block;
}

/* -------------------------------------------------------------------------- */
/*                                    LABEL                                   */
/* -------------------------------------------------------------------------- */

.moveable-label {
  display: flex;
  align-items: center;
  background: var(--white-colour);
  color: var(--black-colour);
  font-size: 2.5vmin;
  font-weight: 600;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0.1vmin 0.1vmin;
  padding: 0.5vmin 1.2vmin 0.5vmin 0.6vmin;
  width: fit-content;
  max-width: 50vw;
  position: absolute;
  left: 45vw;
  top: 45vh;
  z-index: 10;
  cursor: default;
  user-select: none;
  gap: 1vmin;
  border-radius: 0;
}

.label-handle {
  width: 3vmin;
  height: 3vmin;
  background: var(--dark-colour);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  flex-shrink: 0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
  font-size: 2vmin;
  color: var(--white-colour);
}

.label-handle svg {
  display: block;
  width: 60%;
  height: 60%;
  fill: var(--white-colour);
}
.moveable-label.editing {
  outline: 2px dashed var(--dark-colour);
  background: var(--light-colour);
  color: var(--dark-colour);
}
.label-content[contenteditable='true'] {
  background: var(--white-colour);
  outline: none;
  min-width: 6vw;
}

.label-content.is-placeholder {
  color: rgba(0, 0, 0, 0.5);
}