body1{background-color: #efd5ee;
display: flex;
flex-direction: column;
justify-content: space-evenly}

.emoji{
position: absolute;
 height:100vh;   
width:100%;
background-color:#b77ab6 ;
    box-shadow: 2px 2px 10px rgb(149, 87, 168);
}
.butt{
    background-color: #adf367;
    color:red;
    box-shadow: 2px 2px 15px green;
    margin:10px auto;
    display:flex;
    justify-content: center;
    
}
.butt:hover{
    background-color: #09f43c;

}
.ques{
    margin: 8px auto;
    color:deeppink;
    font-weight: 900;
    background-color: #09f43c;
    box-shadow: 2px 2px 12px red;
    width: 50%;
}
.form1{
    height:30px;
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}
.notes{
    
    background-size:cover;
    height:330px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#wish{
    background-color:rgb(117, 232, 234);
    margin-top: 8px;
    width:50%;
    box-shadow: 4px 4px 15px violet;
    border-radius: 40%;
}

.com{
    font-family: 'Sue Ellen Francisco', cursive;
    text-align: center;
    font-weight: 700;
    color: white;
    font-size: 1.5em;
    line-height: 1.5em;
    padding: 2.2px;
    width: 80%;
   
    height:100vh;
    margin-top: 20px;
    border: 2px solid red;
    
    padding: 20px;
}
.com:hover{
    font-weight:900;
    font-size:1.7em;
    width:85%;
    margin:4px solid red;
    box-shadow:4px 6px 18px blue;
    

}

.click1{
    color:darkred;
    background-color: greenyellow;
    opacity: 1;
    width:60%;
    font-size: large;
    border-radius: 10px;
    margin-top: 20px;
    height: 60px;

}
.click1:hover{
    height: 2em;
    
    border-radius: 25%;
}
.note{
    color:red;height: 150px;
    width:80%;
    text-align: center;
    line-height: 1.5rem;
    font-size: 0.8rem;
    margin:10px auto;
    display: flex;
    align-items: center;
    box-shadow: 3px 3px 18px rebeccapurple;
    font-weight: 400;
}
.note:hover{
    font-weight: 900;
    background-color: aqua;
    width: 82%;
    box-shadow: 4px 4px 19px red;
}
.cont{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    width: 100%;
}
.alpha{
    background-color: #09f43c;
    color: red;
    border: 2px solid darkred;
    height: 35px;
}
.alpha:hover{
height: 40px;
width: 100px;

}
.option{
    height:300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}
.direction,.option1,.option2,.option3,.option4{
    height:75px;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 20px;
    border: 2px solid black;
}
.direction:hover{
    border: 3px dotted black;
    
}
.option1:hover{border:3px dashed black;
text-decoration: underline;}
.option2:hover{
    border:3px dashed black;
    text-decoration: underline;

}
.option3:hover{
    border: 3px  dashed black;
    text-decoration: underline;

}
.option4:hover{
    border: 3px dashed black;
    text-decoration: underline;
}
.know:hover{
    color:rgb(248, 46, 5);
}
.image {
    height: 80px;
    width: 80px;
    margin-top: 10px;
    margin-bottom: 12px;
    border-radius: 50%;
    border: 4px solid rgb(250, 3, 3);
    animation: resize 1s infinite alternate;
    
     /* Animate the resize effect */
}

@keyframes resize {
    0% {
        transform: scale(1); /* Original size */
    }
    100% {
        transform: scale(1.2); /* Enlarged size */
    }
}