// mixins
    @mixin breakpoint($point) {
        @if $point==mobile {
            @media (max-width: 480px) and (min-width: 320px) {
                @content ;
            }
        }
    }

    // keyrames
    @-o-keyframes floating {
        from { transform: translateY(0px); }
        65%  { transform: translateY(15px); }
        to   { transform: translateY(-0px); }
    }
    
    @-moz-keyframes floating {
        from { transform: translateY(0px); }
        65%  { transform: translateY(15px); }
        to   { transform: translateY(-0px); }
    }
    
    @keyframes floating {
        from { transform: translateY(0px); }
        65%  { transform: translateY(15px); }
        to   { transform: translateY(-0px); }
    }
    
    @keyframes wobble {
    0%, 100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }

    15% {
        -webkit-transform: translateX(-5px) rotate(-2deg);
        transform: translateX(-5px) rotate(-2deg);
    }

    30% {
        -webkit-transform: translateX(calc(5px / 2)) rotate(2deg);
        transform: translateX(calc(5px / 2)) rotate(2deg);
    }

    45% {
        -webkit-transform: translateX(calc(-5px / 2)) rotate(calc(-2deg / 1.8));
        transform: translateX(calc(-5px / 2)) rotate(calc(-2deg / 1.8));
    }

    60% {
        -webkit-transform: translateX(calc(5px / 3.3)) rotate(calc(2deg / 3));
        transform: translateX(calc(5px / 3.3)) rotate(calc(2deg / 3));
    }

    75% {
        -webkit-transform: translateX(calc(-5px / 5.5)) rotate(calc(-2deg / 5));
        transform: translateX(calc(-5px / 5.5)) rotate(calc(-2deg / 5));
    }
}
    
    
html {
  height: 100%;
}

body{
  background-image: url('https://assets.codepen.io/1538474/star.svg'),linear-gradient(to bottom, #05007A, #4D007D);
  height: 100%;
  margin: 0;
  background-attachment: fixed;
  overflow: hidden;
  font-family: "Nunito";
}

.mars{
  left:0;
  right:0;
  bottom:0;
  position:absolute;
  height: 27vmin;
  background: url('https://assets.codepen.io/1538474/mars.svg') no-repeat bottom center;
  background-size: cover;
}

.logo-404{
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 16vmin;
  width: 30vmin;

  @include breakpoint(mobile){
    top: 45vmin;
  }
}

.meteor{
  position: absolute;
  right: 2vmin;
  top: 16vmin;
}

.title{
  color: white;
  font-family: $nunito-font;
  font-weight: 600;
  text-align: center;
  font-size: 5vmin;
  margin-top: 31vmin;

  @include breakpoint(mobile){
    margin-top: 65vmin;
  }
}

.subtitle{
  color: white;
  font-family: $nunito-font;
  font-weight: 400;
  text-align: center;
  font-size: 3.5vmin;
  margin-top: -1vmin;
  margin-bottom: 9vmin;
}

.btn-back{
  border: 1px solid white;
  color: white;
  height: 5vmin;
  padding: 12px;
  font-family: $nunito-font;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 600;
}

.btn-back:hover{
    background: white;
    color: #4D007D;
    transition: 0.6s;
}


.astronaut{
  position: absolute;
  top: 18vmin;
  left: 10vmin;
  height: 30vmin;
	animation: floating 3s infinite ease-in-out;

  @include breakpoint(mobile){
    top: 2vmin;
  }
}

.spaceship{
  position: absolute;
  bottom: 15vmin;
  right: 24vmin;
  animation: wobble 3s ease infinite;

  @include breakpoint(mobile){
    width: 45vmin;
    bottom: 18vmin;
  }
}

@media (max-width: 767px){
    .astronaut {
      top: 5vmin;
      left: 3vmin;
      }
  
    .spaceship {
        right: 10vmin;
    }
  
}