* {
	 box-sizing: border-box;
}
 html, body {
	 height: 100%;
	 padding: 0;
	 margin: 0;
}
 body {
	 overflow: hidden;
}
 main {
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 max-width: 500px;
	 height: 100%;
	 margin: auto;
	 padding: 12px;
}
 figure {
	 width: 100%;
	 height: auto;
	 max-width: 128px;
	 animation: figure 1s ease-in-out infinite;
	 transform: translateZ(0);
}
 .bun {
	 position: relative;
	 width: 128px;
}
 .bun__top {
	 width: 114px;
	 height: 70px;
	 margin-left: 7px;
	 border-top-width: 0;
	 animation: bun-top 1s ease-in-out infinite;
}
 .bun__top:before, .bun__top:after {
	 content: "";
	 position: absolute;
	 width: 100%;
	 background-color: #ff7f07;
	 box-shadow: inset rgba(0, 0, 0, 0.1) 21px 0 0;
	 z-index: -1;
}
 .bun__top:before {
	 top: 0;
	 left: -7px;
	 height: 100%;
	 border: 7px solid #701e13;
	 border-radius: 100% 100% 0 0;
}
 .bun__top:after {
	 bottom: 0;
	 left: -7px;
	 height: 40%;
	 border-right: 7px solid #701e13;
	 border-left: 7px solid #701e13;
}
 .bun__bottom {
	 height: 30px;
	 border-radius: 0 0 20px 20px;
	 background-color: #ff7f07;
	 border: 7px solid #701e13;
	 box-shadow: inset rgba(0, 0, 0, 0.1) 21px 0 0;
	 z-index: 2;
	 animation: bun-bottom 1s ease-in-out infinite;
}
 .seeds {
	 position: absolute;
	 top: 62px;
	 left: 0;
	 z-index: 2;
}
 .seed {
	 position: absolute;
	 width: 0;
	 height: 0;
	 border-style: solid;
	 border-width: 0 2px 3px 2px;
	 border-color: transparent transparent #ffc86d transparent;
}
 .seed:after {
	 content: "";
	 position: absolute;
	 top: 2px;
	 left: -2px;
	 width: 4px;
	 height: 3px;
	 background-color: #ffc86d;
	 border-radius: 100%;
}
 .seed:nth-child(1) {
	 bottom: 26px;
	 left: 10px;
}
 .seed:nth-child(2) {
	 bottom: 10px;
	 left: 16px;
}
 .seed:nth-child(3) {
	 bottom: 39px;
	 left: 27px;
}
 .seed:nth-child(4) {
	 bottom: 22px;
	 left: 32px;
}
 .seed:nth-child(5) {
	 bottom: 48px;
	 left: 46px;
}
 .seed:nth-child(6) {
	 bottom: 40px;
	 left: 62px;
}
 .seed:nth-child(7) {
	 bottom: 45px;
	 left: 78px;
}
 .seed:nth-child(8) {
	 bottom: 32px;
	 left: 96px;
}
 .seed:nth-child(9) {
	 bottom: 9px;
	 left: 45px;
}
 .seed:nth-child(10) {
	 bottom: 14px;
	 left: 84px;
}
 .seed:nth-child(11) {
	 bottom: 10px;
	 left: 102px;
}
 .tomato {
	 position: relative;
	 width: 144px;
	 height: 24px;
	 margin: -7px -8px;
	 background-color: #f20;
	 border: 7px solid #701e13;
	 border-radius: 100px;
	 z-index: 3;
	 animation: tomato 1s ease-in-out infinite;
}
 .tomato:before {
	 content: "";
	 position: absolute;
	 top: 0;
	 left: 0;
	 height: 100%;
	 background-color: rgba(0, 0, 0, 0.1);
	 width: 29px;
}
 .lettuce {
	 position: relative;
	 width: 140px;
	 height: 25px;
	 margin: -7px -6px;
	 border-radius: 16px 16px 0 0;
	 z-index: 2;
	 animation: lettuce 1s ease-in-out infinite;
}
 .leaf {
	 position: absolute;
	 top: 0;
	 width: 20px;
	 height: 30px;
	 background-color: #b3ba27;
	 border: 7px solid #701e13;
	 border-radius: 12px;
	 z-index: 1;
}
 .leaf:nth-child(1) {
	 left: 0;
	 background-color: #7e911d;
}
 .leaf:nth-child(2) {
	 left: 24px;
}
 .leaf:nth-child(2):after {
	 content: "";
	 position: absolute;
	 top: 0;
	 left: 0;
	 height: 100%;
	 background-color: rgba(0, 0, 0, 0.1);
	 width: 3px;
	 background-color: #7e911d;
	 border-radius: 0 0 0 100px;
}
 .leaf:nth-child(3) {
	 left: 48px;
}
 .leaf:nth-child(4) {
	 left: 72px;
}
 .leaf:nth-child(5) {
	 left: 96px;
}
 .leaf:nth-child(6) {
	 left: 120px;
}
 .cover {
	 position: absolute;
	 top: -14px;
	 left: 7px;
	 width: 126px;
	 height: 32px;
	 background-color: #b3ba27;
	 border-top: 7px solid #701e13;
	 z-index: 2;
}
 .cover:before {
	 content: "";
	 position: absolute;
	 top: 0;
	 left: 0;
	 height: 100%;
	 background-color: rgba(0, 0, 0, 0.1);
	 background-color: #7e911d;
	 width: 27px;
	 border-radius: 12px 0 0 0;
}
 .arch {
	 position: absolute;
	 bottom: -2px;
	 width: 18px;
	 height: 10px;
	 background-color: #edb039;
	 border: 7px solid #701e13;
	 border-bottom-width: 0;
	 border-radius: 100px 100px 0 0;
}
 .arch:nth-child(1) {
	 left: 6px;
}
 .arch:nth-child(1):before {
	 content: "";
	 position: absolute;
	 top: 0;
	 left: 0;
	 height: 100%;
	 background-color: rgba(0, 0, 0, 0.1);
	 width: 100%;
}
 .arch:nth-child(2) {
	 left: 30px;
}
 .arch:nth-child(3) {
	 left: 54px;
}
 .arch:nth-child(4) {
	 left: 78px;
}
 .arch:nth-child(5) {
	 left: 102px;
}
 .cheese {
	 position: relative;
	 width: 128px;
	 height: 32px;
	 margin-top: -18px;
	 background-color: #edb039;
	 border: 7px solid #701e13;
	 border-top-width: 0;
}
 .cheese:before {
	 content: "";
	 position: absolute;
	 top: 0;
	 left: 0;
	 height: 100%;
	 background-color: rgba(0, 0, 0, 0.1);
	 width: 21px;
}
 .burger {
	 position: relative;
	 width: 144px;
	 height: 24px;
	 margin: -7px -8px;
	 background-color: #d76817;
	 border: 7px solid #701e13;
	 border-radius: 100px;
	 animation: burger 1s ease-in-out infinite;
}
 .burger:before {
	 content: "";
	 position: absolute;
	 top: 0;
	 left: 0;
	 height: 100%;
	 background-color: rgba(0, 0, 0, 0.1);
	 width: 29px;
}
 .spot {
	 position: absolute;
	 width: 4px;
	 height: 4px;
	 border-radius: 100%;
	 background-color: #b34b10;
}
 .spot:nth-child(1) {
	 top: 3px;
	 left: 6px;
}
 .spot:nth-child(2) {
	 top: 4px;
	 left: 20px;
	 width: 2px;
	 height: 2px;
}
 .spot:nth-child(3) {
	 top: 3px;
	 left: 32px;
	 width: 3px;
	 height: 3px;
}
 .spot:nth-child(4) {
	 top: 4px;
	 left: 46px;
	 width: 2px;
	 height: 2px;
}
 .spot:nth-child(5) {
	 top: 5px;
	 left: 59px;
	 width: 3px;
	 height: 3px;
}
 .spot:nth-child(6) {
	 top: 3px;
	 left: 70px;
	 width: 2px;
	 height: 2px;
}
 .spot:nth-child(7) {
	 top: 3px;
	 left: 78px;
	 width: 5px;
	 height: 5px;
}
 .spot:nth-child(8) {
	 top: 2px;
	 left: 88px;
	 width: 2px;
	 height: 2px;
}
 .spot:nth-child(9) {
	 top: 4px;
	 left: 96px;
	 width: 3px;
	 height: 3px;
}
 .spot:nth-child(10) {
	 top: 3px;
	 left: 106px;
	 width: 4px;
	 height: 4px;
}
 .spot:nth-child(11) {
	 top: 3px;
	 left: 114px;
	 width: 2px;
	 height: 2px;
}
 .spot:nth-child(12) {
	 top: 3px;
	 left: 120px;
	 width: 4px;
	 height: 4px;
}
 .face {
	 height: 26px;
	 animation: face 1s ease-in-out infinite;
}
 .eye {
	 position: absolute;
	 bottom: 20px;
	 width: 20%;
	 height: 30%;
	 background-color: #ff7f07;
	 border: 7px solid #701e13;
	 border-radius: 100%;
}
 .eye:before {
	 content: "";
	 position: absolute;
	 bottom: -7px;
	 left: -7px;
	 width: calc(100% + 15px);
	 height: calc(50% + 7px);
	 background-color: #ff7f07;
}
 .eye__left {
	 left: 42px;
}
 .eye__right {
	 left: 72px;
}
 .mouth {
	 position: absolute;
	 bottom: 14px;
	 left: 57px;
	 width: 20%;
	 height: 30%;
	 border-radius: 100%;
	 overflow: hidden;
}
 .mouth:before {
	 content: "";
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 width: 100%;
	 height: 50%;
	 background-color: #701e13;
}
 .mouth:after {
	 content: "";
	 position: absolute;
	 bottom: -5px;
	 left: 6px;
	 width: 11px;
	 height: 11px;
	 background-color: #f20;
	 border-radius: 100%;
}
 .shadow {
	 width: 126px;
	 height: 14px;
	 background-color: rgb(107, 107, 107);
	 border-radius: 100px;
	 z-index: -1;
	 margin-top: -6px;
	 margin-left: -6px;
	 animation: shadow 1s ease-in-out infinite;
}
 @keyframes figure {
	 25% {
		 transform: translateY(-30px);
	}
	 50% {
		 transform: translateY(0);
	}
}
 @keyframes bun-top {
	 10% {
		 height: 54px;
	}
	 25% {
		 height: 70px;
	}
	 40% {
		 transform: translateY(-40px);
	}
	 70% {
		 transform: translateY(0);
	}
}
 @keyframes tomato {
	 40% {
		 transform: rotate(2deg) translateY(-16px);
	}
	 50% {
		 transform: rotate(-2deg) translateY(-8px);
	}
	 70% {
		 transform: rotate(0) translateY(0);
	}
}
 @keyframes lettuce {
	 40% {
		 transform: rotate(-2deg) translateY(-14px);
	}
	 50% {
		 transform: rotate(0) translateY(-7px);
	}
	 70% {
		 transform: rotate(0) translateY(0);
	}
}
 @keyframes burger {
	 40% {
		 transform: rotate(-2deg) translateY(-8px);
	}
	 50% {
		 transform: rotate(2deg) translateY(-4px);
	}
	 70% {
		 transform: rotate(0) translateY(0);
	}
}
 @keyframes bun-bottom {
	 10% {
		 height: 20px;
	}
	 25% {
		 height: 30px;
	}
}
 @keyframes face {
	 25% {
		 height: 20px;
	}
	 50% {
		 height: 26px;
	}
}
 @keyframes shadow {
	 25% {
		 width: 80px;
		 transform: translate(28px, 22px);
	}
	 50% {
		 width: 126px;
		 transform: translate(0, 0);
	}
}