body {
background: #F0D8C0;
}

.container {
  position: absolute;
  left: 50%;
  top:15%;
  transform: translate(-50%);
}

.text {
  font-family: 'Roboto', sans-serif;
  letter-spacing: 4px;
  font-size: 60px;
  color: #ffff;
  text-align: center;
  text-transform: uppercase;
}

.text p {
  font-size: 20px;
  text-transform: none;
}

.bread-bun {
  background-color: #F4C075;
  margin: auto;
  width: 50%;
  padding: 30px;
  top: 100%;
  margin-top: 100px;
  border-radius: 100px 100px 0px 0px;
  height: 40px;
  border-bottom: 6px solid #E08037;
}

.tomat-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: auto;
  justify-content: center;
}

.tomat {
  background:  #fb3434;
  width: 20%;
  height: 15px;
  border-radius: 30px;
  border-bottom: 3px solid #CB0001;
}

.lettuce {
  background:#6DDD76;
  width: 75%;
  margin: auto;
  height: 10px;
  margin: auto;
  border-radius: 0 0 20px 20px;
}

.onion {
  background-color: #C14b64;
  height: 10px;
  width: 50%;
  margin: auto;
  border-radius: 30px;
}

.cheese {
  background: #FFA600;
  width: 70%;
  height: 10px;
  margin: auto;
}

.patty {
  background-color: #603102;
  height: 30px;
  border-radius: 30px;
  border-bottom: 16px solid #402408;
  width: 65%;
  margin: auto;
}

.bread-bun-1 {
  background-color: #F4C075;
  margin: auto;
  width: 60%;
  border-radius: 0px 0px 100px 100px;
  height: 40px;
  border-bottom: 16px solid #E08037;
}

.shake-vertical:hover {
	-webkit-animation: shake-vertical 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: shake-vertical 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-9-14 23:26:24
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-vertical
 * ----------------------------------------
 */
@-webkit-keyframes shake-vertical {
  0%,
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  80% {
    -webkit-transform: translateY(6.4px);
            transform: translateY(6.4px);
  }
  90% {
    -webkit-transform: translateY(-6.4px);
            transform: translateY(-6.4px);
  }
}
@keyframes shake-vertical {
  0%,
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  80% {
    -webkit-transform: translateY(6.4px);
            transform: translateY(6.4px);
  }
  90% {
    -webkit-transform: translateY(-6.4px);
            transform: translateY(-6.4px);
  }
}