@import url('https://fonts.googleapis.com/css?family=Merriweather');

body{
  padding: 0;
  margin: 0;
  font-family: 'Merriweather', Sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  background-image: linear-gradient(to right top, #0d0015, #0c0017, #0c0019, #0a001b, #08001d, #0c0823, #0d0f29, #0d1530, #131f3d, #18294a, #1d3357, #223e65);
}
.star{
  position: absolute;
  right: 0px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  animation: animationStarBlur 2s infinite linear;
}

.iron-man img{
  width: 150px;
  transform: scaleX(-1) rotate(-20deg);
  position: absolute;
  top: 55%;
  animation: animationFlying 6s infinite linear;
 }
.notify{
  color: #fff; 
  text-align: center;
}
.notify h3{
  font-size: 110px;
  margin: 30px 0;
}
.notify p{
  font-size: 18px;
}

.notify button{
  padding: 10px 30px;
  border: 0;
  background: #880000;
  font-size: 18px;
  border-radius: 5px;
  color: white; 
  outline:none;
}
.notify button:hover{
  cursor: pointer;
  background: #660000;
}
.notify button:active{
  transform: translate(-5px,-5px);
}

@keyframes animationFlying {
  0%{
    left: -150px;
  }
  100%{
    left: 110%;
  }
}

@keyframes animationStarBlur{
  0%{
      box-shadow: 0 0 5px rgba(255,255,255,.4);
  }
  25%{
    box-shadow: 0 0 15px rgba(255,255,255,.4);
  }
  50%{
    box-shadow: 0 0 5px rgba(255,255,255,.4);
  }
  75%{
    box-shadow: 0 0 15px rgba(255,255,255,.4);
  }
  100%{
    box-shadow: 0 0 5px rgba(255,255,255,.4);
  }
}

@media (max-width: 320px){
  .notify h3{
    font-size: 60px;
  }
}