* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    /* background: url(/imgs/ceiling.jpg) no-repeat center / cover; */
    background: black; 
    opacity: 80%;
    top: 0;
}

.fan-wrapper {
    position: relative;
    width: min(90vw, 100px);
    height: min(90vw, 300px);
    margin: 8% auto 0;
    scale: 1.6;
}


.motor {
    position: absolute;
    width: 75%;
    left: 16%;
    bottom: 10%;
    transform: scaleX(1.2) rotateX(50deg) scaleY(1.2);
}

.canopy {
    position: absolute;
    width: 140px;
    top: 26%;
    left: -16%;
    transform: rotate(-46deg);
}


.blades {
    position: absolute;
    bottom: 0;
}

.blades img {
    width: 200px;
}


/* .b1 {
    transform: translate(-66%, 14%) skew(4deg, -10deg);
} */

.b1 {
    transform: translate(30%, -4%) skew(-62deg, 14deg) rotateZ(1deg);
}


/* .b2 {
    transform: translate(41%, -22%) rotate(-4deg);
} */

.b2 {
    transform: translate(40%, 180%) rotate(10deg) skew(-40deg, 12deg);
}

/* .b3 {
    transform: translate(-80%, 0%) skew(36deg, 2deg) rotate(-4deg);
} */


.b3 {
    transform: translate(-85%, -54%) skew(0deg, 18deg) rotate(-4deg);
    scale: 1.2;
}


@media (max-width: 480px) {
  .fan {
    width: 95vw;
    height: 95vw;
  }

  .motor {
    width: 78%;
  }

  .rod {
    width: 30%;
  }

  .blade {
    width: 45%;
  }

  .center {
    width: 26%;
  }
}