*{
    padding: 0;
    margin: 0;
    box-sizing: 0;
}
body{
background-color: bisque;
display: flex;
justify-content: center;
width: 100vw;
height: 100vh;
}
.Burgerbox{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
position: relative;

}
.Burgerbox:hover .Topbread{
   

    animation: movebread 3s infinite alternate;
}
.Burgerbox:hover .Bottombread{
    animation: movebottombread 3s infinite alternate;

}
.Burgerbox:hover .cheese{
    animation: movecheese 3s infinite alternate;

}
.Burgerbox:hover .onion{
    animation: moveonion 3s infinite alternate;

}
.Burgerbox:hover .ham{
    animation: moveham 3s infinite alternate;

}
.Burgerbox:hover .tomato{
    animation: movetomato 3s infinite alternate;

}
.Burgerbox:hover .latus{
    animation: movelatus 2s infinite alternate;
    animation-duration: 3s;
    z-index: 20;
}

@keyframes moveonion  {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-22px) rotate3d(1, 1, 1, -20deg);
    }
    70% {
        transform: translateY(5px);
    }
    85% {
        transform: translateY(-1px);
    }
}

@keyframes movebread {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-102px) rotate3d(1, 1, 1, 20deg);
    }
    70% {
        transform: translateY(10px);
    }
    85% {
        transform: translateY(-2px);
    }
}

@keyframes movebottombread {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(22px) rotate3d(1, 1, 1, -20deg);
    }
    70% {
        transform: translateY(-5px);
    }
    85% {
        transform: translateY(2px);
    }
}

@keyframes movecheese {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-92px) rotate3d(1, 1, 1, 20deg);
    }
    70% {
        transform: translateY(8px);
    }
    85% {
        transform: translateY(-2px);
    }
}

@keyframes moveham {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-82px) rotate3d(1, 1, 1, 20deg);
    }
    70% {
        transform: translateY(7px);
    }
    85% {
        transform: translateY(-2px);
    }
}

@keyframes movetomato {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-32px) rotate3d(1, 1, 1, -15deg);
    }
    70% {
        transform: translateY(4px);
    }
    85% {
        transform: translateY(-1px);
    }
}

@keyframes movelatus {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px) rotate3d(1, 1, 1, -20deg);
    }
    70% {
        transform: translateY(2px);
    }
    85% {
        transform: translateY(-1px);
    }
  
}

.Topbread {
    width: 250px;
    min-height: 60px;
    background-color: #d79b22;
    border-top-left-radius: 90px;
    border-top-right-radius: 90px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    position: relative;
}
.Topbread .sesame{
background-color: rgb(235, 243, 149);
width: 5px;
height: 10px;
border-radius: 50%;
position: absolute;
transform: rotate(50deg);
top: 20%;


}
.seed1{
    left: 20%;
}
.seed2{
    left: 35%;
}
.seed3{
    left: 50%;
}
.seed4{
    left: 65%;
}
.seed5{
    left: 80%;
}
.cheese, .ham, .tomato, .latus , .onion {
    width: 280px;
    border-radius: 5px;
}

.cheese {
    background-color: rgb(237, 205, 61);
    min-height: 20px;
    border-radius: 20px;
}

.ham {
    background-color: rgb(132, 64, 64);
    min-height: 40px;
    border-radius: 20px;
}

.tomato {
    background-color: #ff5408;
    min-height: 15px;
}

.onion{
    background-color: rgb(190, 92, 190);
    height: 10px;
}
.latus {
    background-color: #78d14c;
    height: 18px;
    display: flex;
    justify-content: space-between;
    overflow: visible;
    position: relative;
}

.circle, .shape1, .shape2, .shape3, .shape4 {
    background-color: #78d14c;
}

.circle {
    width: 50px;
    height: 40px;
    border-radius: 80%;
}

.Bottombread {
    width: 250px;
    min-height: 50px;
    background-color: #bf891e;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}