body {
  background: radial-gradient(circle, #2d3453 0%, #1f2741 30%, #0c0f19 100%);
  padding: 0;
  margin: 0;
  display: flex;
  overflow: hidden;
}

.door-frame {
  width: 30rem;
  height: 40rem;
  margin: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.door-frame .light-door {
  background: linear-gradient(to left, rgba(255, 0, 0, 0), #f6edd0);
  height: 30rem;
  width: 14rem;
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  position: absolute;
  left: -4.5rem;
  z-index: 4;
  opacity: .4;
  transform: skewy(-20deg) translatey(0.8rem);
}
.door-frame .door {
  width: 16rem;
  height: 35rem;
  background: linear-gradient(to bottom, #e6716d, #f5c9a8, rgba(255, 0, 0, 0));
  border-radius: 50% 50% 0 0;
  transform: skew(6deg) rotate(6deg);
  overflow: hidden;
}
.door-frame .door .inside-door {
  width: 18rem;
  height: 35rem;
  background: linear-gradient(to bottom, #f5c9a8, #f6edd0, rgba(255, 0, 0, 0));
  border-radius: 50% 50% 0 0;
  transform: skew(6deg) rotate(6deg) translate(2.5rem, 1rem);
}
.door-frame .door .inside-door .handle {
  width: .5rem;
  height: 24rem;
  background: #0c0f19;
  border-radius: 5px;
  position: absolute;
  bottom: 30%;
  left: 11rem;
  transform: rotate(50deg);
  box-shadow: 10px 10px 12px #1f2741;
}
.door-frame .door .inside-door .handle:after {
  content: "";
  width: .5rem;
  height: 2rem;
  background: #0c0f19;
  border-radius: 5px;
  position: absolute;
  bottom: 0;
  transform: rotate(-50deg) translate(30px, -5px);
}
.door-frame .door .inside-door .step-1 {
  background: linear-gradient(#1f2741, #0c0f19);
  width: 80%;
  height: 3rem;
  position: absolute;
  bottom: 6rem;
  transform: translate(3.5rem);
  border-radius: 5px 0;
}

.door-shadow {
  background: linear-gradient(to bottom, #0c0f19, rgba(255, 0, 0, 0));
  width: 45rem;
  height: 45rem;
  border-radius: 0 50% 0 0;
  position: absolute;
  bottom: -10.2rem;
  left: 13rem;
  z-index: -1;
}

.step-2 {
  background: linear-gradient(#1f2741, #0c0f19);
  width: 16rem;
  height: 3.5rem;
  position: absolute;
  bottom: 0rem;
  transform: skew(6deg, 6deg) rotate(6deg) translate(0rem, 1rem);
  border-radius: 5px 0;
  z-index: 2;
}
.step-2 .light-step {
  border-radius: 0 0 50% 50%;
  width: 16rem;
  height: 9.5rem;
  background: #f6edd0;
  position: absolute;
  bottom: -9.5rem;
  z-index: 3;
  transform: skew(-60deg) translate(-8.5rem);
  opacity: .4;
  filter: blur(0.5px);
}
.step-2:after {
  content: "";
  position: absolute;
  left: -100rem;
  bottom: -20rem;
  background: #0c0f19;
  width: 160vw;
  height: 20rem;
  transform: skew(6deg);
}