*{
margin: 0;
padding: 0;
}

body{
display: flex;
justify-content: center;
align-items: center;
background: url('/img/img2.jpg') no-repeat;
background-size:cover;
background-position: center;
backdrop-filter: blur(10px);
}


#btn{
border: none;
background-color:  rgb(253, 214, 222);
cursor: pointer; 
cursor: pointer;
position: fixed;
left: 20px;
top: 15px;
padding:10px 15px;
border-radius:15px;
color:rgb(181, 114, 114);
background: transparent;
font-size: xx-large;
}




/* start card */
.card {
width: 300px;
height: 500px;
perspective:1000px;
margin-top:140px;
margin-bottom: 120px;
margin-right: 100px;
}

.card-inner {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.999s;
}

.card:hover .card-inner {
transform: rotateY(180deg);
}

.card-front,.card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
/* end card */
/* start front card */
.card-front {
transform: rotateY(0deg);
border-radius: 15px;
width: 400px;
height: 500px;
box-shadow: 0px 6px 15px  rgba(0, 0, 0, 0.4);
border: 2px solid rgba(255, 255, 255, 2);
}
.card-front img {
height: 240px;
width: 240px;
margin-left:80px;
margin-top: 100px;
margin-bottom: 0px;
border-radius: 20px;
}

.card-front pre{
text-align: center;
font-family: serif;
font-size:larger;
color:rgb(255, 255, 255);
margin-top: 30px;

}
/* end front card */
/* start back card */
.card-back {
transform: rotateY(180deg);
border-radius: 20px;
width: 400px;
height:500px;
box-shadow: 0px 6px 15px  rgba(0, 0, 0, 0.4);
border: 2px solid rgba(255, 255, 255, 2);
}

.contact-card form{
display: grid;
align-items: center;
justify-content: center;
}

input{
color: rgb(74, 59, 59);
font-size: 15px;
margin-bottom: 5px;
border: none;
padding:7px 5px;
padding-left: 30px;
padding-right: 30px;
margin-top: 0px;
border-radius: 10px;
box-shadow: 0px 6px 15px  rgba(0, 0, 0, 0.4);
background: transparent;
border: 2px solid rgba(255, 255, 255, 2);
}


textarea{
font-size: large;
color: rgb(90, 67, 67);
margin-bottom: 5px;
padding: 5px;
border-radius: 10px;
box-shadow: 0px 6px 15px  rgba(0, 0, 0, 0.4);
background: transparent;
border: 2px solid rgba(255, 255, 255, 2);
}

#btn4{
color: rgb(255, 255, 255);
background-color: rgb(243, 155, 155);
padding: 10px;
border-radius: 15px;
border: none;
box-shadow: 0px 6px 15px  rgba(0, 0, 0, 0.4);
cursor: pointer;
}

#btn4:hover{
background-color: rgb(62, 82, 76);

}

.socials {
margin-top: 40px;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}

.socials a{
text-decoration: none;
color:rgb(255, 255, 255);
font-family: serif;
}

.socials a:hover{
text-decoration: underline;
}

.card-back img {
height: 240px;
width: 240px;
margin-left:80px;
margin-top: 20px;
margin-bottom: 0px;
}

/* end back card */
/* end card */