/* Cards that move as you hover*/
.story {
    height: 300px;
}

.deck {
    display: flex;
    justify-content: center;

    height: 600px;
    margin: 0 auto;

}

.deck .card {
    display: flex;

    border-radius: 3%;

    background-color: rgba(107, 186, 255, 1);

    height: fit-content;
    width: fit-content;
}

.deck .card img {
    width: 15vw;
    border-radius: 3%;
}


#liam {
    position: relative;
    top: 4vw;
    left: 5vw;
    transform: rotate(-5deg);
    z-index: 1;
}

#liam:hover {
    position: relative;
    top: 1vw;
    left: 5vw;
    transform: rotate(0deg);
    z-index: 4;
}



#paul {
    position: relative;
    top: 2vw;
    left: 2.5vw;
    transform: rotate(-3deg);
    z-index: 2;
}

#paul:hover {
    position: relative;
    top: 1vw;
    left: 2.5vw;
    transform: rotate(0deg);
    z-index: 4;
}



#dion {
    position: relative;
    top: 1vw;
    z-index: 3;
}

#dion:hover {
    position: relative;
    top: 0.5vw;
    z-index: 4;
}



#bastiaan {
    position: relative;
    top: 2vw;
    right: 2.5vw;
    transform: rotate(3deg);
    z-index: 2;
}

#bastiaan:hover {
    position: relative;
    top: 1vw;
    right: 2.5vw;
    transform: rotate(0deg);
    z-index: 4;
}



#levi {
    position: relative;
    top: 4vw;
    right: 5vw;
    transform: rotate(5deg);
    z-index: 1;
}

#levi:hover {
    position: relative;
    top: 1vw;
    right: 5vw;
    transform: rotate(0deg);
    z-index: 4;
}