*, *::before, *::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    min-height:150vh;
    background:gray;
    background-image: url(16-9.jpg);
    background-size: contain;
}
ul{
    width: 900px;
    height: 600px;
    margin: 100px auto;
    /* border: 1px solid red; */
    display: flex;
    transition: 1s;
    &:hover{
        >li{
            &:first-of-type{
                transform: perspective(1200px) rotateY(0deg);
                >div{
                    transform: perspective(1200px) scaleX(1);
                }
                
            }
        }
    }
    >li{
        list-style-type: none;
        width: 100%;
        background-color: rgb(255, 192, 203);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 10px solid rgba(255, 20, 145, 0.537);
        color: rgb(103, 40, 74);
        transition: 1s;
        &:first-of-type{
            padding: 0 20px;
            transform-origin: right;
            transform: perspective(1200px) rotateY(180deg) ;
            >div{
                transform:perspective(1200px) scaleX(-1);
                backface-visibility: visible;
                font-size: 40px;
                transition: 1s;
            }
        }
        &:last-of-type{
            padding: 0 20px;
            font-size: 30px;
            backface-visibility: hidden;
        }
    }
}
.footer{
width: 100%;
min-height: 50vh;
background-color: rgb(255, 192, 203) ;
display: flex;
align-items: center;
justify-content: center;
>div{
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
>.pic{
    width: 320px;
    height: 320px;
    background-color: rgba(255, 20, 145, 0.537);
    border-radius: 64% 36% 47% 53% / 32% 22% 78% 68% ;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .5s;
    &:hover{
        transform: scale(1.1);
    }
    >figure{
        width: 300px;
        height: 300px;
        >img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% ;
        }
    }
}
>.links{
    /* border: 1px solid red; */
    width: 100px;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 7px;
    >a{
        text-decoration: none;
        font-size: 40px;
        color: rgb(176, 18, 102);
        transition: .3s;
        &:hover{
            color: antiquewhite;
            font-size: 50px;
        }
    }
}
>.text{
    /* border: 1px solid blue; */
    color:rgb(103, 40, 74);
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}
}
}