body{
    
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;
    /* justify-content: center;
    align-items: center;
    height: 100vh; */
}

 .board{
     width: 1100px; 
     /* background-color:   hsl(13, 31%, 94%); */
       height: 860px;  
    display: flex;
      flex-wrap: wrap;  
      
     position: relative;
     box-shadow:  0 5px 10px rgba(0, 0, 0, 0.1), 
     0 5px 5px rgba(0, 0, 0, 0.4);

} 
.deserts{
    display: flex;
    flex-wrap: wrap;
    width: 800px;
    justify-content: space-evenly;

}

.dish-box{
    width: 230px;
     height: 190px; 
    /* background-color: red; */
    margin: 10px;
   border-radius: 10px;
  
 
}

 .dish-box:nth-of-type(3){
    /* display: flex;
   justify-content: flex-end;  */
   position: absolute;
   width: 300px;
   right: 0;
   bottom: 10;
   border: 2px solid rgb(179, 155, 155);
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
   height: 490px;
   /* height: 550px; */
  /* background-color: aqua; */
}

.dish-box:nth-of-type(1){
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    position: relative;
    background-image: url(./assets/images/image-waffle-desktop.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    /* position: absolute; */
    
}
 #but1{
    border-radius: 50px;
    padding: 10px;
     position: absolute;
    bottom: -10%; 
    left: 50%; 
    transform: translateX(-50%);
    width: 150px;   
    display:  flex;
    justify-content: space-around;
    align-items: center;

 }
 
 #but1:hover{
    background-color: orange;
 }
 .dish-box:nth-of-type(2){
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    position: relative;
    background-image: url(./assets/images/image-creme-brulee-desktop.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

#but2{
    border-radius: 50px;
    padding: 10px;
    position: absolute;
    bottom: -10%; /* Move it 50% below the bottom edge of the parent */
    left: 50%; /* Center the button horizontally */
    transform: translateX(-50%);
    width: 150px;
    display:  flex;
    justify-content: space-around;
    align-items: center;
}

.dish-box:nth-of-type(4){
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    position: relative;
    background-image: url(./assets/./images/image-macaron-desktop.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

#but4{
    border-radius: 50px;
    padding: 10px;
     position: absolute;
    bottom: -10%; 
    left: 50%; 
    transform: translateX(-50%);
    width: 150px;   
    display:  flex;
    justify-content: space-around;
    align-items: center;

}
.dish-box:nth-of-type(5){
    /* display: flex;
    justify-content: flex-end;
    flex-direction: column; */
    position: relative;
    background-image: url(./assets/./images/image-tiramisu-desktop.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

#but5{
    border-radius: 50px;
    padding: 10px;
     position: absolute;
    bottom: -10%; 
    left: 50%; 
    transform: translateX(-50%);
    width: 150px;   
    display:  flex;
    justify-content: space-around;
    align-items: center;
}

.dish-box:nth-of-type(6){
    /* display: flex;
    justify-content: flex-end;
    flex-direction: column; */
    position: relative;
    background-image: url(./assets/./images/image-baklava-desktop.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
#but6{
    border-radius: 50px;
    padding: 10px;
     position: absolute;
    bottom: -10%; 
    left: 50%; 
    transform: translateX(-50%);
    width: 150px;   
    display:  flex;
    justify-content: space-around;
    align-items: center;
}

.dish-box:nth-of-type(7){
    /* display: flex;
    justify-content: flex-end;
    flex-direction: column; */
    position: relative;
    background-image: url(./assets/./images/image-meringue-desktop.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

#but7{
    border-radius: 50px;
    padding: 10px;
    position: absolute;
    bottom: -10%; /* Move it 50% below the bottom edge of the parent */
    left: 50%; /* Center the button horizontally */
    transform: translateX(-50%);
    width: 150px;
    display:  flex;
    justify-content: space-around;
    align-items: center;
}

.dish-box:nth-of-type(8){
    /* display: flex;
    justify-content: flex-end;
    flex-direction: column; */
    position: relative;
    background-image: url(./assets/./images/image-cake-desktop.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

#but8{
    border-radius: 50px;
    padding: 10px;
    position: absolute;
    bottom: -10%; /* Move it 50% below the bottom edge of the parent */
    left: 50%; /* Center the button horizontally */
    transform: translateX(-50%);
    width: 150px;
    display:  flex;
    justify-content: space-around;
    align-items: center;
}
.dish-box:nth-of-type(9){
    /* display: flex;
    justify-content: flex-end;
    flex-direction: column; */
    position: relative;
    background-image: url(./assets/./images/image-brownie-desktop.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.num{
    position: absolute;
    top: 380px;
   
   font-family: Verdana, Geneva, Tahoma, sans-serif;

}
#sub1{
    width: 250px;
    padding: 10px;
    border: 2px solid;
    border-radius: 20px;
    cursor: pointer;
}
#sub1:hover{
    background-color: orange;
    
}
.submit{
    position: absolute;
    top: 430px;
   
    
    
}
.dum1{
    display: flex;
    justify-content: space-around;
}

#but9{
    border-radius: 50px;
    padding: 10px;
    position: absolute;
    bottom: -10%; /* Move it 50% below the bottom edge of the parent */
    left: 50%; /* Center the button horizontally */
    transform: translateX(-50%);
    width: 150px;
    display:  flex;
    justify-content: space-around;
    align-items: center;
}

.dish-box:nth-of-type(10){
    /* display: flex;
    justify-content: flex-end;
    flex-direction: column; */
    position: relative;
    background-image: url(./assets/./images/image-panna-cotta-desktop.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

#but10{
    border-radius: 50px;
    padding: 10px;
    position: absolute;
    bottom: -10%; /* Move it 50% below the bottom edge of the parent */
    left: 50%; /* Center the button horizontally */
    transform: translateX(-50%);
    width: 150px;
    display:  flex;
    justify-content: space-around;
    align-items: center;
}

/* .deserts h4{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
} */

#start{
   
  width: 300px;
  border: 2px solid;
  border-radius: 10px;
  padding: 8px;

}
#start:hover{
    background-color: orange;
}
.con1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
   /* Ensure the container has a height */
   
    /* Optional for debugging */
}

.confirm{
   
    width: 400px;
    /* height: 210px; */
    display: none;
     
    position: absolute;
    bottom: 500px;
    left: 200px;
    z-index: 999;
     background-color:   hsl(13, 31%, 94%); 
}

.mini{
   width: 220px; 
   /* background-color: red;  */
  position: absolute;
    bottom: -40%; /* Move it 50% below the bottom edge of the parent */
   
   
}
.mini .m1:nth-of-type(3) {
    color: orange;
}

.mini .m1:nth-of-type(1) {
   font-weight: lighter;
   font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif ;
    
}

.mini .m1:nth-of-type(2) {
    font-weight: lighter;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif ;
     
 }
 
 .mini2{
    width: 220px;
    position: absolute;
    bottom: -40%;
 }

 .mini2 .m1:nth-of-type(3) {
    color: orange;
}

/* #but1 #svg1:nth-of-type(1){
    display: flex;
    justify-content: flex-end;
} */
/* #but1:nth-of-type(1){
    display: flex;
    justify-content: flex-end;
} */
/* .dish-box {
    display: flex;
    justify-content: space-between;
    
} 


    */

 
 #svg2{
    display: none;
 }

 #svg1{
    display: none;
 }

 #but2:hover{
    background-color: orange;
 }

 #d1{
    display: none;
 }

 #i1{
    display: none;
 }

 
@media(max-width:500px){
    body{
    width: 100%;
    }
    /* .before{
        width: 400px;
     display: flex;
      flex-direction: column;
      align-items: flex-start;
    } */
     .confirm{
        width: 80%;
        position:absolute;
        left: 40px;
     
     }
    .con1{
        
        background-color:   hsl(13, 31%, 94%);  
        border-radius: 20px;
        border: 1px solid  hsl(20, 81%, 38%);
    }
  
   .board{
 
    width: 100%;
   box-shadow: none;
   display: flex;
  
   }
   .deserts{
    display: flex;
    flex-direction: column;
    justify-content: center; 
     align-items: center; 
  

  
  
   } 
  
   
   .mini{
    
    width: 220px; 
    height: 100px;
       /* background-color: red;     */
   position: absolute;
     bottom: -60%; /* Move it 50% below the bottom edge of the parent */
    
    display: flex;
    flex-direction: column;
   
   justify-content: flex-start;

 }

  .dish-box:nth-of-type(2){
    position: relative;
    top: 90px; 
 } 

 .mini2{
    width: 220px; 
    height: 100px;
        /* background-color: red;      */
   position: absolute;
     bottom: -60%; /* Move it 50% below the bottom edge of the parent */
    
    display: flex;
    flex-direction: column;
   
   justify-content: flex-start;
   

 }

 .dish-box:nth-of-type(4){
    position: relative;
  top: 160px; 
 }

 .dish-box:nth-of-type(5){
    position: relative;
  top: 260px; 
 }
 .dish-box:nth-of-type(6){
    position: relative;
  top: 360px; 
 }
 .dish-box:nth-of-type(7){
    position: relative;
  top: 460px; 
 }
 .dish-box:nth-of-type(8){
    position: relative;
  top: 560px; 
 }
 .dish-box:nth-of-type(9){
    position: relative;
  top: 660px; 
 }
 .dish-box:nth-of-type(10){
    position: relative;
  top: 760px; 
 }
 
 .dish-box:nth-of-type(3){
   
    position: absolute;
    right: 0;
    bottom: 0;
    top: 2700px;


    
 }

 
 
 
 
}