* {
  margin: 0;
  padding: 0;
}

.cake {
  width: 500px;
  height: 440px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -250px;
  margin-top: -220px;
}

.tcake {
  position: absolute;
  z-index: 30;
  z-index: 30;
  top: 57px;
  left: 182px;
  overflow: hidden;
  width: 220px;
  height: 135px;
  -webkit-transform: rotate(36deg);
  -ms-transform: rotate(36deg);
  transform: rotate(36deg);
  border-radius: 130% 120% 130% 115%;
  background: #b0221e;
  background: -webkit-linear-gradient(0deg, #b0221e 0%, #731503 100%);
  background: linear-gradient(90deg, #b0221e 0%, #731503 100%);
}

.tcake::before {
  position: absolute;
  top: -20px;
  left: 0;
  width: 200px;
  height: 130px;
  content: '';
  -webkit-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
  border-radius: 100%;
  background: #b92422;
  background: -webkit-linear-gradient(0deg, #b92422 0%, #881b08 100%);
  background: linear-gradient(90deg, #b92422 0%, #881b08 100%);
}

.mcake {
  position: absolute;
  z-index: 20;
  top: 50px;
  left: 40px;
  overflow: hidden;
  width: 415px;
  height: 280px;
  -webkit-transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  transform: rotate(25deg);
  border-radius: 60% 70% 55% 65%;
  background: #edb334;
  background: -webkit-linear-gradient(0deg, #edb334 0%, #b95500 100%);
  background: linear-gradient(90deg, #edb334 0%, #b95500 100%);
}

.mcake::before {
  position: absolute;
  top: -20px;
  left: 10px;
  display: block;
  width: 410px;
  height: 250px;
  content: '';
  -webkit-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  border-radius: 100% 50% / 75%;
  background: #edb334;
  background: -webkit-linear-gradient(0deg, #edb334 0%, #ec7700 100%);
  background: linear-gradient(90deg, #edb334 0%, #ec7700 100%);
}

.bcake {
  position: absolute;
  z-index: 10;
  top: 113px;
  left: 40px;
  overflow: hidden;
  width: 320px;
  height: 290px;
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
  border-radius: 60% 40% 120% 105%;
  background: #c26707;
  background: -webkit-linear-gradient(90deg, #c26707 0%, #8c4a10 100%);
  background: linear-gradient(0deg, #c26707 0%, #8c4a10 100%);
}

.bcake::before {
  position: absolute;
  z-index: 15;
  top: -85px;
  left: -60px;
  display: block;
  width: 395px;
  height: 300px;
  content: '';
  -webkit-transform: rotate(-42deg);
  -ms-transform: rotate(-42deg);
  transform: rotate(-42deg);
  border-radius: 100% / 75%;
  background: #bf6507;
  background: -webkit-linear-gradient(0deg, #bf6507 0%, #78380b 100%);
  background: linear-gradient(90deg, #bf6507 0%, #78380b 100%);
}