body{
    width: 100%;
    height: 1800px;
}

.header{
        display: flex;
        flex-direction: column;
        gap: 30px;
}

.menu{
      background: linear-gradient(white,pink,white);
      text-align: center;
      padding: 10px 0px 10px;
      margin: 20px 0px 0px;
      width: 340px;
      height: 20px;
      border-radius: 5px;
      box-shadow: inset 2px 0px 5px pink,
                  inset -2px 0px 5px pink,
                  2px 0px 5px pink;
      animation: rotatex 2s,fadein 1s,scale 2s 2s infinite;
}

.text{
    color: white;
    font-family: cursive;
}

.container{
           background: linear-gradient(#FFB9FF 30%,white 50%,#FFB9FF);
           width: 340px;
           height: 350px;
           border-radius: 2px;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           gap: 10px;
           box-shadow: 0px 5px 5px pink,
                       -0px -5px 5px pink;
           animation: fadein 1s,slide 2s;
}

.box1{
    display: flex;
    justify-content: space-around;
    gap: 25px;
}

.photo1{
}

.image1{
       width: 80px;
       height: 100px;
       margin-top: 20px;
       border-radius: 10px;
}

.photo2{
}

.image2{
       width: 80px;
       height: 100px;
       border-radius: 10px;
}

.photo3{
}

.image3{
       width: 80px;
       height: 100px;
       margin-top: 20px;
       border-radius: 10px;
}

.heart1{
      font-size: 40px;
      width: 50px;
      height: 50px;
      animation: scale 1s infinite;
}

.box2{
    display: flex;
    justify-content: space-around;
    gap: 25px;
}

.photo4{
}

.image4{
       width: 80px;
       height: 100px;
       border-radius: 10px;
}

.photo5{
}

.image5{
       width: 80px;
       height: 100px;
       margin-top: 20px;
       border-radius: 10px;
}

.photo6{
}

.image6{
       width: 80px;
       height: 100px;
       border-radius: 10px;
}
        
.footer{
            height: 100%;
            width: 70%;
            max-width: 300px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            box-shadow: 0 15px 50px rgba(173, 20, 87, 0.3);
            padding: 40px;
            position: relative;
            overflow: hidden;
            margin: 40px 0;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            animation: fadein 6s;
        }
        
.footer::before {
            content: "";
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            background: linear-gradient(45deg, #ff6b6b, #ff8e8e, #ffafcc, #ffc8dd, #ffafcc, #ff8e8e, #ff6b6b);
            background-size: 400%;
            z-index: -1;
            border-radius: 30px;
            animation: animateBorder 15s linear infinite;
        }
        
@keyframes animateBorder {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
           }

.letter{
        font-family: ;
}

@keyframes fadein {
                0% { opacity: 0;}
                100% { opacity: 5;}
}

@keyframes rotatex {
                 0% { transform: rotatex(0deg);}
                 100% { transform: rotatex(360deg);}
}

@keyframes slide {
                0% { transform: translatex(-100%);}
                100% { transform: translatex(0%);}
}

@keyframes scale {
               0% { transform: scale(1);}
               50% { transform: scale(0.9);}
               100% { transform: scale(1);}
}