body{

        margin: 0px;

        padding: 0px;

        box-sizing: border-box;

    }



.box{

    background-color: white;

    width: 100%;

    display:grid;

    grid-template-columns:  250px auto;

    align-content: center;

}



.Navmenu{

    grid-column: 1 / span 2;

   width: 100%;

    height: 90px;  

}



.cuore{

    min-width: 600px;

    background-image: url(https://media.istockphoto.com/id/1202005820/it/foto/cuore-di-frutta-e-verdura-verdure-e-frutta-fresche-frutta-e-verdura-colorata-mangiare-pulito.jpg?s=612x612&w=0&k=20&c=w9IX5lok-Ev3PP5PgBtjU-iuiALwQcScfQ2G78hNQ0Y=);        
  
  background-size: cover;

    background-size: contain;

    background-repeat: no-repeat;

    animation-name: puls;

    animation-duration:1s;

    animation-fill-mode: forwards;  

    animation-iteration-count:infinite; 

    animation: name duration timing-function delay iteration-count direction fill-mode;

    animation-delay: 5s;

}

@keyframes puls{

    0%{ 

       width: 100%; height: 100%;

              

 }

    100%{ 
    width: 95%; height: 95%;
 }

}
.menu{

    background-color: rgb(182, 148, 37);

    height: 800px;

    flex-wrap: nowrap;

}

.menu0{

    top: -100px; left: -500px;

    width: 50px; height: 50px; border-radius: 50%;

    background-image: url(https://www.foodiesfeed.com/wp-content/uploads/2023/05/homemade-pasta.jpg);

    background-size: cover;

    animation-name: rot0;

    animation-duration:3s;

    animation-fill-mode: forwards;
}

.t0{

    font-size: 20pt; font-weight: 500;

    animation-name: testo0;

    animation-duration:3s; 

    color:rgb(241, 232, 176);

    text-align: center;
}

@keyframes rot0{

    0%{ 

        margin-top: -10%; margin-left:-100%;

        width: 50px; height: 50px;

        border-radius: 25px;       

 }

    50%{

        margin-left: 50%; margin-top: 30%;

        width: 100px; height: 100px; border-radius: 50%;

        

    }

    100%{ 

        margin-left: 15%; margin-top: 20px; /*distanza finale top*/

        width:200px; height: 100px; border-radius: 75px;

        transform: rotate(360deg);    

    }

}

@keyframes testo0{

     0%{

        font-size: 0pt;

        text-align: center;

    }

    50%{

        transform: rotate(-360deg);

        font-size: 10pt;

        text-align:center;

     }

     100%{

        transform: rotate(-720deg);

        font-size: 20pt;

        text-align:center;

     }

}


.menu1 {

    width: 50px; height: 50px; border-radius: 50%;

    background-image: url(https://www.foodiesfeed.com/wp-content/uploads/ff-images/2024/12/spicy-chicken-dish-with-fresh-ingredients.jpg);

    background-size: cover;

    animation-name: rot1;

    animation-duration:3.5s;

    justify-content:right; /*align-items: center;*/

    animation-fill-mode: forwards;

   }

.t1{

    font-size: 20pt; font-weight: 500;

    animation-name: testo1;

    animation-duration:3.5s; 

    color:rgb(241, 232, 176);

    text-align: center;

}



@keyframes rot1{

    0%{ 

    margin-top: 0%; margin-left: 75%;

    width: 50px; height: 50px; border-radius: 25px;       

    }

    50%{

        margin-left: 50%; margin-top: 10px;

        width: 100px; height: 100px; border-radius: 50%;

    }

    100%{ 

       margin-left: 15%; margin-top: 10px; /*distanza finale top*/

        width:200px; height: 100px; border-radius: 75px;

        transform: rotate(360deg); 

    }

}

@keyframes testo1{

    0%{

        font-size: 0pt;

    }

    50%{

        transform: rotate(-360deg);

        font-size: 10pt;

     }

     100%{

        transform: rotate(-720deg);

        font-size: 20pt;

     }

}

.menu2{

    width: 50px; height: 50px; border-radius: 50%;

    background-image: url(https://media.istockphoto.com/id/2213943398/it/foto/piatti-di-insalata-freschi-e-sani-girati-dallalto-sul-tavolo-scuro.jpg?s=612x612&w=0&k=20&c=EDmXFDNI129CJ5kqmAojMaLi-bTSqJCKpsu1Ii46Kx0=);

    background-size: cover;

    animation-name: rot2;

    animation-duration:3.5s;

    animation-fill-mode: forwards;

    align-content: right;

    align-items: center;

}



.t2{

    font-size: 20pt; font-weight: 500;

    animation-name: testo2;

    animation-duration:3.5s; 

   color:rgb(241, 232, 176);

   text-align: center;

}

@keyframes rot2{

    0%{ 

        margin-top: 0%; margin-left:50%;

        width: 50px; height: 50px;

        border-radius: 25px;       

    }

    50%{

        margin-left: 50%; margin-top: 10px;

        width: 100px; height: 100px; border-radius: 50%;

        

    }

    100%{ 

        margin-left: 15%; margin-top: 10px; /*distanza finale top*/

        width:200px; height: 100px; border-radius: 75px;

        transform: rotate(360deg);    

    }   

 }



@keyframes testo2{

    0%{

        font-size: 0pt;

    }

    50%{

        transform: rotate(-360deg);

        font-size: 10pt;

     }

     100%{

        transform: rotate(-720deg);

        font-size: 20pt;

     }

}



.menu3 {

    width: 50px; height: 50px; border-radius: 50%;

    background-image: url(https://www.foodiesfeed.com/wp-content/uploads/2023/08/pizza-basil-leaf-detail.jpg);

    background-size: cover;

    animation-name: rot3;

    animation-duration:4s;

    justify-content:right; /*align-items: center;*/

    animation-fill-mode: forwards;

}



.t3{

    font-size: 20pt; font-weight: 500;

    animation-name: testo3;

    animation-duration:4s; 

    color:rgb(241, 232, 176);

    text-align: center;

}



@keyframes rot3{

   0%{ 

        margin-top: 0; margin-left:100%;

        width: 50px; height: 50px;

        border-radius: 25px;       

    }

    50%{

        margin-left: 50%; margin-top: 10px;

        width: 100px; height: 100px; border-radius: 50%;

        

    }

    100%{ 

        margin-left: 15%; margin-top: 10px; /*distanza finale top*/

        width:200px; height: 100px; border-radius: 75px;

        transform: rotate(360deg); 

    }

}



@keyframes testo3{

    0%{

        font-size: 0pt;

    }

    50%{

        transform: rotate(-360deg);

        font-size: 10pt;

     }

     100%{

        transform: rotate(-720deg);

        font-size: 20pt;

     }

}

 .menu4 {

    width: 50px; height: 50px; border-radius: 50%;

    background-image: url(https://www.foodiesfeed.com/wp-content/uploads/ff-images/2025/06/strawberry-cheesecake-slice-with-mint-garnish.webp);

    background-size: cover;

    animation-name: rot4;

    animation-duration:4.5s;

    justify-content:right; /*align-items: center;*/

    animation-fill-mode: forwards;

}



.t4{

    font-size: 20pt; font-weight: 500;

    animation-name: testo4;

    animation-duration:4.5s; 

    color:rgb(241, 232, 176);

    text-align: center;

}



@keyframes rot4{

    0%{ 

        margin-top: 0; margin-left:25%;

        width: 50px; height: 50px;

        border-radius: 25px;       

    }

    50%{

        margin-left: 50%; margin-top: 10px;

        width: 100px; height: 100px; border-radius: 50%;

        

    }

    100%{ 

        margin-left: 15%; margin-top: 10px; /*distanza finale top*/

        width:200px; height: 100px; border-radius: 75px;

        transform: rotate(360deg); 

    }

}



@keyframes testo4{

    0%{

        font-size: 0pt;

    }

    50%{

        transform: rotate(-360deg);

        font-size: 10pt;

     }

     100%{

        transform: rotate(-720deg);

        font-size: 20pt;

     }

}

 



.menu5 {

    width: 50px; height: 50px; border-radius: 50%;

    background-image: url(https://www.foodiesfeed.com/wp-content/uploads/2023/10/pouring-wine.jpg);

    background-size: cover;

    animation-name: rot5;

    animation-duration:6s;

    justify-content:right; /*align-items: center;*/

    animation-fill-mode: forwards;

   }



.t5{

    font-size: 20pt; font-weight: 500;

    animation-name: testo5;

    animation-duration:6s; 

    color:rgb(241, 232, 176);

    text-align: center;

}



@keyframes rot5{

    0%{ 

    margin-top: 0%; margin-left: 75%;

    width: 50px; height: 50px; border-radius: 25px;       

    }

    50%{

        margin-left: 50%; margin-top: 10px;

        width: 100px; height: 100px; border-radius: 50%;

    }

    100%{ 

       margin-left: 15%; margin-top: 10px; /*distanza finale top*/

        width:200px; height: 100px; border-radius: 75px;

        transform: rotate(360deg); 

    }

}

@keyframes testo5{

    0%{

        font-size: 0pt;

    }

    50%{

        transform: rotate(-360deg);

        font-size: 10pt;

     }

     100%{

        transform: rotate(-720deg);

        font-size: 20pt;

     }

}