:root {
  --pot-main: #DD7D5F;
  --pot-shade: #B05428;
}

body{
  background: #70C2F4;
}

.box-canvas{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  margin-bottom: 8%;
  width: 500px;
  height:600px;
}

.flower {
  position: absolute;
  top: 125px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 245px;
  height: 250px;
}

.flower::after {
  content: '';
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(
    orange, 
    orange 40%, 
    yellow);
}

.petal {
  position: absolute;
  width: 120px;
  height: 50px;
  background: radial-gradient(ellipse at right, gray, white 50%);
  border-radius: 50%;
  border: 1px solid lightgray;
}

.petal::before {
  content: '';
  position: absolute;
  width: 120px;
  height: 50px;
  background: radial-gradient(
    ellipse at right, 
    gray, 
    white 50%);
  border-radius: 50%;
  border: 1px solid lightgray;
  -webkit-transform: rotate(35deg);
          transform: rotate(35deg);
  -webkit-transform-origin: center right;
          transform-origin: center right;
}

.petal::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 50px;
  background: radial-gradient(ellipse at right, gray, white 50%);
  border-radius: 50%;
  border: 1px solid lightgray;
  -webkit-transform: rotate(70deg);
          transform: rotate(70deg);
  -webkit-transform-origin: center right;
          transform-origin: center right;
}

.petal.two {
  -webkit-transform: rotate(105deg);
          transform: rotate(105deg);
  -webkit-transform-origin: center right;
          transform-origin: center right;
}

.petal.three {
  -webkit-transform: rotate(175deg);
          transform: rotate(175deg);
  -webkit-transform-origin: center right;
          transform-origin: center right;
}

.petal.four {
  -webkit-transform: rotate(285deg);
          transform: rotate(285deg);
  -webkit-transform-origin: center right;
          transform-origin: center right;
}

.petal.four::after {
  content: none;
}

.stem {
  position: absolute;
  right: 140px;
  top: 100px;
  width: 140px;
  height: 300px;
  border-radius: 50% 50% 0 0;
  border: 10px solid green;
  border-left-color: transparent;
  border-bottom-color: transparent;
  -webkit-transform: rotate(25deg);
          transform: rotate(25deg);
}

/* straight stem section */
.stem::before {
  content: '';
  position: absolute;
  bottom: -60px;
  right: -20px;
  background: green;
  width: 10px;
  height: 70px;
  -webkit-transform: rotate(-25deg);
          transform: rotate(-25deg);
}

/* Leaf */
.stem::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 150px;
  height: 75px;
  background: -webkit-gradient(linear, left bottom, left top, from(#014401), color-stop(40%, green));
  background: linear-gradient(to top, #014401, green 40%);
  border-radius: 50% 0 0 50%;
  -webkit-clip-path: polygon(0 0, 100% 74%, 100% 100%, 0% 100%);
          clip-path: polygon(0 0, 100% 74%, 100% 100%, 0% 100%);
}

/* Main pot body */
.pot {
  position: absolute;
  left: 160px;
  top: 470px;
  width: 210px;
  height: 200px;
  background: -webkit-gradient(linear,
  left top, right top,
  from(var(--pot-shade)),
  color-stop(50%, var(--pot-main)));
  background: linear-gradient(to right,
  var(--pot-shade),
  var(--pot-main) 50%);
  border-radius: 0 0 30% 30%;
}

/* Dirt */
.pot::after {
  content: '';
  position: absolute;
  left: 15px;
  top: -15px;
  width: 180px;
  height: 50px;
  background: #4F211B;
  border-radius: 50%;
}

/* Rim */
.pot::before {
  content: '';
  position: absolute;
  top: -30px;
  left: -10px;
  border-bottom: 2px solid var(--pot-shade);
  width: 230px;
  height: 80px;
  background: radial-gradient(
    var(--pot-shade), 
    var(--pot-main) 99%,
    var(--pot-shade));
  border-radius: 50%;
}