:root {
  --red: #f60038;
  --white: #f5f5f5;
  --green: #32ff00;
  --black: #050505;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  background: var(--red);
}

body {
  margin: 0;
  color: var(--black);
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
}

.poster {
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 520px;
  overflow: hidden;
  background: var(--red);
  isolation: isolate;
  touch-action: pan-y;
}

.title-art {
  position: absolute;
  z-index: 1;
  top: 5.9%;
  left: 2.6%;
  width: min(57vw, 1040px);
  height: auto;
  pointer-events: none;
  user-select: none;
}

.chair-art {
  position: absolute;
  z-index: 2;
  top: 3.5%;
  right: -16.5%;
  width: min(68vw, 1220px);
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.event-info {
  position: absolute;
  z-index: 4;
  display: grid;
  gap: 0.15em;
  color: var(--white);
  font-size: clamp(0.78rem, 1.1vw, 1.35rem);
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: uppercase;
}

.event-info-a {
  left: 3.6%;
  bottom: 4.2%;
}

.event-info-b {
  left: 17.4%;
  bottom: 4.2%;
}

.topics {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.topic {
  position: absolute;
  left: 0;
  top: 0;
  border: 0;
  border-radius: 0;
  padding: 0.28em 0.55em 0.22em;
  background: var(--green);
  color: var(--black);
  font: 500 clamp(1rem, 1.35vw, 1.55rem) / 1 Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: grab;
  pointer-events: auto;
  user-select: none;
  touch-action: none;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0);
}

.topic:active,
.topic.is-dragging {
  cursor: grabbing;
}

.topic.is-dragging {
  z-index: 10;
}

@media (max-width: 860px) {
  html,
  body {
    min-height: 100dvh;
    overflow: auto;
    overscroll-behavior-y: contain;
  }

  .poster {
    height: 100dvh;
    min-height: 760px;
  }

  .title-art {
    top: 5%;
    width: 94vw;
  }

  .chair-art {
    top: 31%;
    right: -57%;
    width: 142vw;
  }

  .event-info-a {
    left: 5%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 5.75rem);
  }

  .event-info-b {
    left: 43%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 5.75rem);
  }

  .event-info {
    font-size: clamp(0.95rem, 3.65vw, 1.25rem);
  }
}