*,
*&::before,
*&::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: rgb(24, 24, 24);
    display: flex;
    padding: 150px;
}

.box {
    width: 250px;
    height: 100px;
    background-color: white;
    margin: 100px auto;
    transform-style: preserve-3d;
    transform: perspective(800px) rotateX(50deg) rotateZ(-45deg);
    position: relative;
    transition: 1s;

    &:hover {
        transform: perspective(800px) rotateX(50deg) rotateZ(-45deg) translateZ(40px);

        >a {
            &:last-of-type {
                box-shadow: -30px 30px 40px gray;
            }

            >* {
                color: white;
            }

            background-color: rgb(255, 0, 170);
        }

        &::before {
            background-color: rgb(212, 0, 142);
        }

        &::after {
            background-color: rgb(255, 43, 184);
        }
    }

    &:nth-of-type(2) {
        &:hover {
            >a {
                background-color: rgb(17, 0, 255);
            }

            &::before {
                background-color: rgb(14, 0, 216);
            }

            &::after {
                background-color: rgb(50, 35, 255);
            }
        }
    }

    &:nth-of-type(3) {
        &:hover {
            >a {
                background-color: rgb(0, 217, 255);
            }

            &::before {
                background-color: rgb(0, 169, 199);
            }

            &::after {
                background-color: rgb(49, 224, 255);
            }
        }
    }

    &:nth-of-type(4) {
        &:hover {
            >a {
                background-color: orangered;
            }

            &::before {
                background-color: rgb(221, 59, 0);
            }

            &::after {
                background-color: rgb(255, 101, 46);
            }
        }
    }

    &::before {
        content: '';
        width: 30px;
        height: 100%;
        background-color: rgb(156, 155, 155);
        position: absolute;
        top: 0;
        left: 0;
        transform-origin: left;
        transform: rotateY(90deg);
        transition: 1s;
    }

    &::after {
        content: '';
        width: 100%;
        height: 30px;
        background-color: rgb(156, 155, 155);
        position: absolute;
        bottom: 0;
        left: 0;
        transform-origin: bottom;
        transform: rotateX(90deg);
        transition: 1s;
    }

    >a {
        display: flex;
        width: 100%;
        height: 100%;
        background-color: white;
        position: absolute;
        top: 0;
        left: 0;
        text-decoration: none;
        align-items: center;
        justify-content: start;
        color: rgb(27, 27, 27);
        transition: 1s;

        >* {
            padding-left: 15px;
            transition: 1s;
        }

        >i {
            font-size: 40px;

        }

        >span {
            font-size: 30px;
            padding-bottom: 10px;
        }

        &:last-of-type {
            transform: translateZ(-30px);
            box-shadow: -5px 5px 5px rgb(66, 66, 66);
            transition: 1s;
        }
    }
}