#deck-container {
  position: relative;
  top: calc(var(--card-height) / 2 + 38px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  position: absolute;
  width: var(--card-width);
  max-width: var(--card-width);
  height: var(--card-height);
  max-height: var(--card-height);
  will-change: transform;
  border-radius: 16px;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
  font-size: 1.3rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.4;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.card-placeholder {
  position: absolute;
  width: var(--card-width);
  max-width: var(--card-width);
  height: var(--card-height);
  max-height: var(--card-height);
  border: 5px dotted #ffffff;
  border-radius: 16px;
}

.card:active {
  cursor: grabbing;
}

.card.dragging {
  transition: none;
}

.card.gone {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card.reset {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}