body {
  background-color: #306D85;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sushi-container {
  height: 500px;
  width: 500px;
  position: relative;
  /*animation: bounce 2s infinite;*/
}
.roll {
  height: 500px;
  width: 500px;
  position: relative;
  top: -485px;
}
.chopstick-container {
  height: 500px;
  width: 500px;
  position: relative;
  top: -600px;
}


.rice {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  width: 230px;
  height: 50px;
  border-radius: 50%;
  background-color: #fef3d4;
  border: 3px solid black;
  box-shadow: inset -30px -5px 0 3px #ffeab1;
  z-index: 1;
}
.seaweed {
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translate(-50%);
  width: 230px;
  height: 150px;
  background-color: #2e362a;
  border-radius: 0 0 40% 40%;
  border: 3px solid black;
  box-shadow: inset -10px 0 0 10px #21271f;
}
.salmon {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%);
  width: 130px;
  height: 40px;
  background-color: #ff4f20;
  border-radius: 50% 50% 30% 30%;
  border: 3px solid black;
  box-shadow: inset -40px -20px 0 0 #ff3600;
  z-index: 2;
}
.eye-left {
  position: absolute;
  top: 68%;
  left: 35%;
  transform: translate(-50%);
  width: 18px;
  height: 18px;
  background-color: #000;
  border-radius: 50%;
  border: 3px solid black;
}
.shine-left {
  position: absolute;
  top: 69.2%;
  left: 34.1%;
  transform: translate(-50%);
  width: 5px;
  height: 5px;
  background-color: #e7e7e7;
  border-radius: 50%;
}
.eye-right {
  position: absolute;
  top: 69%;
  left: 44%;
  transform: translate(-50%);
  width: 18px;
  height: 18px;
  background-color: #000;
  border-radius: 50%;
  border: 3px solid black;
}
.shine-right {
  position: absolute;
  top: 70%;
  left: 43.3%;
  transform: translate(-50%);
  width: 5px;
  height: 5px;
  background-color: #e7e7e7;
  border-radius: 50%;
}
.mouth {
  position: absolute;
  top: 75%;
  left: 35.7%;
  transform: translate(-50%);
  width: 30px;
  height: 20px;
  background-color: #000;
  border-radius: 0 0 90% 90%;
  transform: rotate(3deg);
}
.tongue {
  position: absolute;
  top: 77.3%;
  left: 37%;
  transform: translate(-50%);
  width: 17px;
  height: 5px;
  background-color: #ff1233;
  border-radius: 50%;
  transform: rotate(3deg);
}
.chopstick1 {
  position: absolute;
  top: 1%;
  left: 52%;
  transform: translate(-50%);
	border-top: 480px solid #b48f48;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	height: 0;
	width: 10px;
    -ms-transform: rotate(-20deg); /* IE 9 */
  	-webkit-transform: rotate(-20deg); /* Safari */
  	transform: rotate(-20deg);
  z-index: 3;
}
.chopstick2 {
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translate(-50%);
	border-top: 450px solid #907031;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	height: 0;
	width: 10px;
    -ms-transform: rotate(-5deg); /* IE 9 */
  	-webkit-transform: rotate(-5deg); /* Safari */
  	transform: rotate(-5deg);
}




/*.heart {
  background-color: #ff4f20;
  display: inline-block;
  height: 15px;
  position: absolute;
  top: 40%;
  left: 49%;
  transform: rotate(-45deg);
  width: 15px;
}
.heart:before,
.heart:after {
  content: "";
  background-color: #ff4f20;
  border-radius: 50%;
  height: 15px;
  position: absolute;
  width: 15px;
}
.heart:before {
  top: -8px;
  left: 0;
}
.heart:after {
  left: 8px;
  top: 0;
}*/

@keyframes bounce {
  0%{transform: translateY(0);
    animation-timing-function: ease-out;
  }
  50% {transform: translateY(-35px);
    animation-timing-function: ease-in;
  }
}

@keyframes eyemove {
	50% { transform: translateY(5px); }
	100% { transform: translateY(0px); }
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-moz-keyframes fade-in { /* Firefox */
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-webkit-keyframes fade-in { /* Safari and Chrome */
    from { opacity: 0; }
    to   { opacity: 1; }
}

.repeat {
  position: absolute;
  top: 300px;
  left: 50%;
  transform: translate(-50%);
  color: #fff;
  opacity: 0;
  cursor: pointer;
}
.repeat:hover {
  transition: 1s;
  color: #bb0d0d;
}