html {
	font-size: 25px;
	font-family: 'Indie Flower', cursive;
	font-family: 'Amatic SC', cursive;
	background-color: #c4d4ed;
}
h1 {
	color: black;
	font-size: 60px;
	text-align: center;
	margin: 0;
	padding: 15px 0;
	text-shadow: 3px -3px 0 white;
}

p, a {
	font-size: 25px;
	line-height: 1;
	letter-spacing: 3px;
	margin: 10px auto;
	text-shadow: 1.5px -1.5px 0 white;
}
body {
  width: 620px;
  margin: 15px auto;
  background-color: #e1e6ef;
  padding: 0 20px 20px 20px;
	border: 5px solid black;
	text-align: center;
  animation-name: body-appearence;
  animation-fill-mode: forwards;
  animation-duration: 3s;
}
@keyframes body-appearence {
	0% {
		transform: translateX(300px);
		opacity: 0;
	}
	100% {
		transform: translateX(0px);
		opacity: 1;
	}
}

td {
	width: 200px;
	text-align: right;
	padding: 0 50px 0 50px;
}

#upper-img {
  display: block;
  margin: 0 auto;
  animation-name: img-appearence;
  animation-fill-mode: forwards;
  animation-duration: 3s;
}

@keyframes img-appearence {
	0% {
		transform: translateX(-600px);
		opacity: 0;
	}
	100% {
		transform: translateX(0px);
		opacity: 1;
	}
}


#cloud_main {
	position: relative;
	height: 400px;
	width: 640px;
}

.cloud {
	position: absolute;
	top: 50px;
	left: 50px;
	width: 640px;
	height: 400px;
	z-index: -10;
}

#cloud28 {
	transform: translateX(-1100px, 0);
	animation-name: cloud28;
	animation-iteration-count: infinite;
	animation-duration: 60s;
	animation-delay: -18s;
}

@keyframes cloud28 {
	0% {
		transform: translate(-1100px, 0);
	}
	30% {
		transform: translate(1100px, 0);
	}
	100% {
		transform: translate(-1100px, 0);
	}
}

#cloud32 {
	transform: translate(1100px, -200px);
	animation-name: cloud32;
	animation-iteration-count: infinite;
	animation-duration: 60s;
	animation-delay: -6s;
}

@keyframes cloud32 {
	0% {
		transform: translate(1100px, -200px);
	}
	30% {
		transform: translate(-1100px, -200px);
	}
	100% {
		transform: translate(1100px, -200px);
	}
}

#cloud31{
	transform: translate(1100px, 200px);
	animation-name: cloud31;
	animation-iteration-count: infinite;
	animation-duration: 60s;
	animation-delay: -12s;
}

@keyframes cloud31 {
	0% {
		transform: translate(1100px, 200px);
	}
	30% {
		transform: translate(-1100px, 200px);
	}
	100% {
		transform: translate(1100px, 200px);
	}
}

#cloud29 {
	transform: translate(-1100px, 500px);
	animation-name: cloud29;
	animation-iteration-count: infinite;
	animation-duration: 60s;
	animation-delay: -24s;
}

@keyframes cloud29 {
	0% {
		transform: translate(-1100px, 500px);
	}
	30% {
		transform: translate(1100px, 500px);
	}
	100% {
		transform: translate(-1100px, 500px);
	}
}

button {
	display: block;
	margin: 0 auto;
	font-size: 30px;
	font-family: 'Indie Flower', cursive;
	font-family: 'Amatic SC', cursive;
	background-color: #c4d4ed;
	text-align: center;
    text-decoration: none;
	border: none;
    color: white;
    padding: 15px 32px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
button:hover {
	background-color: white;
	border: 4px solid #c4d4ed;
	color: black;
	padding: 11px 32px;
}

a {
	text-decoration: none;
}