*, *:before, *:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
}

* {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}


:root {
  --duration: 3.2s;
  --stagger: .65s;
  --easing: cubic-bezier(.36,.07,.25,1);
  --offscreen: 130vmax;
  --color-bg: lightblue;
  --color-blue: #384969;
  --color-shadow: #211842;
}

.html, .body {
  margin: 0;
  padding: 0;
  height: 500px;
  width: 100%;
  overflow: hidden;
  float: right;
  /* border-radius: 10%; */
  box-shadow: 2px 2px 8px black;
  
}

.body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: var(--color-bg);
}

#app {
  height: 50vmin;
  width: 25vmin;
  /* height: 250px;
  width: 150px; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform: translateX(25vw) rotateX(-20deg) rotateY(-55deg);
          transform: translateX(25vw) rotateX(-20deg) rotateY(-55deg);
  background: var(--color-blue);
  border-radius: 2vmin;
  -webkit-perspective: 10000px;
          perspective: 10000px; 
  right: 450px;
}

#app:before {
  border: 10vmin solid white;
  border-left-width: 2vmin;
  border-right-width: 2vmin;
  border-radius: inherit;
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border: 10vmin solid white;
  border-left-width: 2vmin;
  border-right-width: 2vmin;
  background: var(--color-blue);
}

#app > .papers, #app:before {
  -webkit-transform: translateZ(3vmin);
          transform: translateZ(3vmin);
}

#app:after {
  content: '';
  position: absolute;
  height: 200px;
  width: 150px;
  top: 0;
  left: 0;
  background: inherit;
  border-radius: inherit;
  -webkit-transform: translateZ(1.5vmin);
          transform: translateZ(1.5vmin);
}

#app > .shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% ;
  height: 100%;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
  background: var(--color-shadow);
  border-radius: inherit;
}

.paper-shadow {
  background: var(--color-shadow);
  height: 100%;
  width: 100%;
  position: absolute;
  top: calc(100% + 3vmin);
  left: 0;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-animation: shadow-in var(--duration) var(--easing) infinite;
          animation: shadow-in var(--duration) var(--easing) infinite;
  -webkit-animation-delay: calc(var(--i) * var(--stagger));
          animation-delay: calc(var(--i) * var(--stagger));
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

@-webkit-keyframes shadow-in {
  0%, 5% {
    -webkit-transform: scale(0.8, 1) translateY(var(--offscreen));
            transform: scale(0.8, 1) translateY(var(--offscreen));
  }
  100% {
    -webkit-transform: scale(0.8, 0);
            transform: scale(0.8, 0);
  }
}

@keyframes shadow-in {
  0%, 5% {
    -webkit-transform: scale(0.8, 1) translateY(var(--offscreen));
            transform: scale(0.8, 1) translateY(var(--offscreen));
  }
  100% {
    -webkit-transform: scale(0.8, 0);
            transform: scale(0.8, 0);
  }
}

.papers {
  width: 120px;
  height: 150px;
  background: white;
}

.paper {
  --segments: 5;
  --segment: calc(100% * 1 / var(--segments));
  position: absolute;
  top: 0;
  left: 0;
  height: 100px;
  width: 120px;
  -webkit-animation: fly-in var(--duration) var(--easing) infinite;
          animation: fly-in var(--duration) var(--easing) infinite;
  -webkit-animation-delay: calc(
 (var(--i) * var(--stagger)));
          animation-delay: calc(
 (var(--i) * var(--stagger)));
}

@-webkit-keyframes fly-in {
  0%, 2% {
    -webkit-transform: translateZ(var(--offscreen)) translateY(80%) rotateX(30deg);
            transform: translateZ(var(--offscreen)) translateY(80%) rotateX(30deg);
  }
  80%, 100% {
    -webkit-transform: translateZ(0px) translateY(0%) rotateX(0deg);
            transform: translateZ(0px) translateY(0%) rotateX(0deg);
  }
}

@keyframes fly-in {
  0%, 2% {
    -webkit-transform: translateZ(var(--offscreen)) translateY(80%) rotateX(30deg);
            transform: translateZ(var(--offscreen)) translateY(80%) rotateX(30deg);
  }
  80%, 100% {
    -webkit-transform: translateZ(0px) translateY(0%) rotateX(0deg);
            transform: translateZ(0px) translateY(0%) rotateX(0deg);
  }
}

.paper > .segment {
  height: var(--segment);
}

.segment {
  --rotate: 20deg;
  height: 33px;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-top: none;
  border-bottom: none;
  -webkit-animation: inherit;
          animation: inherit;
  -webkit-animation-name: curve-paper;
          animation-name: curve-paper;
}

.segment > .segment {
  top: 98%;
}

@-webkit-keyframes curve-paper {
  0%, 2% {
    -webkit-transform: rotateX(var(--rotate, 0deg));
            transform: rotateX(var(--rotate, 0deg));
  }
  90%, 100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}

@keyframes curve-paper {
  0%, 2% {
    -webkit-transform: rotateX(var(--rotate, 0deg));
            transform: rotateX(var(--rotate, 0deg));
  }
  90%, 100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}

/* ---------------------------------- */
.paper.-rogue {
  -webkit-transform-origin: top center -5vmin;
          transform-origin: top center -5vmin;
}

.paper.-rogue .segment {
  --rotate: 30deg;
  -webkit-animation-name: curve-rogue-paper;
          animation-name: curve-rogue-paper;
}

@-webkit-keyframes curve-rogue-paper {
  0%, 50% {
    -webkit-transform: rotateX(var(--rotate));
            transform: rotateX(var(--rotate));
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}

@keyframes curve-rogue-paper {
  0%, 50% {
    -webkit-transform: rotateX(var(--rotate));
            transform: rotateX(var(--rotate));
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}

.paper.-rogue > .segment {
  -webkit-animation: inherit;
          animation: inherit;
  -webkit-animation-name: rogue-paper;
          animation-name: rogue-paper;
  -webkit-transform-origin: left top 20vmin;
          transform-origin: left top 20vmin;
}

@-webkit-keyframes rogue-paper {
  0%, 2% {
    -webkit-transform: rotateX(1.5turn);
            transform: rotateX(1.5turn);
  }
  80%, 100% {
    -webkit-transform: rotateX(0turn);
            transform: rotateX(0turn);
  }
}

@keyframes rogue-paper {
  0%, 2% {
    -webkit-transform: rotateX(1.5turn);
            transform: rotateX(1.5turn);
  }
  80%, 100% {
    -webkit-transform: rotateX(0turn);
            transform: rotateX(0turn);
  }
}
/*# sourceMappingURL=style.css.map */

.te {
  width: 1000px;
  padding-right: 150px;
  float: left;
}

.Ship_Head {
  color: rebeccapurple;
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  text-shadow: 2px 2px 2px black;
}
.Ship_Content {
  font-size: 22px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif ;
  text-indent: 75px;
  
}
.main_SubHead_ship {
  color: wheat;
  margin-left: 200px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 32px;
  text-shadow: 4px 4px 4px black;
}
#main_heading_ship {
  color: black;
  padding-top: 600px;
  padding-bottom: 150px;
  padding-left: 100px;
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace;
}
.img_ship {
  margin-top: -320px;
  float: right;
  width: 100%;
  height: 700px;
  /* border-radius: 12%; */
  box-shadow: 2px 2px 6px black;
  z-index: -1;
  opacity: .6;
  background-size: cover;
}
.main_cont_ship {
  width: 850px;
  columns: 2;
  margin-top: -400px;
  margin-right: 300px;
  float: right;
  font-size: 24px;
  column-gap: 55px;
  column-rule-style: solid;
  color: black;
  font-weight: bold;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}


/* .foot_ship {
  
} */