.header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.69), rgba(0, 0, 0, 0.69)), url(img/hero.jpg);
    background-size: cover;
    height: 100vh;
}



.question1 {
  margin: 50px;   
  width: 100px;
  height: 100px;
  background-color: pink;
  animation-name: myAnimation;
  animation-duration: 4s;
}

@keyframes myAnimation {
    0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.question2 {
  margin: 50px;   
  width: 100px;
  height: 100px;
  background-color: lightblue;
  animation-name: moveAnimation;
  animation-duration: 4s;
  position: relative;
}

@keyframes moveAnimation {
    from {background-color: green;}
  to {background-color: lightblue;}
}

h1{
    -webkit-animation: puff-in-center 1.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
	animation: puff-in-center 1.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}

@-webkit-keyframes puff-in-center {
  0% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes puff-in-center {
  0% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}