@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
}
body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins',sans-serif;
    background: rgb(10, 85, 85);
    perspective: 900px;
    transform-style: preserve-3d;
}
.wrapper,.single-card{
    height: 450px;
    min-width: 300px;
    margin: auto;
    position: relative;
}
.wrapper{
    /* -webkit-perspective: 1000; */
    perspective: 900px;
    transform-style: preserve-3d;
}
.single-card{
    transform-style: preserve-3d;
    perspective: 900px;
    text-align: center;
    transition: all 1.5s cubic-bezier(0.7, -.5, 0.3, 1.8);
}
.wrapper:hover .single-card{
    transform: rotateY(180deg) ;
}
.front, .back{
    width: 300px;
    position: relative;
    top: 0;
    left: 0;
    backface-visibility: hidden;
}
.front{
    border: solid 1px black;
    perspective: 1000px;
    transform-style: preserve-3d ;
    cursor: pointer;
    height: 100%;
    background: linear-gradient(45deg, rgb(116, 30, 30),rgb(39, 39, 134));
    /* background-image:url(../media/imgEffet/planetePasserelle1080px.png); */
    backface-visibility: hidden;
    border-radius: 50px;
    /* background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%; */
    box-shadow: -3px 3px 20px 2px rgba(0, 0, 0, 0.2);
}
.front img{
    transform: translate(00px, 100px) translateZ(70px);
    height: 50%;
    transition: all 1s ease-in-out;
}
.front img:hover{
    transform: translate(00px, 100px) translateZ(70px) rotate(40deg);
}

.back{ 
    transform-style: preserve-3d;
    perspective: 900px;
    transform: rotateY(180deg);
    position: absolute;
    border-radius: 50px;
    height: 450px;
    background: linear-gradient(
        to top,
        rgb(158, 158, 158),
        rgb(180, 185, 206),
        rgb(180, 185, 206),
        rgb(158, 158, 158)
    );
    border: solid 1px black;
    box-shadow: -3px 3px 20px 2px rgba(0, 0, 0, 0.2);
}
.content{
    perspective: 900px;
    transform-style: preserve-3d;
    padding-top: 35%;
}
.content h2{
    transform: translateZ(50px);
    font-size: 35px;
    margin: 0;
    font-weight: 600;
}
.content h4{
    transform: translateZ(70px);
    margin: 0;
}
.content p{
    transform: translateZ(25px);

}
.socials{
    perspective: 900px;
    transform-style: preserve-3d;
    margin-top: 20%;
}
.socials i{
    transform: translateZ(50px);
    transition: all 0.2s ease-in-out;
    padding: 10px 5px;
}
.socials i:nth-child(1):hover{
    color: rgb(255,0,0);
    transform: translate(-15px, 25px) scale(1.9);
    background-color: whitesmoke;
    border-radius: 2px;
    padding: 3px 3px;
}
.socials i:nth-child(2):hover{
    color:whitesmoke;
    background: linear-gradient(135deg, #513dd3, #f60266, #f7bb00);
    padding: 3px 3px;
    border-radius: 2px;
    transform: translate(-5px, 25px) scale(1.9);
}
.socials i:nth-child(3):hover{
    transform: translate(5px, 25px) scale(1.9);
    background-color: #00a8e8;
    border-radius: 2px;
    padding: 3px 3px;
    color: whitesmoke;
}
.socials i:nth-child(4):hover{
    color: whitesmoke ;
    background: linear-gradient(to top,#026ae3,#16a6fb);
    padding: 5px 5px;
    border-radius: 50%;
    transform: translate(15px, 25px) scale(1.7);
    height: 15px;
    width: 15px;
}