html {
  min-height: 400px;
}
body {
  min-height: 400px;
  height: 100vh;
  position: relative;
  background-color: #483d8b;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}
.feiji{
  position: absolute;
  left: 50%;
  top: 50%;
}
.feiji:before,
.feiji:after {
  display: block;
  content: '';
  position: absolute;
}
@media (max-width: 400px) {
  .feiji:not(.no-scale) {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
#ship {
  width: 20em;
  height: 30em;
  top: auto;
  margin-left: 1em;
  bottom: -1em;
  background-repeat: no-repeat;
  background-image: radial-gradient(circle, white 60%, rgba(255,255,255,0) 61%), radial-gradient(circle, white 60%, rgba(255,255,255,0) 61%), radial-gradient(circle, white 60%, rgba(255,255,255,0) 61%), radial-gradient(circle, white 60%, rgba(255,255,255,0) 61%), linear-gradient(white, white), linear-gradient(40deg, white 56%, rgba(255,255,255,0) 57%), radial-gradient(circle at 0 50%, #7a6ec0 60%, rgba(72,61,139,0) 60.5%);
  background-size: 3em 3em, 4em 4em, 5em 5em, 3.5em 3.5em, 3.5em 1em, 3.5em 3em, 8em 16em;
  background-position: left 5em bottom -1em, left 7em bottom -1em, left 10em bottom -1em, left 14em bottom -1em, left 0 bottom 14.5em, left 0 bottom 15.5em, left -0.8em center;
  border-bottom-left-radius: 50%;
  box-shadow: -1.1em 2em 0 -1em white, -2.3em 4em 0 -2em #dcd9ee, -4.5em 7em 0 -4em #aba4d7, -6.8em 10em 0 -6em #7a6ec0, -7.2em 20em 0 -6em #7a6ec0;
}
@media screen and (max-width: 400px) {
  #ship {
    bottom: -3.5em;
    margin-left: -1.5em;
  }
}
#ship:before {
  width: 100%;
  height: 100%;
  left: calc(-100% - 1.4em);
  background-repeat: no-repeat;
  background-image: radial-gradient(circle, white 60%, rgba(255,255,255,0) 61%), radial-gradient(circle, white 60%, rgba(255,255,255,0) 61%), radial-gradient(circle, white 60%, rgba(255,255,255,0) 61%), radial-gradient(circle, white 60%, rgba(255,255,255,0) 61%), linear-gradient(white, white), linear-gradient(-45deg, white 56%, rgba(255,255,255,0) 57%), radial-gradient(circle at 100% 50%, #7a6ec0 60%, rgba(72,61,139,0) 60.5%);
  background-size: 3em 3em, 4em 4em, 5em 5em, 3.5em 3.5em, 3.5em 1em, 3.5em 3em, 8em 16em;
  background-position: right 5em bottom -1em, right 7em bottom -1em, right 10em bottom -1em, right 14em bottom -1em, right 0 bottom 14.5em, right 0 bottom 15.5em, right -0.8em center;
  border-bottom-right-radius: 50%;
  box-shadow: 1.1em 2em 0 -1em white, 2.3em 4em 0 -2em #dcd9ee, 4.5em 7em 0 -4em #aba4d7, 6.8em 10em 0 -6em #7a6ec0;
}
#ship:after {
  width: 3em;
  height: 10em;
  top: 6em;
  left: -2.2em;
  background-color: white;
  background-repeat: no-repeat;
  background-image: radial-gradient(ellipse at 50% 100%, #aba4d7 40%, rgba(255,255,255,0) 42%), radial-gradient(ellipse at 50% 100%, #aba4d7 40%, rgba(255,255,255,0) 42%);
  background-size: 1.5em 3.5em, 1.5em 3.5em;
  background-position: 0 100%, 100% 100%;
  border-top-left-radius: 3em 15em;
  border-top-right-radius: 3em 15em;
  box-shadow: inset 0 1.4em 0 -1em white, inset 0 2.5em 0 -1.5em white, inset 0.3em 0 0 white, inset -0.3em 0 0 white, inset 0 3em 0 -1.5em #aba4d7, 0 -9em 0 0 #483d8b, -0.7em 1.5em 0 -1em white, 0.7em 1.5em 0 -1em white;
}

.error-code {
  font-size: 220px;
  line-height: 170px;
  font-weight: 800;
  text-align:center;
  color:#fff;
  position:absolute;
  width:100%;
  top:100px;
}