:root {
  --light-gray: #919191;
  --darkest-gray: #333642;
  --blue: #047FEA;
  --light-blue: #63ACED;
  --red: #EF0B0B;
  --light-red: #EF7070;
}

body{
  background: pink;
}

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

.rig {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 200px;
  height: 200px;
}

/* Left pole */
.rig::before {
  content: '';
  position: absolute;
  height: 200px;
  width: 20px;
  background: -webkit-gradient(linear, 
    left top, right top, 
    from(black), 
    color-stop(var(--darkest-gray)), 
    to(black)
  );
  background: linear-gradient(to right, 
    black, 
    var(--darkest-gray), 
    black
  );
  border-radius: 50% 50% 0 0 / 5% 5% 0 0;
}

/* Right pole */
.rig::after {
  content: '';
  right: 0;
  position: absolute;
  height: 200px;
  width: 20px;
  background: -webkit-gradient(linear, 
    left top, right top, 
    from(black), 
    color-stop(var(--darkest-gray)), 
    to(black)
  );
  background: linear-gradient(to right, 
    black, 
    var(--darkest-gray), 
    black
  );
  border-radius: 50% 50% 0 0 / 5% 5% 0 0;
}

.bench {
  position: absolute;
  bottom: -100px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 120px;
  height: 170px;
  background: var(--darkest-gray);
  background: radial-gradient(ellipse at center, 
    black 5%, 
    var(--darkest-gray));
  -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
          clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

.end {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 300px;
  background: -webkit-gradient(linear,
    left top, left bottom,
    from(var(--darkest-gray)), 
    to(black)
  );
  background: linear-gradient(to bottom,
    var(--darkest-gray), 
    black
  );
  width: 120px;
  height: 15px;
}

.legs {
  position: absolute;
  left: 50%;
  bottom: -150px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 120px;
  height: 50px;
}

.legs::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 40px;
  background: -webkit-gradient(linear, 
    left top, right top, 
    from(black), 
    color-stop(var(--darkest-gray)), 
    to(black)
  );
  background: linear-gradient(to right, 
    black, 
    var(--darkest-gray), 
    black
  );
  border-radius: 0 0 50% 50% / 0 0 10% 10%;
}

.legs::after {
  content: '';
  right: 0;
  position: absolute;
  width: 20px;
  height: 40px;
  background: -webkit-gradient(linear, 
    left top, right top, 
    from(black), 
    color-stop(var(--darkest-gray)), 
    to(black)
  );
  background: linear-gradient(to right, 
    black, 
    var(--darkest-gray), 
    black
  );
  border-radius: 0 0 50% 50% / 0 0 10% 10%;
}

.bar {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 40px;
  height: 15px;
  width: 340px;
  background: -webkit-gradient(linear,
  left top, left bottom,
  from(var(--light-gray)),
  color-stop(white),
  to(var(--light-gray))
  );
  background: linear-gradient(to bottom,
  var(--light-gray),
  white,
  var(--light-gray)
  );
}

.bar::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 70px;
  background: -webkit-gradient(linear,
    left top, left bottom,
    from(var(--darkest-gray)),
    to(black)
  );
  background: linear-gradient(to bottom,
    var(--darkest-gray),
    black
  );
  width: 20px;
  height: 10px;
}

.bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 70px;
  background: -webkit-gradient(linear,
    left top, left bottom,
    from(var(--darkest-gray)),
    to(black)
  );
  background: linear-gradient(to bottom,
    var(--darkest-gray),
    black
  );
  width: 20px;
  height: 10px;
}

.weights {
  position: absolute;
  top: -15px;
  width: 15px;
  height: 45px;
  background: -webkit-gradient(linear,
    left top, left bottom,
    from(var(--blue)),
    color-stop(var(--light-blue)),
    to(var(--blue))
  );
  background: linear-gradient(to bottom,
    var(--blue),
    var(--light-blue),
    var(--blue)
  );
  border-radius: 20%;
}

.weights.left {
  left: 10px;
}

.weights.right {
  right: 10px;
}

.weights::after {
  content: '';
  position: absolute;
  height: 80px;
  width: 15px;
  background: -webkit-gradient(linear,
    left top, left bottom,
    from(var(--red)),
    color-stop(var(--light-red)),
    to(var(--red))
  );
  background: linear-gradient(to bottom,
    var(--red),
    var(--light-red),
    var(--red)
  );
  top: -20px;
  border-radius: 20%;
}

.weights.left::after {
  left: 15px;
}

.weights.right::after {
  right: 15px;
}