body, p {
    font-family: 'Montserrat', sans-serif;
    color: #FFFFFF;
    background-color: #61A6FB;
    text-shadow: .125vw .625vw .725vw rgba(0, 0, 0, 0.7);
}

#happy {
    color: #7fff00;
    font-weight: bold;
}
	
a{
	outline: 0;
}

@media (orientation: portrait){
	body, p{
		margin: 12%;
		padding: 0%;
		font-size: 2.0em;
		font-size: 6.5vw;
	}
	
	p{
		margin: 0%;
		padding: 6% 0% 6% 0%;	
		padding: 3vh 0vh 3vh 0vh;				
	}			

	img {
		display:block;
		max-width: 362px;
		max-height: 350px;
		padding-bottom: 6%;
		padding-bottom: 3vh;
	}

	.centered {
		margin: auto;
		width: 100%;
		height: auto;				
	}	
	
	section{
		text-align: center;
	}	
	
	#buttonContainer{
		border: 1px solid transparent;
		height: 20%;		
		height: 15vw;
		margin-top: 7.6%;
		margin-top: 3.5vw;
		padding: 0;
	}	

	.button {
		font-family: inherit;
		text-shadow: inherit;
		font-size: 1.25em;
		font-size: 4.5vw;
		border: none;
		color: #FFFFFF;
		font-weight: normal;
		background-color: #4900fd;
		padding: 1.5% 0% 3.1% 0%;
		padding: .6vw 0 1.3vw 0;
		margin:0% auto 0% auto;
		text-align: center;
		text-decoration: none;
		border-radius: 50%;
		display: block;
		height: 100%;
		height: 15vw;
		width: 45%;	
		width: 38vw;
		cursor: pointer;
	}	
	
	button:focus {outline:0;}

	button::-moz-focus-inner {
	  border: 0;
	}
	
	button:hover {
		text-shadow:none;			
		padding: 1.75% 0% 2.8% 0%;
		padding: 2.4vw 0 2vw 0;
		margin-top: 20%;
		margin-top: 2vw;		
		width: 40%;
		width: 40vw;
		height: 80%;		
		height: 12vw;		
	}	
}

@media(orientation: landscape){
	body, p{
		margin: 0px;
		padding: 0px;
		font-size: 2em;				
		font-size: 4vw;
	}
	
	p{
		padding-bottom: 5%;			
	}
	
	p:last-of-type{
		padding-bottom: 0;
	}

    #spriteContainer {

        width: 35%;
        min-height: 1px;
        height: auto;
        padding: 0% 4.5% 0% 6.5%;
        background: url("../images/shadowOnGreenBlueSprites.png") no-repeat 0% 0%;
        background-size: 300% 300%;
        animation: looking-x 2s steps(3) infinite, looking-y 6s steps(3) infinite;
    }

    @keyframes looking-x {
        0% {
            background-position-x: 0%;
        }

        100% {
            background-position-x: 150%;
        }
    }

    @keyframes looking-y {
        0% {
            background-position-y: 0%;
        }

        100% {
            background-position-y: 150%;
        }
    }

    img {
        width: 35%;
        height: auto;
        padding: 0% 4.5% 0% 6.5%;
    }

    .centered {
        position: fixed; /* or absolute */
        top: 45%;
        transform: translate(0%, -50%);
        -webkit-transform: translate(0%, -50%); /* Safari */
        -ms-transform: translate(0%, -50%); /* IE 9 */
    }

    section {
        width: 46%;
        left: 46%;
        height: auto;
        padding: 5% 5% 0% 0%;
        text-align: center;
    }

    #buttonContainer {
        border: 1px solid transparent;
        height: 20%;
        height: 7vw;
        margin-top: 7.6%;
        margin-top: 3.5vw;
        padding: 0;
    }

    .button {
        font-family: inherit;
        text-shadow: inherit;
        font-size: 1em;
        font-size: 2vw;
        border: none;
        color: #FFFFFF;
        font-weight: normal;
        background-color: #4900fd;
        padding: 1.5% 0% 3.1% 0%;
        padding: .6vw 0 1.3vw 0;
        margin: 0% auto 0% auto;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        display: block;
        height: 100%;
        height: 7vw;
        width: 37.25%;
        width: 17vw;
        cursor: pointer;
    }

    button:focus {
        outline: 0;
    }

    button::-moz-focus-inner {
        border: 0;
    }

    button:hover {
        text-shadow: none;
        padding: 1.75% 0% 2.8% 0%;
        padding: .7vw 0 .9vw 0;
        margin-top: 20%;
        margin-top: .75vw;
        width: 40%;
        width: 18.5vw;
        height: 80%;
        height: 6vw;
    }
    }