/* Header */

.heading{
    position: fixed;
    text-align: center;
    top: 0;
    left: 50%;
    translate: -50%;
}

/* Card in general */

.card {
    position: relative;
    top: 25%;
    left: 50%;
    translate: -50%;
    width: 400px;
    height: 550px;
    cursor: pointer;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 1s;
}

.card:hover {
    transform: perspective(2500px) rotate(5deg);
    box-shadow: inset 100px 20px 100px rgba(0, 0, 0, 0.2),
        0 10px 100px rgba(0, 0, 0, 0.5);
}

/* Front of Card */

.card:hover .cardFront {
    transform: rotateY(-160deg);
}

.card:hover .Happy {
    visibility: hidden;
}

.cardFront {
    position: absolute;
    top: 25%;
    left: 50%;
    translate: -50%;
    background-color:rgb(255, 141, 211);
    width: 400px;
    height: 550px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0, 0, 0, 0.2),
        30px 0 50px rgba(0, 0, 0, 0.4);
    transition: 0.6s;
}

.Happy {
    font-family: Tahoma, sans-serif;
    text-align: center;
    margin: 30px;
    background-image: linear-gradient(120deg, #ff238a 0%, #b306f8 100%);
    transition: 0.1s;
    color: #fff;
}

.frontImage{
    position: absolute;
    border-radius: 10px;
    width: 300px;
    height: 400px;
    left: 50px;
    top: 80px;
    transition: 0.1s;
}

/* Inside of Card */

.cardInside {
    position: absolute;
    top: 25%;
    background-color: #fff;
    width: 400px;
    height: 550px;
    z-index: -1;
    box-shadow: inset 100px 20px 100px rgba(0, 0, 0, 0.2);
}

p {
    margin: 40px;
    color: #333;
    text-align: center;
    font-size: large;
}
    
p.Message{
        position: absolute;
        top: 110px;
}
    
p.Name{
    text-align: left;
}
    
h3{
    text-align: center;
}
    
.Ending {
    position: absolute;
    left: 150px;
    top: 400px;
    color: #333;
}

/* Button */

button{
    border-radius: 10px;
    position: fixed;
    bottom: 0;
    left: 50%;
    translate: -50%;
    font-size: large;
    background-color: green;
    color: #fff;
    cursor: pointer;
}

h2{
    position: fixed;
    bottom: 5%;
    left: 50%;
    translate: -50%;
}


/*  */






/* body.BirthdayCard {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-image:url("./Images/background.jpg");
background-size: cover;
} */

/* .back {
font-family: Tahoma, sans-serif;
color: #333;
text-align: center;
margin: 30px;
outline-color: #333;
outline-style: dotted;
} */




/* 


.heading{
    position: fixed;
    text-align: center;
    top: 0;
    left: 50%;
    translate: -50% -50%;
}


.card {
    position: relative;
    width: 400px;
    height: 550px;
    cursor: pointer;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 1s;
}

.card:hover {
    transform: perspective(2500px) rotate(5deg);
    box-shadow: inset 100px 20px 100px rgba(0, 0, 0, 0.2),
        0 10px 100px rgba(0, 0, 0, 0.5);
}



.card:hover .cardFront {
    transform: rotateY(-160deg);
}

.card:hover .Happy {
    visibility: hidden;
}

.cardFront {
    position: relative;
    background-color:rgb(255, 141, 211);
    width: 400px;
    height: 550px;
    overflow: hidden;
    transform-origin: left;
    box-shadow: inset 100px 20px 100px rgba(0, 0, 0, 0.2),
        30px 0 50px rgba(0, 0, 0, 0.4);
    transition: 0.6s;
}

.Happy {
    font-family: Tahoma, sans-serif;
    text-align: center;
    margin: 30px;
    background-image: linear-gradient(120deg, #ff238a 0%, #b306f8 100%);
    transition: 0.1s;
    color: #fff;
}

.frontImage{
    position: absolute;
    border-radius: 10px;
    width: 300px;
    height: 400px;
    left: 50px;
    top: 50px;
    transition: 0.1s;
}



.cardInside {
    position: absolute;
    background-color: #fff;
    width: 400px;
    height: 550px;
    z-index: -1;
    left: 0;
    top: 0;
    box-shadow: inset 100px 20px 100px rgba(0, 0, 0, 0.2);
}

p {
    margin: 40px;
    color: #333;
    text-align: center;
    font-size: large;
}
    
p.Message{
        position: absolute;
        top: 110px;
}
    
p.Name{
    text-align: left;
}
    
h3{
    text-align: center;
}
    
.Ending {
    position: absolute;
    left: 150px;
    top: 400px;
    color: #333;
}





div.Gallery{
    text-align: center;
}

.imageCard{
    position: relative;
    right: 0;
    width: 230px;
    border-radius: 10px;

    height: 30px;
    overflow: hidden;
    transition: 1s ease-in-out;

    box-shadow: 0 5 12px rgba(0, 0, 0, 0.3);
    flex: .15;
}

.imageCard img{
    position: relative;
    height: 300px;
    object-fit: cover;
}

.imageCard:hover{
    flex: 1 1 0;
    width: 300px;
    height: 300px;
    cursor: pointer;
    border-radius: 10px;
}



button{
    border-radius: 10px;
    position: fixed;
    bottom: 10px;
    font-size: large;
    background-color: green;
    color: #fff;
    cursor: pointer;
} */