body{
    background-color: #32a873;
    color: #692609;
}

p{
    text-align: center;
    font-family:  Comic Sans MS, Segoe UI, Trebuchet MS, Helvetica;
}

.header{    
    font-size: 85px ;
    font-weight: 700; 
}

.tiles{
    text-align: center;
    display: flex;
}

.tile{
    flex: 33.33%;
    padding: 5px;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

.footer{
    font-style: oblique;
    position:absolute;
    width:100%;
    height:60px;   /* Height of the footer */
    padding-top: 100px;
 }

 @keyframes bounce {
	0%, 100%, 20%, 50%, 80% {
		-webkit-transform: translateY(0);
		-ms-transform:     translateY(0);
		transform:         translateY(0)
	}
	40% {
		-webkit-transform: translateY(-30px);
		-ms-transform:     translateY(-30px);
		transform:         translateY(-30px)
	}
	60% {
		-webkit-transform: translateY(-15px);
		-ms-transform:     translateY(-15px);
		transform:         translateY(-15px)
	}
}

.tile:hover{
    transition: 1s;
    cursor: pointer;
    animation-name: bounce;
    -moz-animation-name: bounce;
}