html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

div, img {
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

img {
  left: 51.5%;
  width: 750px;
  opacity: 0.5;
}

.background {
  width: 110%;
  height: 110%;
}

.landscape {
  width: 110%;
  height: 110%;
  background-image:
    linear-gradient(
      to top,
      transparent 49%,
      white 50%,
      black 50%,
      black calc(50% + 1px),
      rgb(68, 40, 18) calc(50% + 1px),
      rgb(143, 77, 26) 51%,
      black 51%,
      black calc(51% + 1px),
      rgb(84, 160, 52) calc(51% + 1px),
      rgb(84, 160, 52) 53%,
      black 53%,
      black calc(53% + 1px),
      transparent calc(53% + 1px)
    ),
    linear-gradient(
      to top,
      rgb(0, 32, 80) 0%,
      rgb(0, 139, 190) 50%,
      rgb(147, 228, 255) 50%,
      rgb(27, 156, 255) 100%
    );
  background-repeat: no-repeat;
  background-size: 100% 400px, 100% 100%;
  background-position: center;
  filter: url(#landscape);
}

.sizer {
  width: 600px;
  height: 400px;
}

.airplane {
  width: 100%;
  height: 100%;
}

.fin {
  top: 30%;
  width: 2%;
  height: 30%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border: 1px solid black;
  background-color: rgb(96,49,65);
  background-image: 
    linear-gradient(
      to left,
      rgb(96,49,65) 40%,
      rgba(190, 113, 122, 0.5) 40%,
      rgba(190, 113, 122, 0.5) 60%,
      rgb(96,49,65) 60%
    );
}

.tail {
  top: 38%;
  left: 38%;
  width: 20%;
  padding-top: 1.5%;
  border: 1px solid black;
  border-radius: 10% 0% 0% 100%;
  background-color: rgb(96,49,65);
  transform: rotateZ(5deg) translate(-50%, -50%);
  box-shadow: inset 0px 4px 0px 0px rgba(190, 113, 122, 0.5);
  background-image:
    linear-gradient(
      65deg,
      transparent 50%,
      black 50%,
      black calc(50% + 1px),
      transparent calc(50% + 1px)
    );
}

.tail.right {
  left: 41%;
  transform: scaleX(-1) rotateZ(5deg) translate(-50%, -50%);
}

.wing {
  top: 51%;
  left: 21.5%;
  width: 41%;
  height: 5%;
  border-radius: 100% 5% 5% 50% / 10% 50% 50% 100%;
  border: 1px solid black;
  transform: rotateZ(5deg) translate(-50%, -50%);
  background-color: rgb(97,125,134);
  background-image: linear-gradient(
    180deg,
    rgb(204,211,202) 50%,
    rgb(169,189,189) 55%
  );
  box-shadow:
    inset -7px -4px 0px 0px rgb(102,130,139);
}

.wing.right {
  left: 37.4%;
  transform: scaleX(-1) rotateZ(5deg) translate(-50%, -50%);
}

.cockpit {
  top: 33.5%;
  width: 15%;
  height: 10.5%;
  border: 1px solid black;
  border-radius: 50% 50% 0 0 / 50% 50% 0 0;
  background-color: rgb(76,91,97);
  box-shadow: 
    inset 0px 0px 0px 3px rgb(204,211,202),
    inset 0px 0px 0px 6px rgb(151, 173, 173),
    inset 0px 0px 0px 7px rgb(0,0,0),
    inset 0px 9px 0px 0px rgba(102,130,139, 0.5),
    inset 0px 16px 0px 0px rgb(160, 194, 221),
    inset 0px 30px 0px 0px rgb(141, 169, 201);
}

.cabin {
  width: 19%;
  padding-top: 20%;
  border-radius: 50% 50% 50% 50% / 30% 30% 60% 60%;
  border: 1px solid black;
  background-color: rgb(51,97,125);
  background-image: 
    radial-gradient(
      ellipse at center,
      rgb(204,211,202) 20%,
      black 20%,
      black calc(20% + 1px),
      transparent calc(20% + 1px)
    ),
    radial-gradient(
      ellipse at center,
      rgb(204,211,202) 20%,
      black 20%,
      black calc(20% + 1px),
      transparent calc(20% + 1px)
    ),
    radial-gradient(
      ellipse at center,
      rgb(84,112,122) 20%,
      transparent 20%
    ),
    radial-gradient(
      ellipse at center,
      rgb(204,211,202) 20%,
      transparent 20%
    );
  background-size: 400% 400%, 400% 400%, 400% 500%, 400% 500%;
  background-position: 75% 50%, 25% 50%, 0% 45%, 50% 35%;
  background-repeat: no-repeat;
}

.wheel-support {
  top: 53%;
  left: 38%;
  width: 8%;
  height: 3%;
  border: 1px solid black;
  background-color: rgb(176,186,177);
  transform-origin: top right;
  transform: 
    perspective(200px)
    skewY(-50deg);
  box-shadow: inset 0px 7px 0px 0px rgb(204,211,202);
}

.wheel-support.right {
  left: 45.4%;
  transform: scaleX(-1) perspective(200px) skewY(-50deg);
}

.wheel {
  top: 69%;
  left: 38.5%;
  width: 1.5%;
  height: 13%;
  border-radius: 50% / 20%;
  background-color: gray;
  transform: rotateZ(-16deg) translate(-50%, -50%);
  border: 1px solid black;
  background-image: 
    radial-gradient(
      ellipse at right center,
      rgb(161,140,94) 17%,
      black 17%,
      black calc(17% + 1px),
      transparent calc(17% + 1px)
    );
  background-position: 50% 50%;
  background-size: 100% 250%;
}

.wheel::after {
  content: '';
  top: 36.5%;
  left: 75%;
  width: 70%;
  padding-top: 110%;
  border-radius: 0% 50% 50% 0;
  border: 1px solid black;
  border-left: 0;
  position: absolute;
  background-color: rgb(138, 117, 73);
}

.wheel.right {
  left: 59.8%;
  transform: scaleX(-1) rotateZ(-16deg) translate(-50%, -50%);
}

.propeller {
  top: 47%;
  width: 37%;
  padding-top: 37%;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.1);
}

.propeller::before {
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  border-radius: 50%;
  background-image:
    repeating-radial-gradient(
      transparent,
      transparent 1px,
      rgba(255,255,255,0.5) 1px,
      rgba(255,255,255,0.5) 2px
    );
  -webkit-mask-image: 
    conic-gradient(
      transparent 25%,
      red 27%,
      red 38%,
      transparent 48%,
      transparent 75%,
      red 80%,
      red 85%,
      transparent 90%
    );
  /* firefox can't conic gradient */
  mask-image: 
    linear-gradient(
      45deg,
      transparent 40%,
      red 45%,
      red 55%,
      transparent 60%
    );
}

.propeller::after {
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  border-radius: 50%;
  background-image:
    repeating-radial-gradient(
      transparent,
      transparent 5px,
      rgba(247, 245, 149, 0.8) 5px,
      rgba(255,255,255,0.8) 7px
    );
  -webkit-mask-image: 
    conic-gradient(
      transparent 25%,
      red 30%,
      red 35%,
      transparent 40%,
      transparent 75%,
      red 80%,
      red 85%,
      transparent 90%
    );
  /* firefox can't conic gradient */
  mask-image: 
    linear-gradient(
      45deg,
      transparent 40%,
      red 45%,
      red 55%,
      transparent 60%
    );
}

.spinner {
  top: 47%;
  width: 10%;
  padding-top: 10%;
  border-radius: 50%;
  border: 1px solid black;
  background-color: rgb(204,178,104);
  box-shadow: inset 0px 0px 0px 3px rgb(0,0,0,0.1);
  overflow: hidden;
}

.spinner::before {
  content: '';
  top: -16%;
  left: -25%;
  width: 60%;
  height: 60%;
  border-radius: 20%;
  position: absolute;
  transform: rotateX(-45deg);
  background-color: rgba(255,255,255,0.4);
}
.spinner::after {
  content: '';
  top: 55%;
  left: 50%;
  width: 60%;
  height: 60%;
  border-radius: 20%;
  position: absolute;
  transform: rotateY(45deg);
  background-color: rgba(0,0,0,0.1);
}

.filters {
  width: 100%;
  height: 100%;
}

.filters .turbulence {
  width: 100%;
  height: 100%;
  filter: url(#propeller);
  transform: translate(-50%, -48%) scale(1.05);
}

.filters .clipper {
  top: 47%;
  width: 100%;
  height: 100%;
  -webkit-mask-image:
    radial-gradient(
      circle at center,
      red 30.7%,
      transparent 30.7%
    );
}

.shadow-filter {
  left: 45%;
  top: 84%;
  width: 70%;
  height: 10%;
  padding: 5%;
  filter: url(#shadow) blur(1px);
  transform-origin: 0 0;
  transform: perspective(100px) translate(-50%, -50%) rotateX(25deg);
}

.shadow {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-image:
    radial-gradient(
      ellipse at center,
      rgb(13, 47, 99) 20%,
      transparent 80%
    );
  position: relative;
}