body {
    margin: 0;
    display: grid;
    place-items: center;
    background-color: rgb(10, 10, 70);
    height: 100vh;
    overflow: hidden;
}

main {
    position: relative;
    border: 2px solid white;
    perspective: 500px;
}

section {
    transform-style: preserve-3d;
}

.card {
    position: absolute;
    left: -100px;
    top: -150px;
    width: 200px;
    height: 300px;
    background-color: white;
    border: 1px solid black;
    box-shadow: 0 0 20px rgba(0,0,0,0.7);
    -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, transparent, rgba(0,0,0,0.2));
    background-size: cover;
    background-repeat: no-repeat;

    /* snap cards to bottom, as if the are "sliding" on it */
    transform-origin: bottom;
    transition: translate 1s, rotate 1s, scale 1s;
}

/* left outer (hidden) */
.card:nth-of-type(1) {
    translate: -300px;
    rotate: y 40deg;
    scale: 0.8;
    z-index: -2;
}

/* left outer */
.card:nth-of-type(2) {
    translate: -300px;
    rotate: y 40deg;
    scale: 0.8;
    z-index: -1;
}

/* left to center */
.card:nth-of-type(3) {
    translate: -200px;
    rotate: y 25deg;
    scale: 0.9;
}

/* CENTER image */
/* .card:nth-of-type(4) {
    scale: 1.1;
} */

/* right to center */
.card:nth-of-type(5) {
    translate: 200px;
    rotate: y -25deg;
    scale: 0.9;
}

/* right outer */
.card:nth-of-type(6) {
    translate: 300px;
    rotate: y -40deg;
    scale: 0.8;
    z-index: -1;
}

/* right outer (hidden) */
.card:nth-of-type(7) {
    translate: 300px;
    rotate: y -40deg;
    scale: 0.8;
    z-index: -2;
}

nav {
    position: absolute;
    translate: -50%;
    display: flex;
    height: 50px;
    width: 80px;
    justify-content: center;
    gap: 10px;
    align-items: center;
    bottom: -250px;

    button {
        padding: 0.3rem 0.5rem;
        background-color: transparent;
        color: white;
        font-weight: bold;
        opacity: 0.5;

        &:hover {
            opacity: 1;
        }
    }
}