style.css

html,
body {
  height: 100%;
  overflow-x: hidden;
}

* {
  margin: 0;
  padding: 0;
}

#wrapper {
  width: 100vw;
  height: 300px;
  margin: 0 auto;
  background: linear-gradient(140deg, #f9a16366, #e4615e57);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* chocolate */
#container {
  height: 138px;
  width: 500px;
  margin: 0 auto;
  background: linear-gradient(140deg, #8b4513, #793c11);
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-right-color: rgba(0, 0, 0, 0.3);
  border-bottom-color: rgba(0, 0, 0, 0.3);
  box-shadow: 7px 7px 0 -2px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
}

.piece {
  width: 90px;
  height: 20px;
  padding: 22px 0 18px;
  left: 4px;
  background: #7d3e11;
  border: 5px solid rgba(255, 255, 255, 0.35);
  border-right-color: rgba(0, 0, 0, 0.3);
  border-bottom-color: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  box-shadow: inset 0 0 0 14px #8b4513,
    inset 0 -16px 1px rgba(255, 255, 255, 0.3),
    inset 17px 17px 1px rgba(0, 0, 0, 0.25);
  text-align: center;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.15);
  color: rgba(0, 0, 0, 0.4);
}

/* stars */

.sky {
  width: 100%;
  height: 300px;
  background: linear-gradient(
    180deg,
    rgba(2, 2, 11, 1) 35%,
    rgba(13, 13, 71, 1) 100%,
    rgba(0, 212, 255, 1) 100%
  );
  position: relative;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;

  -webkit-box-shadow: 2px 0px 37px 16px rgba(238, 230, 231, 1);
  -moz-box-shadow: 2px 0px 37px 16px rgba(238, 230, 231, 1);
  box-shadow: 2px 0px 37px 16px rgba(238, 230, 231, 1);
  right: 80px;
  top: 50px;
}

.moon {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.moon.one {
  background: #dcdcdcc4;
  right: 80px;
  top: 20px;
}

.moon.two {
  right: 99px;
  top: 20px;
  background: rgba(2, 2, 11, 1);
  box-shadow: 10px 0 5px -2px #888;
}

.bar {
  position: absolute;
  height: 0.1px;
  background: #46444b;
}

.bar.bar1 {
  right: 150px;
  top: 90px;
  width: 10px;
}

.bar.bar2 {
  right: 110px;
  top: 60px;
  width: 6px;
}

.bar.bar3 {
  right: 120px;
  top: 33px;
  width: 11px;
}

/* payphone */

.payphone_wrap {
  width: 100vw;
  margin: 0 auto;
}

.payphone_cont {
  margin: 10px;
  top: 10px;
  left: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.head1 {
  border-radius: 1000px 1000px 0px 0px;
  width: 220px;
  height: 60px;
  background: #c52724;
  display: flex;
  justify-content: center;
  align-items: center;
}

.headOne {
  border-radius: 1000px 1000px 0px 0px;
  width: 200px;
  height: 50px;
  background: #991e23;
  box-shadow: inset 0px 7px 0px #671416;
}

.head2 {
  width: 160px;
  height: 50px;
  background: #c52724;
  box-shadow: inset -1px 18px 0px #932023;
  display: flex;
  justify-content: center;
  align-items: center;
}

.telephone {
  background: cornsilk;
  padding: 5px;
  font-weight: bold;
  box-shadow: inset 1px 7px 11px #6a1019;
}

.payphone {
  width: 200px;
  height: 350px;
  background: #c52724;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #751e1e;
}

.squares_top {
  flex-direction: column;
  background: #991e23;
  width: 180px;
  height: 330px;
  box-shadow: inset -1px 11px 0px #6d1519;
  display: flex;
  justify-content: center;
  align-items: center;
}

.squares_cont {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #cc232a;
  width: 132px;
  grid-gap: 5px;
  padding: 5px;
  height: 250px;
  box-shadow: inset 0px -6px 0px #6a1019;
}

.squares_bottom {
  margin-top: 7px;
  background: #cc232a;
  width: 120px;
  height: 30px;
  box-shadow: inset 0px -6px 0px #6a1019;
}

.square {
  background: #211f20;
  width: 40px;
  height: 40px;
}

.square.dark {
  background: linear-gradient(
    0deg,
    rgba(47, 46, 47, 1) 0%,
    rgba(32, 32, 32, 1) 100%,
    rgba(0, 212, 255, 1) 100%
  );
}

.square.gradient {
  background: linear-gradient(
    0deg,
    rgba(63, 61, 64, 1) 14%,
    rgba(32, 32, 32, 1) 100%,
    rgba(0, 212, 255, 1) 100%
  );
}

.square.light {
  background: linear-gradient(
    0deg,
    rgba(127, 125, 128, 1) 0%,
    rgba(32, 32, 32, 1) 100%,
    rgba(0, 212, 255, 1) 100%
  );
}

.end {
  width: 220px;
  border: 1px solid #751e1e;
  height: 30px;
  background: #c52724;
}

/* pizza */
.pizza_menu {
  margin-right: 20px;
  width: 80px;
  height: 100px;
  display: flex;
  flex-direction: column;
  background: #fff;
  justify-content: space-around;
  align-items: center;
}

.menu {
  font-size: 4px;
}

.centered_flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pizza {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #fea500;
  box-shadow: inset 0px 0px 11px #231a1b;
}

.brown_circle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: #ae2b00;
}

.red_circle {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: #fe0002;
}

.yellow_circle {
  width: 165px;
  height: 165px;
  border-radius: 50%;
  background: #f7bf22;
  position: relative;
}

.olive {
  position: absolute;
  width: 15px;
  height: 10px;
  background: black;
  border-radius: 44%;
}

.pizza_circle {
  position: absolute;
  width: 22px;
  height: 22px;
  background: radial-gradient(
    circle,
    rgba(247, 170, 56, 1) 0%,
    rgba(231, 114, 81, 1) 14%,
    rgba(169, 32, 0, 1) 46%
  );
  border-radius: 50%;
  box-shadow: 1px 3px 12px #ffffff;
}

.m1 {
  right: 78px;
  top: 4px;
}

.m2 {
  right: 120px;
  top: 50px;
}

.m3 {
  right: 40px;
  top: 90px;
}

.m4 {
  right: 85px;
  top: 90px;
}

.m5 {
  right: 70px;
  top: 52px;
}

.m6 {
  right: 30px;
  top: 40px;
}

.m7 {
  right: 80px;
  top: 135px;
}

.ol_1 {
  top: 129px;
  right: 60px;
}

.olive::after {
  background: #ffffff6b;
  width: 6px;
  top: 6px;
  left: 2px;
  height: 1px;
  content: '';
  position: absolute;
}

.ol_2 {
  top: 15px;
  right: 50px;
}

.ol_3 {
  top: 90px;
  right: 130px;
}

.ol_4 {
  top: 25px;
  right: 120px;
}

.ol_5 {
  top: 40px;
  right: 85px;
}

.ol_6 {
  top: 70px;
  right: 50px;
}

.ol_7 {
  top: 90px;
  right: 11px;
}

.ol_8 {
  top: 119px;
  right: 103px;
}

.ol_9 {
  top: 77px;
  right: 100px;
}

.ol_10 {
  top: 44px;
  right: 15px;
}

/* android */
.android_cont {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  margin-top: 100px;
}

.android_head {
  background: #36b39b;
  border-radius: 1000px 1000px 0px 0px;
  width: 120px;
  height: 70px;
  position: relative;
}

.android_eye1,
.android_eye2 {
  position: absolute;
  background: #fff;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  top: 25px;
}

.android_eye1 {
  right: 30px;
}

.android_eye2 {
  left: 26px;
}

.android_ant {
  position: absolute;
  background: #36b39b;
  width: 60px;
  height: 10px;
  z-index: -1;
  border-radius: 10px;
}

.ant1 {
  right: -9px;
  transform: rotateZ(135deg);
}

.ant2 {
  left: -9px;
  transform: rotateZ(60deg);
}

.android_body {
  position: absolute;
  background: #36b39b;
  width: 120px;
  height: 120px;
  top: 80px;
  border-radius: 0px 0px 15px 15px;
}

.android_feet1,
.android_feet2 {
  position: absolute;
  background: #36b39b;
  width: 20px;
  height: 60px;
  top: 180px;
  border-radius: 0px 0px 15px 15px;
}

.android_feet1 {
  right: 10px;
}

.android_feet2 {
  left: 10px;
}

.android_arm1,
.android_arm2 {
  position: absolute;
  background: #36b39b;
  width: 30px;
  height: 90px;
  top: 80px;
  border-radius: 15px;
}

.android_arm1 {
  right: -35px;
}

.android_arm2 {
  left: -35px;
}

/* shirt */
.shirt_cont {
  height: 500px;
  width: 500px;
  margin: 0 auto;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shirt {
  height: 420px;
  width: 320px;
  background: #fff;
  position: relative;
  border-radius: 108px 108px 0px 0px;
  box-shadow: -19px 6px 12px 3px #c9c9c9;
}

.shirt_neck {
  position: absolute;
  height: 40px;
  width: 90px;
  z-index: 100;
  background: #e2dfdf;
  left: 33%;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  border: 4px solid #353537;
}

.shirt_design {
  z-index: 99;
  border-radius: 108px 108px 0px 0px;
  position: absolute;
  height: 420px;
  width: 320px;
  background: pink;
  display: grid;
  grid-template-columns: repeat(11, 32px);
  overflow: hidden;
}

.grid1 {
  background: #f0f0f0;
}

.grid2 {
  background: #711b24;
}

.grid3 {
  background: #28282a;
}

.shirt_hand1,
.shirt_hand2 {
  position: absolute;
  height: 92px;
  width: 157px;
  background: #f0f0f0;

  top: 60px;
}

.shirt_hand1 {
  left: 69%;
  transform: rotate(44deg);
  border-radius: 16px 0px 0px 0px;
}

.shirt_hand2 {
  right: 69%;
  transform: rotate(-44deg);
  box-shadow: -20px -17px 12px 3px #c9c9c9;
  border-radius: 0px 16px 0px 0px;
}

/* window */
.window_cont {
  background: #c7c7c7;
  width: 500px;
  height: 400px;
  margin: 0 auto;
  position: relative;
}

.window {
  background: linear-gradient(
    180deg,
    rgb(88, 138, 197) 19%,
    rgb(87, 157, 193) 66%,
    rgb(9, 116, 134) 92%
  );

  margin: 0 auto;
  width: 300px;
  height: 300px;
  border: 16px solid #e4e4e4;
  display: flex;
}

.wind1 {
  background: #e0e0e0;
  width: 150px;
  height: 300px;
  box-shadow: inset 11px -5px 0px #464141;
  clip-path: polygon(7% 10%, 48% 16%, 49% 80%, 6% 92%, 0 91%, 0% 11%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.wind_squares_cont {
  width: 150px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.wind2 {
  background: #e0e0e0;
  width: 150px;
  height: 300px;
  clip-path: polygon(94% 12%, 52% 16%, 53% 81%, 94% 90%, 100% 88%, 100% 15%);
  box-shadow: inset -10px -5px 0px #464141;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wind2 .wind_squares_cont {
  align-items: flex-end;
}

.wind_square {
  width: 40px;
  height: 90px;
}

.ml {
  margin-left: 20px;
}

.mr {
  margin-right: 20px;
}

.incline-bottom {
  clip-path: polygon(0 12%, 100% 0, 100% 78%, 0 100%);
  background: linear-gradient(
    180deg,
    rgba(88, 152, 194, 1) 27%,
    rgba(84, 155, 191, 1) 53%,
    rgba(56, 141, 170, 1) 78%
  );
  box-shadow: inset -2px -3px 0px #4641418a;
}

.incline-top {
  clip-path: polygon(0 0, 100% 14%, 100% 85%, 0 95%);
  background: linear-gradient(
    180deg,
    rgba(88, 138, 196, 1) 27%,
    rgba(88, 143, 196, 1) 53%,
    rgba(87, 146, 195, 1) 78%
  );
  box-shadow: inset -3px -3px 0px #4641418a;
}

.incline-right-bottom {
  clip-path: polygon(0 0, 100% 14%, 100% 100%, 0 84%);
  background: linear-gradient(
    180deg,
    rgba(88, 152, 194, 1) 27%,
    rgba(84, 155, 191, 1) 53%,
    rgba(56, 141, 170, 1) 78%
  );
  box-shadow: inset 2px -3px 0px #4641418a;
}

.incline-right-top {
  clip-path: polygon(1% 11%, 100% 0, 100% 100%, 0 88%);
  background: linear-gradient(
    180deg,
    rgba(88, 138, 196, 1) 27%,
    rgba(88, 143, 196, 1) 53%,
    rgba(87, 146, 195, 1) 78%
  );
  box-shadow: inset 2px 2px 0px #4641418a;
}

.key-item {
  width: 5px;
  height: 15px;
  background: #818286;
  position: absolute;
  z-index: 99;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}

.key-left-top {
  left: 20%;
  top: 20%;
}

.key-left-bottom {
  left: 20%;
  bottom: 35%;
}

.key-right-top {
  right: 20%;
  top: 20%;
}

.key-right-bottom {
  right: 20%;
  bottom: 35%;
}

.key-circle {
  background: white;
  width: 2px;
  height: 2px;
  border-radius: 50%;
}

/* bag */

.bag_cont {
  width: 600px;
  height: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bag_top {
  width: 145px;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  background: #010101;
  height: 200px;
  border-radius: 100px 100px 0px 0px;
  position: relative;
}

.bag-top-3 {
  width: 104px;
  background: #191348;
  height: 10px;
  margin: 0 auto;
  top: 195px;
  left: 21px;
  position: absolute;
  z-index: 99;
}

.bag-put {
  width: 10px;
  background: #d49b35;
  height: 10px;
  margin: 0 auto;
  top: 6px;
  left: 65px;
  border-radius: 50%;
  position: absolute;
  z-index: 99;
}

.bag-top-2 {
  width: 105px;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  background: #fff;
  height: 200px;
  border-radius: 100px 100px 0px 0px;
  margin: 0 auto;
  box-shadow: inset -1px -7px 20px 7px #7b7777;
  margin-top: 10px;
}

.bag-bottom {
  width: 300px;
  background: #39317d;
  height: 260px;
  border-radius: 5px 5px 30px 30px;
  box-shadow: inset -1px -3px 20px 0px #00000063;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  border: 1px solid #ffffff47;
}

.bag-bottom-cont {
  position: relative;
}

.css-is-awesome {
  border: 2px solid white;
  font-family: monospace;
  font-size: x-large;
}

.bag-bottom-3d {
  position: absolute;
  width: 295px;
  background: #191348;
  height: 266px;
  z-index: -1;
  border-radius: 5px 5px 25px 18px;
  box-shadow: -1px 0px 20px 0px #7b7777;
  transform: translate(6px, -5px);
}

/* eye */
.eye_cont {
  width: 500px;
  height: 350px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
}

.eye {
  width: 200px;
  height: 200px;
  background: white;
  margin: 0 auto;
  border-radius: 75% 0;
  transform: rotate(45deg);
  position: relative;
  overflow: hidden;
}

.eye-ball {
  width: 80px;
  height: 80px;
  background: radial-gradient(
    circle,
    rgba(0, 0, 0, 1) 13%,
    rgba(45, 96, 124, 1) 36%,
    rgba(72, 154, 199, 1) 87%
  );

  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.eye-top {
  width: 300px;
  height: 160px;
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.eye-top span {
  display: block;
  width: 100%;
  height: 20%;
  background: #fdb78c;
  border-radius: 0px 0px 60% 60%;
  transition: all 0.3s;
}

.eye:hover > .eye-top span {
  height: 100%;
}

/* sushi */
.sushi-cont {
  width: 500px;
  height: 350px;
  margin: 0 auto;
  margin-left: 100px;
  position: relative;
}

.sushi_box {
  position: absolute;
  bottom: 100px;
  left: 37px;
}

.sushi {
  width: 100px;
  height: 90px;
  background: linear-gradient(
    266deg,
    rgba(42, 58, 48, 1) 13%,
    rgba(37, 71, 57, 1) 61%
  );
  transform: rotate3d(1, 1, 2, -26deg);
  border-radius: 0px 0px 5px 5px;
}

.sushi::after {
  display: block;
  width: 1px;
  height: 60px;
  background: #326b3b;
  content: '';
  bottom: 5px;
  right: 10px;
  position: absolute;
}

.sushi::before {
  display: block;
  width: 1px;
  height: 78px;
  background: #326b3b;
  content: '';
  top: 7px;
  right: 4px;
  position: absolute;
}

.sushi-top {
  width: 86px;
  height: 93px;
  border-radius: 50%;
  background: #ebe6e3;
  position: absolute;
  top: -47px;
  left: -13px;
  transform: rotate3d(1, 1, 1, -151deg);
  border: 3px solid rgba(42, 58, 48, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.inside-sushi {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-top-width: 10px;
  border-top-style: solid;
  border-top-color: #477c48;
  position: relative;
  transform: rotate3d(0, 0, -3, 45deg);
  background: linear-gradient(
    270deg,
    rgba(246, 148, 135, 1) 44%,
    rgba(253, 234, 194, 1) 52%
  );
}

.sushi-rice {
  position: absolute;
  width: 5px;
  height: 2px;
  background: #3a3a3a;
}

.sushi-rice.rice1 {
  left: -11px;
}

.rice2 {
  left: -13px;
  top: 22px;
}

.rice3 {
  left: 13px;
  top: 53px;
}

.rice4 {
  left: 39px;
  top: 53px;
}

.rice5 {
  left: 57px;
  top: 11px;
}

.rice6 {
  left: 41px;
  top: -14px;
}

.rice7 {
  left: 18px;
  top: -18px;
}

.chopsticks {
  box-sizing: border-box;
  width: 330px;
  height: 10px;
  background: #e4ba90;
  position: absolute;
  border-top-left-radius: 200px 4px;
  border-bottom-left-radius: 200px 4px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  box-shadow: inset 1px 2px 1px #e4ba90f5, inset 0 -3px 1px rgba(0, 0, 0, 0.21);
}

.chopsticks.chopstick1 {
  top: 127px;
  transform: rotate(-42deg);
  right: 204px;
}

.chopsticks.chopstick2 {
  top: 145px;
  transform: rotate(-52deg);
}

/* macarons */
.macaroncs {
  width: 500px;
  height: 350px;
  margin: 0 auto;
  display: flex;
  background: #eee;
  justify-content: center;
  align-items: center;
}

.macaron {
  position: relative;
}

.macaron-side {
  width: 69px;
  height: 17px;
  position: relative;
  z-index: 99;
}

.macaron-top {
  border-radius: 52px 58px 0px 0px;
  background: linear-gradient(
    180deg,
    rgba(199, 102, 89, 1) 7%,
    rgba(232, 150, 140, 1) 64%,
    rgba(244, 211, 214, 1) 85%
  );
}

.macaron-bottom {
  border-radius: 0px 0px 52px 58px;
  background: linear-gradient(
    0deg,
    rgba(199, 102, 89, 1) 7%,
    rgba(232, 150, 140, 1) 64%,
    rgba(244, 211, 214, 1) 85%
  );
  margin-top: 14px;
}

.macaron-top::after {
  content: '';
  top: 55%;
  border: 0.1px solid #dd7772;
  position: absolute;
  width: 70px;

  height: 10px;
  left: -2px;
  border-radius: 40px;
  background: #f2c2be;
  box-shadow: inset -8px -2px 7px 0px #d4635880;
}

.macaron-bottom::before {
  content: '';
  width: 70px;
  bottom: 55%;
  background: #f2c2be;
  box-shadow: inset -8px -2px 7px 0px #d4635880;

  border: 0.1px solid #dd7772;
  position: absolute;

  height: 10px;
  left: -2px;
  border-radius: 40px;
}

.macaron-inside {
  width: 66px;
  height: 10px;
  top: 19px;
  position: absolute;
  border-radius: 10px;
}

.macaron-inside1 {
  border: 0.1px solid #e3b0ac;
  background: linear-gradient(
    270deg,
    rgba(244, 183, 188, 1) 25%,
    rgba(242, 205, 201, 1) 71%,
    rgba(252, 249, 248, 1) 95%
  );
}

.macaron-top2 {
  border-radius: 52px 58px 0px 0px;
  background: linear-gradient(
    180deg,
    #c98e4b 7%,
    #e2c092 64%,
    rgba(244, 211, 214, 1) 85%
  );
}

.macaron-bottom2 {
  border-radius: 0px 0px 52px 58px;
  background: linear-gradient(
    0deg,
    #c98e4b 7%,
    #e2c092 64%,
    rgba(244, 211, 214, 1) 85%
  );
  margin-top: 14px;
}

.macaron-inside2 {
  border: 0.1px solid #dbb78b;
  background: #82330d;
}

.macaron-top2::after {
  content: '';
  top: 55%;
  border: 0.1px solid #82330d59;
  position: absolute;
  width: 70px;

  height: 10px;
  left: -2px;
  border-radius: 40px;
  background: #c8934a;
  box-shadow: inset -8px -2px 7px 0px #d4635880;
}

.macaron-bottom2::before {
  content: '';
  width: 70px;
  bottom: 55%;
  background: #c8934a;
  box-shadow: inset -8px -2px 7px 0px #d4635880;

  border: 0.1px solid #82330d59;
  position: absolute;

  height: 10px;
  left: -2px;
  border-radius: 40px;
}

.macaron-top3 {
  border-radius: 52px 58px 0px 0px;
  background: linear-gradient(
    180deg,
    #62681f 7%,
    #c1ce87 64%,
    rgba(244, 211, 214, 1) 85%
  );
  transform: rotate(8deg);
}

.macaron-bottom3 {
  border-radius: 0px 0px 52px 58px;
  background: linear-gradient(
    0deg,
    #62681f 7%,
    #c1ce87 64%,
    rgba(244, 211, 214, 1) 85%
  );
  margin-top: 14px;
  box-shadow: -6px 16px 9px 0px #6c6d6940;
}

.macaron-inside3 {
  border: 0.1px solid #b2dda7;
  background: #eaf5d2fa;
  top: 16px;
}

.macaron-top3::after {
  content: '';
  top: 55%;
  border: 0.1px solid #a0af59;
  position: absolute;
  width: 70px;

  height: 10px;
  left: -2px;
  border-radius: 40px;
  background: #d3dda4;
  box-shadow: inset -8px -2px 7px 0px #d3dda4;
}

.macaron-bottom3::before {
  content: '';
  width: 70px;
  bottom: 55%;
  background: #d3dda4;
  box-shadow: inset -8px -2px 7px 0px #d3dda4;

  border: 0.1px solid #a0af59;
  position: absolute;

  height: 10px;
  left: -2px;
  border-radius: 40px;
}

.macaron-rotated {
  transform: rotate(45deg);
  bottom: 10px;
}

/* mask */
.mask-cont {
  width: 500px;
  height: 350px;
  margin: 0 auto;
  display: flex;
  background: #16b783;
  justify-content: center;
  align-items: center;
}

.mask-middle {
  background: #e8f7fa;
  width: 200px;
  height: 60px;
  border-radius: 50% 50% 0px 0px;
  position: relative;
  z-index: 99;
  border: 4px solid #cbe9f4;
}

.mask-shadow1 {
  background: #aedbe1;
  width: 150px;
  border-radius: 50% 50% 0px 0px;
  height: 10px;
  position: absolute;
  left: 12%;
  z-index: 999;
  top: 50%;
}

.mask-shadow2 {
  background: #aedbe1;
  width: 150px;
  border-radius: 0px 0px 50% 50%;
  height: 10px;
  position: absolute;
  left: 12%;
  z-index: 999;
  top: 100%;
}

.mask-shadow3 {
  background: #aedbe1;
  width: 100px;
  border-radius: 0px 0px 50% 50%;
  height: 10px;
  position: absolute;
  left: 25%;
  z-index: 999;
  top: 160%;
}

.mask-middle::after {
  position: absolute;
  display: block;
  width: 200px;
  height: 100px;
  background: linear-gradient(
    180deg,
    rgba(230, 244, 247, 1) 25%,
    rgba(202, 231, 245, 1) 51%
  );
  content: '';
  border: 4px solid #cbe9f4;
  left: -4px;
  top: 35px;
  border-radius: 0px 0px 50% 50%;
  border-top-width: 0px;
}

.mask-left {
  position: relative;
  border-radius: 50%;
  background: transparent;
  border: 2px solid #abdee3;
  transform: rotate(-20deg);
  width: 25px;
  height: 119px;
  right: 222px;
  top: 25px;
}

.mask-right {
  border-radius: 50%;
  background: transparent;
  border: 2px solid #abdee3;
  transform: rotate(20deg);
  width: 25px;
  height: 119px;
  position: relative;
  left: -43px;
  top: 25px;
}

/* .drinks */
.drinks {
  width: 200px;
  height: 350px;
  margin: 0 auto;
  display: flex;

  justify-content: center;
  align-items: center;
}

.can {
  margin-right: 30px;
  position: relative;
}

.can-top {
  width: 122px;
  height: 4px;
  background: black;
  position: absolute;
  border-radius: 50%;
  top: 13px;
  left: 6%;
  z-index: 99;
  border: 3px solid #cfcfd3;
}

.can-middle {
  width: 148px;
  height: 250px;
  background: linear-gradient(
    180deg,
    rgba(31, 63, 131, 1) 6%,
    rgba(2, 79, 160, 1) 24%,
    rgba(1, 113, 60, 1) 42%,
    rgba(6, 177, 102, 1) 75%
  );
  clip-path: polygon(9% 0, 90% 0, 100% 12%, 100% 100%, 0 100%, 0 10%);
  border-radius: 10px;
  box-shadow: inset -6px 1px 20px 9px #443f3b8a;
  top: 20px;
  position: relative;
}

.can-middle-logo {
  background: url(./assets/sprite.png);
  background-repeat: no-repeat;
  background-position: center;
  width: 251px;
  position: absolute;
  left: -58px;
  top: 22px;
  height: 201px;
  background-size: cover;
  transform: rotateZ(-37deg);
}

.can-bottom {
  box-sizing: border-box;
  border: 2px solid #a2a2a2;
  width: 119px;
  height: 7px;
  background: #cfcfd3;
  position: absolute;
  bottom: -27px;
  left: 13px;
  box-shadow: inset 12px 7px 20px 0px #443f3b8a;
  border-radius: 10px;
}

.can-middle-back {
  height: 100%;
  text-align: center;
  color: #000;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  font-size: 10px;
  flex-direction: column;
}

.can-middle-back ul {
  list-style: none;
  margin: 2px;
  border: 1px solid #d6cbcb;
}

/* bottle */
.bottle-cont {
  width: 300px;
  height: 600px;
  margin: 0 auto;
}

.bottle-cap {
  width: 80px;
  height: 40px;
  background: #9c7b48;
  margin: 0 auto;
  position: relative;
  border-radius: 15px 15px 0px 0px;
}

.bottle-cap::after {
  position: absolute;
  content: '';
  display: block;
  width: 61px;
  height: 27px;
  right: 10px;
  z-index: 999;
  top: 42px;
  border-radius: 0px 0px 15px 15px;
  background: #9c7b48;
}

.bottle-top {
  width: 80px;
  height: 100px;
  background: #ffffff;
  margin: 0 auto;
  position: relative;
  border-right: 2px solid #d5d5d5;
  border-left: 2px solid #d5d5d5;
  border-top: 2px solid #d5d5d5;
  z-index: 99;
  box-shadow: inset 0px 5px 4px #888;
}

.bottle-top::before {
  position: absolute;
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  right: 58px;
  transform: rotateX(-54deg);
  top: 71px;
  border-right: 20px solid #ffffff;
  border-radius: 0px 0px 50px 0px;
  background: transparent;
}

.bottle-top::after {
  position: absolute;
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  left: 58px;
  transform: rotateX(-54deg);
  top: 71px;
  border-left: 20px solid #ffffff;
  border-radius: 0px 0px 0px 50px;
  background: transparent;
}

.bottle {
  width: 200px;
  height: 400px;
  background: #ffffff;
  margin: 0 auto;
  box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;
  border-radius: 54px 54px 30px 30px;
  position: relative;
}

.bottle:before {
  z-index: -1;
  content: '';
  left: 214px;
  bottom: -266px;
  position: absolute;
  width: 320px;
  height: 696px;
  background: linear-gradient(
    180deg,
    rgba(112, 112, 112, 0.27) 6%,
    rgba(233, 230, 230, 1) 75%
  );
  transform: rotate3d(1, 1, 1, 584deg) rotate(46deg);
}

.bottle::after {
  position: absolute;
  transform: rotateX(65deg);
  bottom: -39px;
  background: white;
  content: '';
  width: 205px;
  box-shadow: inset -1px -4px 8px 2px #888;
  left: -2px;
  height: 121px;
  border-radius: 86px;
}

/* hands-check */
.hands-check {
  width: 500px;
  height: 400px;
  margin: 0 auto;
  background: #eee;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.sleeve {
  width: 54px;
  height: 128px;
  background: #26546d;
  position: relative;
}

.sleeve::after {
  position: absolute;
  content: '';
  display: block;
  width: 25px;
  height: 103px;
  background: #c7c4c4;
  top: 12px;
}

.left-sleeve {
  transform: rotate(19deg);
}

.right-sleeve {
  transform: rotate(-19deg);
}

.left-sleeve::after {
  left: 60px;
}

.right-sleeve::after {
  right: 60px;
}

.hands {
  position: relative;
  width: 140px;
  height: 200px;
}

.left-hand {
  width: 151px;
  position: absolute;
  height: 119px;
  top: 74px;
  left: -40px;
  border-radius: 20px;
  background: #d87c4b;
  clip-path: polygon(33% 0, 100% 0, 100% 100%, 0 99%, 0% 38%);
  border: 2px solid black;
  transform: rotate(19deg);
}

.right-hand {
  clip-path: polygon(100% 0, 51% 0, 99% 61%);
  transform: rotate(-22deg);
  background: #ffd6b8;
  top: 116px;
  right: -63px;
  width: 220px;
  position: absolute;
  height: 128px;
}

.finger {
  background: #d87c4b;
  position: absolute;
  border-radius: 0px 10px 10px 0px;
  border-right: 5px solid black;
  border-top: 5px solid black;
  transform: rotate(19deg);
  border-bottom: 5px solid black;
}

.left-finger1 {
  width: 100px;
  height: 30px;
  top: 129px;
  left: 87px;
}

.left-finger2 {
  width: 95px;
  top: 159px;
  height: 27px;
  left: 70px;
}

.left-finger3 {
  width: 90px;
  height: 25px;
  top: 184px;
  left: 49px;
}

.left-finger4 {
  height: 67px;
  width: 2px;
  position: absolute;
  background: black;
  transform: rotate(66deg);
  top: 49px;
  left: 0px;
}

.hand-circle {
  height: 17px;
  background: #d87c4b;
  width: 161px;
  position: absolute;
  left: -49px;
  top: 195px;
  transform: rotate(20deg);
  z-index: 99;
  border-radius: 0 0 50% 50%;
  border-bottom: 2px solid black;
  border-right: 2px solid black;
}

.right-finger {
  background: #ffd6b8;
  position: absolute;
  border-radius: 20px 20px 10px 10px;
  transform: rotate(35deg);
  z-index: 99;
}

.right-finger1 {
  width: 20px;
  height: 33px;
  top: 153px;
  left: -39px;
}

.right-finger2 {
  width: 20px;
  height: 51px;
  top: 152px;
  left: -19px;
}

.right-finger3 {
  width: 20px;
  height: 51px;
  top: 165px;
  left: -1px;
}

.right-finger4 {
  width: 20px;
  height: 33px;
  top: 190px;
  left: 15px;
}

.f1 {
  top: 65px;
  right: 5px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  width: 74px;
  height: 45px;
  transform: rotate(-19deg);
  position: absolute;
  background: #ffd6b8;
}

.f2 {
  top: 66px;
  right: 48px;
  width: 57px;
  height: 37px;
  position: absolute;
  background: #ffd6b8;
  clip-path: polygon(100% 0%, 87% 50%, 68% 100%, 0 100%, 0 31%, 22% 22%);
}

.f3 {
  top: 95px;
  right: 81px;
  width: 56px;
  height: 25px;
  border-radius: 0 0 50% 50%;
  position: absolute;
  background: #ffd6b8;
  transform: rotate(-57deg);
}

/* coffee */
.coffee-cont {
  margin: 0 auto;
  width: 500px;
  height: 500px;
  position: relative;
}

.coffee-cup {
  margin: 0 auto;
  position: absolute;
  width: 250px;
  height: 190px;
  background: radial-gradient(
    circle,
    rgba(208, 208, 208, 1) 5%,
    rgba(189, 189, 189, 1) 51%
  );
  border-radius: 0 0 150px 150px;
  position: relative;
  top: 50%;
}

.coffee-cup::before {
  content: '';
  display: block;
  height: 30px;
  width: 230px;
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(132, 102, 76, 1) 5%,
    rgba(86, 44, 8, 1) 96%
  );
  top: -7px;
  left: 10px;
  z-index: 9;
}

.coffee-cup::after {
  content: '';
  display: block;
  height: 45px;
  width: 242px;
  position: absolute;
  border-radius: 50%;
  background: #cccccc;
  top: -25px;
  left: -1px;
  border: 5px solid #e6e6e6;
}

.coffee-hand {
  width: 52px;
  height: 32px;
  position: absolute;
  background: #ffffff;
  border-radius: 32px;
  top: -39px;
  transform: rotate(-36deg);
  z-index: -1;
  left: -44px;
  border: 15px solid #dbdbdb;
  top: 56%;
  left: 66%;
}

.coffee-tasse {
  width: 400px;
  top: 68%;
  left: 10%;
  height: 139px;
  background: radial-gradient(
    circle,
    rgba(69, 69, 69, 1) 13%,
    rgba(176, 176, 176, 1) 45%,
    rgba(143, 141, 141, 1) 96%
  );
  border-radius: 50%;
  position: absolute;
  z-index: -1;
  border: 2px solid #f0f0f0;
  box-shadow: 1px 3px 0px 1px #323232;
}

.coffee-tasse::after {
  width: 405px;
  top: 68%;
  border-radius: 50%;
  height: 145px;
  background: transparent;
  content: '';
  display: block;
  box-shadow: 2px 5px 8px 3px #bababa;
}

/* cake */

.cake-cont {
  margin: 0 auto;
  width: 500px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cake {
  position: relative;
  width: 300px;
  height: 300px;
}

.cake-top {
  position: absolute;
  width: 260px;
  height: 82px;
  background: #783514;
  border-radius: 50%;
  z-index: 9;
}

.cake-top::before {
  content: '1K';
  font-size: 35px;
  font-family: sans-serif;
  color: #f4ebdc;
  left: 26%;
  position: absolute;
  transform: skew(10deg, 10deg);
}

.cake-choc {
  display: block;
  width: 41px;
  height: 42px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  background-color: #783514;
  position: absolute;
  z-index: 99;
}

.cake-choc1 {
  top: 53px;
  left: 5px;
  transform: skewY(15deg);
  height: 29px;
  width: 25px;
}

.cake-choc2 {
  top: 55px;
  left: 207px;
  transform: skewY(-15deg);
}

.cake-choc3 {
  top: 54px;
  left: 34px;
  width: 54px;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}

.cake-candle {
  position: absolute;
  background-color: #7b020b;
  width: 16px;
  height: 40px;
  border-radius: 8px / 4px;
  top: -20px;
  left: 44%;
  margin-left: -8px;
  z-index: 10;
}

.cake-candle::before {
  position: absolute;
  background-color: orange;
  content: '';
  display: block;
  width: 15px;
  height: 25px;
  border-radius: 10px 10px 10px 10px / 25px 25px 10px 10px;
  top: -25px;
  left: 50%;
  margin-left: -7.5px;
  box-shadow: -1px -3px 10px 7px rgba(255, 165, 0, 0.5),
    0 0 20px rgba(255, 165, 0, 0.5), 0 0 60px rgba(255, 165, 0, 0.5),
    0 0 80px rgba(255, 165, 0, 0.5);
  transform-origin: 50% 90%;
}

.cake-side {
  position: absolute;
  width: 89px;
  height: 90px;
  top: 15%;
  background: #eec096;
}

.cake-side1 {
  right: 40px;
  border-radius: 0 0 46px 0px;
}

.cake-side2 {
  left: 0px;
  border-radius: 0 0 0px 46px;
}

.cake-side1::after {
  position: absolute;
  z-index: 99;
  top: 22px;
  transform: skewY(29deg);
  left: -42px;
  content: '';
  display: block;
  width: 36px;
  height: 50px;
  background: #f8f898;
  border: 3px solid #78351480;
}

.cake-side2::before {
  position: absolute;
  z-index: 99;
  top: 22px;
  transform: rotate(6deg);
  left: 89px;
  content: '';
  transform: skewY(-29deg);
  display: block;
  width: 35px;
  height: 50px;
  background: #f8f898;
  border: 3px solid #78351480;
}

/* glasses  */
.glasses-cont {
  margin: 0 auto;
  width: 600px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.glasses {
  position: relative;
  width: 500px;
  height: 300px;
}
.glasses-left-back {
  position: absolute;
  width: 367px;
  height: 2px;
  background: #b9b8b5;
  left: -7%;
  transform: skewY(-18deg) rotateY(66deg);
  top: 45%;
  z-index: 99;
  box-shadow: 20px 7px 20px 0px #3e3a3a63;
}
.glasses-left-back::before {
  content: '';
  width: 50px;
  height: 16px;
  left: 87%;
  position: absolute;
  border-radius: 0px 0px 16px 0px;
  border-top: 2px solid #39373b;
  border-right: 7px solid #39373b;
}
.glasses-left-back::after {
  z-index: 99;
  content: '';
  width: 15px;
  height: 4px;
  top: -1px;
  left: -9px;
  position: absolute;
  background: #000000a6;
  border: 2px solid #b9b8b5;
  border-radius: 30px;
}
.glasses-right-back {
  position: absolute;
  width: 337px;
  height: 2px;
  background: #b9b8b5;
  left: 40%;
  transform: skewY(-18deg) rotateY(115deg);
  top: 59%;
  z-index: 99;
  box-shadow: 11px 20px 20px 0px #3e3a3a87;
}
.glasses-right-back::after {
  content: '';
  width: 50px;
  height: 16px;
  left: 0;
  position: absolute;

  border-top: 2px solid #39373b;
  border-left: 7px solid #39373b;
  border-radius: 0px 0px 0px 16px;
}

.glasses-right-back::before {
  z-index: 99;
  content: '';
  width: 15px;
  height: 4px;
  top: -1px;
  right: -9px;
  position: absolute;
  background: #000000a6;
  border: 2px solid #b9b8b5;
  border-radius: 30px;
}

.glasses-left {
  position: absolute;
  width: 100px;
  height: 80px;
  background: transparent;
  border: 2px solid #b9b8b5;
  left: 14%;
  top: 50%;
  border-radius: 40% 40% 50% 50%;
  transform: skewY(10deg);
  box-shadow: 0px 20px 20px 0px #dcd9d96e;
}
.glasses-left::after {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  left: 101px;
  position: absolute;
  top: 30%;
  background: linear-gradient(
    273deg,
    rgba(125, 122, 121, 1) 10%,
    rgba(238, 234, 235, 1) 29%,
    rgba(193, 193, 189, 1) 33%
  );
  box-shadow: 0px 20px 20px 0px #150909c9;
}
.glasses-right {
  position: absolute;
  width: 100px;
  height: 80px;
  background: transparent;
  border: 2px solid #b9b8b5;
  border-radius: 40% 40% 50% 50%;
  left: 40%;
  transform: skewY(10deg);
  top: 60%;
  box-shadow: 0px 20px 20px 0px #dcd9d96e;
}