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

/*background color added to hint at a sky*/
body
{
  background-color: lightskyblue;
  position: relative;

}

/* This "odd" shape creates the fuselage of the plane and is what most other objects are positioned off of. */
.tube
{
  position: absolute;
  top: 200px;
  left: 50px;

  border: solid black 1px;
  height: 200px;
  width: 1000px;
  background-color: blue;
  border-radius: 500px 0px 500px 50px;
  
}

/* This "odd shape was created with a large border and border radius for an effect that looks like the cockpit window */
.cockpit
{
  position: absolute;
  top: 17px;
  left: 53px;

  border: solid transparent 57px;
  border-left-color: white;
  border-radius: 50%;
  
  height: 153px;
  width: 126px;
  rotate: 45deg;
}

/* This rectangle with rounded corners creates the front aircraft door*/
.door1
{
  position: absolute;
  top: 30px;
  left: 200px;

  border: solid gray 4px;
  height: 120px;
  width: 60px;
  background-color: white;
  border-radius: 10px;
}

/* This rectangle with rounded corners creates the rear aircraft door*/
.door2
{
  position: absolute;
  top: 30px;
  left: 800px;

  border: solid gray 4px;
  height: 120px;
  width: 60px;
  background-color: white;
  border-radius: 10px;
}

/* This circle is created using border radius and makes a porthole window on both aircraft doors */
.porthole
{
  position: absolute;
  top: 22px;
  left: 16px;
  background-color: white;
  width: 20px;
  height: 20px;
  border: solid 3px black;
  border-radius: 50%;
}

/*This rectangle has rounded corners made with border radius and creates a passenger window. */
.window1
{
  position: absolute;
  top: 40px;
  left: 300px;

  border: solid gray 1px;
  height: 33px;
  width: 20px;
  background-color: white;
  border-radius: 8px;
}

/*This rectangle has rounded corners made with border radius and creates a passenger window. */
.window2
{
  position: absolute;
  top: 40px;
  left: 340px;

  border: solid gray 1px;
  height: 33px;
  width: 20px;
  background-color: white;
  border-radius: 8px;
}

/*This rectangle has rounded corners made with border radius and creates a passenger window. */
.window3
{
  position: absolute;
  top: 40px;
  left: 380px;

  border: solid gray 1px;
  height: 33px;
  width: 20px;
  background-color: white;
  border-radius: 8px;
}

/*This rectangle has rounded corners made with border radius and creates a passenger window. */
.window4
{
  position: absolute;
  top: 40px;
  left: 420px;

  border: solid gray 1px;
  height: 33px;
  width: 20px;
  background-color: white;
  border-radius: 8px;
}

/*This rectangle has rounded corners made with border radius and creates a passenger window. */
.window5
{
  position: absolute;
  top: 40px;
  left: 460px;

  border: solid gray 1px;
  height: 33px;
  width: 20px;
  background-color: white;
  border-radius: 8px;
}

/*This rectangle has rounded corners made with border radius and creates a passenger window. */
.window6
{
  position: absolute;
  top: 40px;
  left: 500px;

  border: solid gray 1px;
  height: 33px;
  width: 20px;
  background-color: white;
  border-radius: 8px;
}

/*This rectangle has rounded corners made with border radius and creates a passenger window. */
.window7
{
  position: absolute;
  top: 40px;
  left: 540px;

  border: solid gray 1px;
  height: 33px;
  width: 20px;
  background-color: white;
  border-radius: 8px;
}

/*This rectangle has rounded corners made with border radius and creates a passenger window. */
.window8
{
  position: absolute;
  top: 40px;
  left: 580px;

  border: solid gray 1px;
  height: 33px;
  width: 20px;
  background-color: white;
  border-radius: 8px;
}

/*This rectangle has rounded corners made with border radius and creates a passenger window. */
.window9
{
  position: absolute;
  top: 40px;
  left: 620px;

  border: solid gray 1px;
  height: 33px;
  width: 20px;
  background-color: white;
  border-radius: 8px;
}

/*This rectangle has rounded corners made with border radius and creates a passenger window. */
.window10
{
  position: absolute;
  top: 40px;
  left: 660px;

  border: solid gray 1px;
  height: 33px;
  width: 20px;
  background-color: white;
  border-radius: 8px;
}

/*This rectangle has rounded corners made with border radius and creates a passenger window. */
.window11
{
  position: absolute;
  top: 40px;
  left: 700px;

  border: solid gray 1px;
  height: 33px;
  width: 20px;
  background-color: white;
  border-radius: 8px;
}

/*This rectangle has rounded corners made with border radius and creates a passenger window. */
.window12
{
  position: absolute;
  top: 40px;
  left: 740px;

  border: solid gray 1px;
  height: 33px;
  width: 20px;
  background-color: white;
  border-radius: 8px;
}

/* This "odd" shape creates a wing on the left side of the plane */
.wing1
{
    position: absolute;
    top: 86px;
    left: 420px;
  
    border: solid black 1px;
    height: 356px;
    width: 125px;
    background-color: white;
    border-radius: 65px 95px 140px 32px;
    rotate: 331deg;
}

/* This "odd" shape creates a wing on the right side of the plane */
.wing2
{
    position: absolute;
    bottom: 16px;
    left: 420px;
  
    border: solid black 1px;
    height: 394px;
    width: 125px;
    background-color: white;
    border-radius: 20px 140px 32px 81px;
    rotate: 40deg;
    z-index: -1;
}

/* This "odd" shape creates the tail of the aircraft*/
.tail1
{
  position: absolute;
  bottom: 198px;
  right: -1px;

  height: 160px;
  width: 150px;
  background-color: white;
  border: solid 1px black;
  border-radius: 100% 10% 0 0;
}

/* This triangle creates the left side of the Delta Airlines widget */
.widgetTL
{
  position: absolute;
  top: 83px;
  left: 44px;
  border: solid transparent 39px;
  border-left-color: #E31837;
  
  height: 0px;
  width: 0px;
  rotate: 45deg;
}

/* This shape is created using border color on one side and height to stretch the triangle creating a line across the left side of the Delta widget which creates the seperation seen in the design. */
.widgetSL
{
  position: absolute;
  top: -31px;
  left: -32px;
  border: solid transparent 4px;
  border-left-color: white;
  
  height: 77px;
  width: 0px;
  rotate: 18deg;
}

/* This triangle creates the left side of the Delta Airlines widget */
.widgetTR
{
  position: absolute;
  top: 83px;
  left: 44px;
  border: solid transparent 39px;
  border-left-color: #98002E;
  
  height: 0px;
  width: 0px;
  rotate: 135deg;
}

/* This shape is created using border color on one side and height to stretch the triangle creating a line across the right side of the Delta widget which creates the seperation seen in the design. */
.widgetSR
{
  position: absolute;
  top: -49px;
  left: -37px;
  border: solid transparent 4px;
  border-left-color: white;
  
  height: 77px;
  width: 0px;
  rotate: 161deg;
}

/* This rectangle creates the strut for the landing gear in the front of the plane. */
.land1
{
  position: absolute;
  top: 188px;
  left: 153px;
  background-color: silver;
  height: 80px;
  width: 25px;
  border: solid 2px black;
  z-index: -1;
}

/* This circle is created using the border radius to create a tire. */
.tire1
{
  position: absolute;
  bottom: -41px;
  left: -25px;
  background-color: black;
  width: 70px;
  height: 70px;
  border-radius: 50%;
}

/* This circle is made using border radius and border color and positioned in the center of the tire to create a wheel effect. */
.wheel1
{
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: silver;
  border: solid white 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

/* This rectangle creates the strut for the first landing gear in the rear of the plane. */
.land2
{
  position: absolute;
  top: 188px;
  left: 580px;
  background-color: silver;
  height: 80px;
  width: 25px;
  border: solid 2px black;
  z-index: -1;
}

/* This circle is created using the border radius to create a tire. */
.tire2
{
  position: absolute;
  bottom: -41px;
  left: -25px;
  background-color: black;
  width: 70px;
  height: 70px;
  border-radius: 50%;
}

/* This circle is made using border radius and border color and positioned in the center of the tire to create a wheel effect. */
.wheel2
{
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: silver;
  border: solid white 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

/* This rectangle creates the strut for the second landing gear in the rear of the plane. */
.land3
{
  position: absolute;
  top: 188px;
  left: 655px;
  background-color: silver;
  height: 80px;
  width: 25px;
  border: solid 2px black;
  z-index: -1;
}

/* This circle is created using the border radius to create a tire. */
.tire3
{
  position: absolute;
  bottom: -41px;
  left: -25px;
  background-color: black;
  width: 70px;
  height: 70px;
  border-radius: 50%;
}

/* This circle is made using border radius and border color and positioned in the center of the tire to create a wheel effect. */
.wheel3
{
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: silver;
  border: solid white 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}



/*delta lightred- #E31837 darkred- #98002E  */