body {
    background: linear-gradient(135deg, rgb(234, 140, 215), rgb(195, 71, 195), purple);
    background-attachment: fixed;
}

.invite-card {
    display: flex;
    flex-direction: column;
    margin-top: 150px;
    margin-left: auto;
    margin-right: auto;
    color: whitesmoke;
    background:  rgb(195, 71, 195);
    box-shadow: 0 0 70px rgb(168, 5, 168);
    height: 400px;
    width: 300px;
    border-radius: 20px;
}
.invitetxt {
    font-family: "Parisienne", cursive;
    font-size: 20pt;
    text-align: center;
    margin-top: 18px;
}

.info {
    display: flex;
    flex-direction: column;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 13pt;
    margin-top: 8px;
    margin-left: 10px;
    gap: 15px;
}

#name {
    display: flex;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2.3px;
    padding-left: 20px;
    color: whitesmoke;
    background: linear-gradient(260deg, rgb(204, 69, 204), rgb(226, 104, 226));
    background-color: pink;
    height: 30px;
    width: 220px;
    border: none;
    border-radius: 15px;
}
#confirm {
    color: whitesmoke;
    background: linear-gradient(260deg, rgb(204, 69, 204), rgb(226, 104, 226));
    border: none;
    border-radius: 20px;
    box-shadow: 10px 18px 60px rgb(198, 55, 203);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    font-weight: 600;
    height: 40px;
    width: 240px;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

.timer-box {
    color: whitesmoke;
    text-align: center;
    border: 2px solid whitesmoke;
    border-radius: 30px;
    margin-top: 24px;
    margin-left: auto;
    margin-right: auto;
    height: 60px;
    width: 240px;
}
.timer {
    color: whitesmoke;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    bottom: 41px;
}


#open {
    color: whitesmoke;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14pt;
    font-weight: 500;
    text-align: center;
    position: relative;
    top: 220px;
}




#timer {
    color: whitesmoke;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16pt;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    bottom: 53px;    
}
#timerbox {
   color: whitesmoke;
    text-align: center;
    border: 2px solid whitesmoke;
    border-radius: 40px;
    display: flex;
    margin-top: 32vh;
    margin-left: auto;
    margin-right: auto;
    height: 80px;
    width: 300px;
}

#openinvite {
    color: whitesmoke;
    background: linear-gradient(260deg, rgb(204, 69, 204), rgb(226, 104, 226));
    border: none;
    border-radius: 20px;
    box-shadow: 10px 18px 60px rgb(198, 55, 203);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    font-weight: 600;
    height: 40px;
    width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 13px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}



#happy {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: whitesmoke;
    font-family: Parisienne, cursive;
    font-size: 22pt;
    font-weight: 500;
    margin-top: 30px;
}

.birthday-card {
    display: flex;
    flex-direction: column;
    margin-top: 120px;
    margin-left: auto;
    margin-right: auto;
    color: whitesmoke;
    background:  rgb(195, 71, 195);
    box-shadow: 0 0 70px rgb(168, 5, 168);
    height: 400px;
    width: 300px;
    border-radius: 20px;
    animation: animation 2s ease-in-out alternate;
    animation-iteration-count: 5;
}
@keyframes animation {
    from {transform: rotate(1.3deg);}
    to {transform: rotate(-1.3deg);}
}

#lettertitle {
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 16pt;
    text-align: center;
    padding-top: 14px;
    animation: animation 2s ease-in-out alternate;
    animation-iteration-count: 10;
}
#heartb {
    background-color: transparent;
    border: none;
    font-size: 60pt;
    text-align: center;
    margin-top: 70px;
    
}
#txt {
    display: none;
    position: relative;
    bottom: 380px;
    width: 260px;
    margin-left: auto;
    margin-right: auto;
    color: aliceblue;
    font-size: 15pt;
    font-family: Perisianne, sans-serif;
    text-align: justify;
}

#input {
    display: none;
    position: relative;
    top: 200px;
    margin-left: auto;
    margin-right: auto;
    height: 30px;
    width: 210px;
    border: none;
    border-radius: 15px;
}

#timer-box2 {
    color: whitesmoke;
    text-align: center;
    border: 2px solid whitesmoke;
    border-radius: 30px;
    display: none;
    position: relative;
    bottom: 365px;
    margin-left: auto;
    margin-right: auto;
    height: 60px;
    width: 240px;
}
.timer2 {
    
    color: whitesmoke;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14pt;
    font-weight: 600;
    display: none;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    bottom: 409px; 
}