@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

html {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	background: url('background-2.jpg') center center no-repeat;
	background-attachment: fixed;
	background-size: cover;
	text-align: center;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	height: 100%;
	display: flex;
	justify-content: center;
	animation-duration: 20s;
	animation-name: body;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

h1 {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;
	font-family: 'Press Start 2P', cursive;
	font-size: 5vw;
	text-shadow: 0 0 50px #fff;
	margin: 0;
	z-index: 3;
	border-right: solid 3px rgba(255,255,255,1);
	white-space: nowrap;
	animation: animated-cursor 600ms steps(12,end) infinite;
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
	z-index: 3;
}

div {
    position: fixed;
	background: url('background.jpg') center center no-repeat;
	background-size: cover;
	text-align: center;
	margin: 0;
	padding: 0;
	overflow: hidden;
	height: 100%;
	width: 100%;
	opacity: 0;
	animation-duration: 10s;
	animation-name: zoomin;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	z-index: 2;
}

div:last-of-type {
	background: url('background-2.jpg') center center no-repeat;
	background-size: cover;
	animation-delay: 5s;
	animation-name: zoomout;
	z-index: 1;
}

@keyframes zoomin {
  0% {
	transform: scale(1.2) rotate(0deg);
    opacity: 0;
	visibility: visible;
  }

  50% {
	opacity: .5;	  
  }

  100% {
	transform: scale(2) rotate(-10deg);
	opacity: 0;
	visibility: hidden; 
  }
}

@keyframes zoomout {
  0% {
	transform: scale(2) rotate(-10deg);
    opacity: 0;
	visibility: visible;
  }

  50% {
	opacity: .5;	  
  }

  100% {
	transform: scale(1) rotate(0deg);
	opacity: 0;
	visibility: hidden; 
  }
}

@keyframes body {
  0% {
	background: url('background-2.jpg') center center no-repeat;
	background-attachment: fixed;
	background-size: cover;
  }

  50% {
	background: url('background.jpg') center center no-repeat; 
	background-attachment: fixed;
	background-size: cover;
  }

  100% {
	background: url('background-2.jpg') center center no-repeat;
	background-attachment: fixed;
	background-size: cover;
  }
}

@keyframes animated-cursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}