.card {
    border-radius: 10px;
    border: 0px;
    transition: all 0.5s;
    background-color: transparent;
}

.card.Main {
    width: 10vw;
    min-width: 5rem;
    max-width: 10rem;
    height: auto;
    position: absolute;
    top: 100%;
    transform: translateY(-50%);
    z-index: 1;
}

.card.Main.hidden {
    left: 50%;
    top: 200%;
}

.card.Right {
    height: 15rem;
    width: 10rem;
    position: absolute;
    transform: rotate(-90deg);
    left: 200%;
}

.card.Left {
    height: 15rem;
    width: 10rem;
    position: absolute;
    transform: rotate(90deg);
    right: 200%;
}

.card.Top {
    height: 15rem;
    width: 10rem;
    position: absolute;
    transform: rotate(-180deg);
    bottom: 200%;
}

.card.Main.played {
    transform: translateX(-50%) rotate(180deg);
    left: 50% !important;
    height: auto;
    width: 5vw;
    max-width: 8rem;
    min-width: 3rem;
    top: 10% !important;
}

.card.Right.played {
    transform: translateY(-50%) rotate(90deg);
    left: 30%;
    height: auto;
    width: 5vw;
    min-width: 3rem;
    max-width: 8rem;
    top: 50%;
}

.card.Top.played {
    transform: translateX(-50%) rotate(180deg);
    bottom: 10%;
    height: auto;
    width: 5vw;
    min-width: 3rem;
    max-width: 8rem;
    left: 50%;
}

.card.Left.played {
    transform: translateY(-50%) rotate(-90deg);
    right: 30%;
    height: auto;
    width: 5vw;
    min-width: 3rem;
    max-width: 8rem;
    top: 50%;
}

.card.Left.played.MainWinner {
    transform: translateY(60vh) translateX(4rem) rotate(0deg)
}

.card.Left.played.TopWinner {
    transform: translateX(4rem) translateY(-70vh) rotate(0deg);
}

.card.Left.played.RightWinner {
    transform: translateX(80vw) translateY(-50%) rotate(-90deg);
}

.card.Left.played.LeftWinner {
    transform: translateY(-50%) translateX(-65vw) rotate(-90deg)
}

.card.Right.played.MainWinner {
    transform: translateY(60vh) translateX(-4rem) rotate(0deg)
}

.card.Right.played.TopWinner {
    transform: translateX(-4rem) translateY(-70vh) rotate(0deg);
}

.card.Right.played.RightWinner {
    transform: translateX(45vw) translateY(-50%) rotate(90deg)
}

.card.Right.played.LeftWinner {
    transform: translateX(-80vw) translateY(-50%) rotate(90deg)
}

.card.Main.played.MainWinner {
    transform: translateX(-50%) translateY(50vh) rotate(180deg)
}

.card.Main.played.TopWinner {
    transform: translateX(-50%) translateY(-80vh) rotate(180deg)
}

.card.Main.played.LeftWinner {
    transform: translateX(-70vw) translateY(-9rem) rotate(90deg)
}

.card.Main.played.RightWinner {
    transform: translateX(60vw) translateY(-7rem) rotate(90deg)
}

.card.Top.played.MainWinner {
    transform: translateX(-50%) translateY(90vh) rotate(180deg)
}

.card.Top.played.TopWinner {
    transform: translateX(-50%) translateY(-50vh) rotate(180deg);
}

.card.Top.played.LeftWinner {
    transform: translateX(-70vw) translateY(10rem) rotate(90deg)
}

.card.Top.played.RightWinner {
    transform: translateY(6rem) translateX(50vw) rotate(90deg)
}

.container.Left.display {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 40%;
    height: 40%;
    left: 0;
    flex-wrap: nowrap;
    /* border: 5px solid black; */
    justify-content: center;
}

.card.Left.displayed.removed {
    right: 8rem;
}

.card.Left.displayed {
    right: -4rem;
    height: 4rem;
    width: 8rem;
    position: relative;
    min-height: 0;
    min-width: 0;
    z-index: 1;
}

.card.Right.displayed {
    left: -4rem;
    height: 4rem;
    width: 8rem;
    position: relative;
    min-height: 0;
    min-width: 0;
    z-index: 1;
}

.container.Right.display {
    display: flex;
    flex-direction: column-reverse;
    position: absolute;
    width: 40%;
    height: 40%;
    right: 0;
    flex-wrap: nowrap;
    /* border: 5px solid black; */
    justify-content: center;
    align-items: end;
}

.card.Right.displayed.removed {
    left: 8rem;
}

.card.Top.displayed.removed {
    transform: translateY(-140%);
    transition: all 0.5s;
}

.card.Top.displayed {
    position: relative;
    width: 6rem;
    height: 12rem;
    display: flex;
    flex-direction: row;
    transform: rotate(0deg);
    transition: all 0s;
    z-index: 1;
}

.container.Top.display {
    display: flex;
    flex-direction: row;
    position: absolute;
    flex-wrap: nowrap;
    justify-content: center;
}

.card.Main.displayed:not(.played) {
    transform: translateY(-60%);
    /* box-shadow: 0px 0px 10px 0px rgb(0, 0, 255); */
}

.card.Main:not(.played):hover {
    cursor: pointer;
    /* box-shadow: 15px 15px 30px #bebebe, -15px -15px 30px #ffffff; */
    transform: translateY(-80%);
}

/* Add increase shadow animation */
.card.first-played {
    box-shadow: -3px 0px 17px 0px #003f5c
  /* animation: increase-shadow 1.5s ease-out infinite; */
}

@keyframes increase-shadow {
  0% {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0);
  }
  40% {
    box-shadow: -3px 0px 17px 0px #003f5c
  }
  100% {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0);
  }
}