html {
     overflow: hidden;
}
 body {
     overflow: hidden;
     margin: 0;
     padding: 0;
     background: linear-gradient(90deg, #addfff, #fff9e8);
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100vw;
     height: 100vh;
     position: relative;
}
 body::after {
     position: absolute;
     width: 100%;
     content: "";
     height: calc(100% - 600px);
     z-index: 0;
     background: #efefef;
     bottom: 0;
}
 @keyframes spin {
     from {
         transform: rotate(0deg);
    }
     to {
         transform: rotate(360deg);
    }
}
 @keyframes off {
     to {
         transform: rotate(380deg);
    }
}
 @keyframes off2 {
     to {
         transform: rotate(880deg);
    }
}
 @keyframes fly {
     to {
         margin-top: 50px;
    }
}
 span {
     display: block;
}
 .windows {
     width: 100vw;
     height: 100vh;
     position: absolute;
     z-index: 0;
     top: 0;
     left: 0;
     display: flex;
     flex-wrap: wrap;
     align-content: flex-start;
}
 .window {
     flex: 1 20%;
     box-sizing: border-box;
     height: 300px;
     position: relative;
     border: 10px inset rgba(51, 51, 51, 0.2);
}
 .window::after {
     position: absolute;
     height: 60%;
     width: 1px;
     border-radius: 10px;
     background: linear-gradient( to top, #0f80c7 20%, transparent 30%, transparent 50%, #3f7ba0 100% );
     opacity: 1;
     z-index: 5;
     top: 30px;
     left: 50%;
     transform: rotate(45deg);
     display: block;
     content: "";
}
 .window::before {
     position: absolute;
     height: 40%;
     width: 1px;
     border-radius: 10px;
     background: linear-gradient( to top, #0f80c7 20%, transparent 10%, transparent 50%, #addfff 100% );
     opacity: 1;
     z-index: 5;
     top: 100px;
     left: 60%;
     transform: rotate(45deg);
     display: block;
     content: "";
}
 .window:nth-child(5n - 3)::after, .window:nth-child(5n - 3)::before {
     opacity: 0.8 !important;
}
 .window:nth-child(5n - 2)::after, .window:nth-child(5n - 2)::before {
     opacity: 0.4 !important;
}
 .window:nth-child(5n - 1)::after, .window:nth-child(5n -1)::before {
     opacity: 0.3 !important;
}
 .window:nth-child(5n)::after, .window:nth-child(5n)::before {
     opacity: 0.2 !important;
}
 .fly {
     transition: 0.5s all cubic-bezier(0.04, 0.06, 0, 1.18), 1s transform;
     width: 10px;
     height: 6px;
     background: green;
     border-radius: 50%;
     position: absolute;
     animation: fly 5s alternate infinite ease-in-out;
}
 .fly:nth-of-type(1) {
     top: -78px;
     left: -200px;
}
 .fly:nth-of-type(2) {
     transform: translateY(-10px);
     animation-delay: 4s;
     top: 5px;
     right: -250px;
}
 .fly:nth-of-type(3) {
     transform: translateY(0px);
     top: 400px;
     animation-delay: 2s;
     right: -400px;
}
 .fly::after, .fly::before {
     content: "";
     position: absolute;
     width: 7px;
     height: 5px;
     background-color: rgba(0, 0, 0, 0.5);
     display: block;
     border-radius: 50%;
}
 .fly::before {
     bottom: 4px;
     transform: rotate(325deg);
     left: 3px;
}
 .fly::after {
     transform: rotate(45deg);
     bottom: 6px;
}
 .fan {
     width: 500px;
     height: 500px;
     position: relative;
     z-index: 1;
     margin-top: 75px;
     perspective: 500px;
}
 .fan::after {
     content: "";
     display: block;
     position: absolute;
     height: 364px;
     width: 200px;
     background: rgba(0, 0, 0, 0.08);
     top: calc(100% - 24px);
     left: calc(50% - 100px);
     z-index: -1;
     transform: rotateX(104deg) rotateY(-1deg) rotate(25deg);
     transform-origin: top;
}
 .fan__root {
     width: 200px;
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
}
 .fan__root .top {
     overflow: hidden;
     width: 200px;
     height: 25px;
     position: relative;
}
 .fan__root .top::after {
     content: "";
     display: block;
     width: 200px;
     height: 50px;
     background: #2f423f;
     border-radius: 50%;
}
 .fan__root .top .red {
     position: absolute;
     width: 30px;
     height: 15px;
     border-radius: 15px;
     display: block;
     right: 30px;
     background: #f15249;
     cursor: pointer;
     overflow: hidden;
}
 .fan__root .top .green {
     position: absolute;
     width: 30px;
     height: 15px;
     border-radius: 15px;
     display: block;
     right: 85px;
     background: #32ba7c;
     cursor: pointer;
     overflow: hidden;
}
 .fan__root .top .green::after {
     content: "";
     display: block;
     width: 100%;
     height: 50%;
     position: absolute;
     bottom: 0;
     background: #0aa06e;
}
 .fan__root .top .red::after {
     content: "";
     display: block;
     width: 100%;
     height: 50%;
     position: absolute;
     bottom: 0;
     background: #a00000;
}
 .fan__root .top .blue {
     position: absolute;
     cursor: pointer;
     width: 30px;
     height: 15px;
     border-radius: 15px;
     display: block;
     left: 30px;
     background: #3ac2f2;
     overflow: hidden;
}
 .fan__root .top .blue::after {
     content: "";
     display: block;
     width: 100%;
     height: 50%;
     position: absolute;
     bottom: 0;
     background: #009cc6;
}
 .fan__root .bottom {
     overflow: hidden;
     width: 200px;
     height: 20px;
}
 .fan__root .bottom::after {
     content: "";
     display: block;
     width: 200px;
     height: 40px;
     background: #2f423f;
     border-radius: 18%;
     transform: translateY(-30px);
}
 .fan__staddle {
     position: absolute;
     bottom: 45px;
     background: #2f423f;
     height: 270px;
     width: 13px;
     left: 50%;
     transform: translateX(-50%);
}
 .fan__engine {
     position: absolute;
     bottom: 0px;
     width: 130px;
     height: 130px;
     background: #2f423f;
     border-radius: 50%;
     left: 50%;
     transform: translateX(-50%);
}
 .fan__engine::after {
     content: "";
     background: #2f423f;
     display: block;
     width: 25px;
     height: 50px;
     position: absolute;
     top: 105px;
     left: 50%;
     transform: translateX(-50%);
     border-radius: 0 0 5px 5px;
}
 .fan__blades {
     width: 230px;
     height: 230px;
     position: absolute;
     bottom: -50px;
     transition: 2s;
     transform-origin: center center;
     left: calc(50% - 115px);
     z-index: 1;
     animation: spin infinite 0.38s linear forwards;
}
 .fan__blades .fan__blades {
     bottom: 0;
     animation: spin infinite 0.5s linear forwards;
}
 .fan__blades .blade {
     position: absolute;
     width: 50px;
     height: 100%;
     left: 50%;
     transform: translateX(-50%) skewY(25deg);
     perspective: 500px;
     transform-style: preserve-3d;
}
 .fan__blades .blade:nth-child(2) {
     transform: translateX(-50%) rotate(90deg) skewY(25deg);
}
 .fan__blades .blade:nth-child(3) {
     transform: translateX(-50%) rotate(180deg) skewY(25deg);
}
 .fan__blades .blade:nth-child(4) {
     transform: translateX(-50%) rotate(270deg) skewY(25deg);
}
 .fan__blades .blade span {
     width: 100%;
     height: 200%;
     border-radius: 44px;
     background: #ffc114;
     position: absolute;
     top: -66px;
     display: block;
     transform-style: preserve-3d;
     transform: rotateX(81deg);
     overflow: hidden;
}
 .fan__blades .blade span::after {
     width: 50%;
     height: 100%;
     content: "";
     display: block;
     background: #fca12a;
     transform: rotate(0deg);
}
 .fan__blades .center {
     position: absolute;
     overflow: hidden;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%) rotate(45deg);
     background: #32ba7c;
     z-index: 2;
}
 .fan__blades .center::after {
     display: block;
     content: "";
     width: 40px;
     height: 20px;
     background: #0aa06e;
}
 .head {
     transition: 1s transform;
     height: auto;
     width: auto;
     position: absolute;
     width: 300px;
     height: 300px;
     bottom: 195px;
     left: calc(50% - 150px);
    /* transform: translateX(-50%);
     */
}
 #engine:checked + div > div {
     animation: off2 1s ease-out forwards;
}
 #engine:checked + div > span:nth-child(1) {
     transition: 5s all ease-in-out, 1s transform;
     left: 0px;
     top: 0px;
}
 #engine:checked + div > span:nth-child(2) {
     transition: 5s all ease-in-out, 1s transform;
     right: 0px;
     top: 0px;
}
 #engine:checked + div > span:nth-child(3) {
     transition: 7s all ease-in-out, 1s transform;
     right: -50px;
     top: 200px;
}
 #engine2:checked + div {
     animation: off 1s ease-out forwards;
}
 #jack:checked + div {
     transform: translateY(-115px);
}
 #jack:checked + div > div:nth-child(3) > span {
     transform: translateY(115px);
}
 @media screen and (max-width: 900px) {
     .window {
         flex: 1 25% !important;
    }
}
 @media screen and (max-width: 800px) {
     .window {
         flex: 1 33.3333333% !important;
    }
}
 @media screen and (max-width: 700px) {
     .window {
         flex: 1 50% !important;
    }
}