body {
	margin:40px 0px 40px 0px;
	padding:0 0 0 0;
	font-family: arial, sans-serif;
	background-image:url('./images/bg.png');
}
#container {
	width:600px;
	margin-left:auto;
	margin-right:auto;
}
img.center{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
p.center{
	text-align:center;
}
p.big-text{
	font-size:24pt;
}
p.white{
	color:#FFFFFF;
}
.paragraph{
	font-size:12pt;
	text-indent:42px;
	margin:10px;
}
#content-box{
	margin-top:24px;
	background-color:#FFFFFF;
	padding:24px;
	border-radius:20px;
	border: 2px solid black
}
#footer{
	position: absolute;
	bottom:40px;
}
#errorText{
	border-radius:20px;
	padding:20px;
	margin-top:20px;
	margin-bottom:20px;
	border:2px solid #FF0000;
	background-color: #FF9999;
	font-weight:bold;
}
#signUpForm textarea{
	width:100%;
	height:8em;
}
#guess {
	font-family: 'Chewy', cursive;
	font-size:36px;
	width:1.8em;
}
#guess-button{
	font-family: 'Chewy', cursive;
	font-size:36px; 
    margin: 0px -60px; 
    position:relative;
    left:50%;
}
.header{
	color:#FFFF00;
	font-size:36px;
	text-align:center;
	font-family: 'Chewy', cursive;
	text-shadow: 1px 1px 0px #000000, -1px 1px 0px #000000, -1px -1px 0px #000000, 1px -1px 0px #000000;
}
.header2{
	font-size:24px;
	text-align:center;
	font-family: 'Chewy', cursive;
}
.hover-link{
	width:170px;
	height:130px;
	-webkit-transform: scale(0.9,0.9); /* Chrome, Safari, Opera */
	-ms-transform: scale(0.9,0.9); /* IE 9 */
	transform: scale(0.9,0.9);
}
.h-right{
	float:right;
}
.h-right:hover {
    -webkit-animation: grow .25s, twist-left 1s ease-in-out infinite alternate;
    /* Safari and Chrome */
    animation: grow .25s, twist-left 1s ease-in-out .25s infinite alternate;
}
.h-left{
	float:left;
}
.h-left:hover {
    -webkit-animation: grow .25s, twist-right 1s ease-in-out infinite alternate;
    /* Safari and Chrome */
    animation: grow .25s, twist-right 1s ease-in-out .25s infinite alternate;
}
@keyframes grow {
    0% {
        -ms-transform: scale(0.9,0.9);
        /* IE 9 */
        -webkit-transform: scale(0.9,0.9);
        /* Chrome, Safari, Opera */
        transform: scale(0.9,0.9);
    }
    100% {
        -ms-transform: scale(1,1);
        /* IE 9 */
        -webkit-transform: scale(1,1);
        /* Chrome, Safari, Opera */
        transform: scale(1,1);
    }
}
@-webkit-keyframes grow {
    0% {
        -ms-transform: scale(0.9,0.9);
        /* IE 9 */
        -webkit-transform: scale(0.9,0.9);
        /* Chrome, Safari, Opera */
        transform: scale(0.9,0.9);
    }
    100% {
        -ms-transform: scale(1,1);
        /* IE 9 */
        -webkit-transform: scale(1,1);
        /* Chrome, Safari, Opera */
        transform: scale(1,1);
    }
}
.banana-link{
	width:170px;
	height:130px;
	position:relative;
	text-decoration: none;
	text-align:center;
	color:#FFFFFF;
	
}
.banana-link img{
	position:absolute;
	left:0;
	top:0;
}
.bush-block{
	width:334px;
	padding-top:90px;
	margin-left:auto;
	margin-right:auto;
	transform-origin: center 90%;
}
.bush-block:hover{
	-webkit-animation: shake .2s;
    /* Safari and Chrome */
    animation: shake .2s;
}
.bush-link{
	width:334px;
	height:159px;
	position:relative;
	text-decoration: none;
	text-align:center;
	color:#FFFFFF;
}
.bush-link img{
	position:absolute;
	left:0;
	top:0;
}
.bush-link span{
	position:relative;
	width:334px;
	text-align:center;
	top:36px;
	display:block;
	margin-left:auto;
	margin-right:auto;
	line-height:1;
	font-family: 'Chewy', cursive;
	font-size: 36px;
	text-shadow: 1px 1px 0px #000000, -1px 1px 0px #000000, -1px -1px 0px #000000, 1px -1px 0px #000000;
}


@keyframes shake
{
0%{-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);}
25%{-ms-transform: rotate(-5deg); /* IE 9 */
-webkit-transform: rotate(-5deg); /* Chrome, Safari, Opera */
transform: rotate(-5deg);}
50%{-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);}
75%{-ms-transform: rotate(5deg); /* IE 9 */
-webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
transform: rotate(5deg);}
100%{-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);}
}
@-webkit-keyframes shake
{
0%{-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);}
25%{-ms-transform: rotate(-5deg); /* IE 9 */
-webkit-transform: rotate(-5deg); /* Chrome, Safari, Opera */
transform: rotate(-5deg);}
50%{-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);}
75%{-ms-transform: rotate(5deg); /* IE 9 */
-webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
transform: rotate(5deg);}
100%{-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);}
}

@keyframes twist-left
{
0%{-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);}
100%{-ms-transform: rotate(-30deg); /* IE 9 */
-webkit-transform: rotate(-30deg); /* Chrome, Safari, Opera */
transform: rotate(-30deg);}
}

@-webkit-keyframes twist-left /* Safari and Chrome */
{
0%{-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);}
100%{-ms-transform: rotate(-30deg); /* IE 9 */
-webkit-transform: rotate(-30deg); /* Chrome, Safari, Opera */
transform: rotate(-30deg);}
}
@keyframes twist-right
{
0%{-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);}
100%{-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);}
}

@-webkit-keyframes twist-right /* Safari and Chrome */
{
0%{-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);}
100%{-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);}
}
.banana-link span{
	position:relative;
	top:36px;
	display:block;
	margin-left:auto;
	margin-right:auto;
	line-height:1;
	font-family: 'Chewy', cursive;
	font-size: 36px;
	text-shadow: 1px 1px 0px #000000, -1px 1px 0px #000000, -1px -1px 0px #000000, 1px -1px 0px #000000;
}
.banana-block{
	display:block;
	height:150px;
}
.bg{
	position:absolute;
	top:250px;
	z-index:-1;
}
.footer{
	position:relative;
	top:20px;
	text-align:center;
	color: #FFFFFF;
}
.footer a{
	color: #DDDDDD;
}
.purchaseBox{
	padding:12px;
	margin-left:auto;
	margin-right:auto;
	border-radius:10px;
	border: 1px solid black;
	text-align:center;
	width:275px;
}
.purchaseBox table{
	margin:auto;
	width:100%;
}
.price{
	font-size:24px;
}
.notice {
	margin-top:20px;
	margin-bottom:20px;
	padding:12px;
	text-align:center;
	border-radius:10px;
	border: 1px solid red;
	font-weight:bold;
	background-color:#FFDDDD;
}
.correct {
	margin-top:20px;
	margin-bottom:20px;
	padding:12px;
	text-align:center;
	border-radius:10px;
	border: 1px solid green;
	font-weight:bold;
	background-color:#DDFFDD;
}
#bananarain{
	overflow:hidden;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
}
@media only screen and (max-device-width: 480px) {
	.text-input {
		font-size: 18pt;
	}
	.paragraph{
		font-size:16pt;
	}
	.header{
		font-size:48px;
	}
	.header2{
		font-size:36px;
	}
	#container {
		width:100%;
		margin-left:auto;
		margin-right:auto;
	}
	.bg{
		width:100%;
		top:170px;
	}
	.title-img{
		width:100%;
	}
	.banana-link{
		width:170px;
		height:130px;
	}
	.banana-link img{
		width:100px;
	}
	.bush-block{
		width:200px;
		padding-top:0px;
	}
	.bush-link{
		width:200px;
		height:95px;
	}
	.bush-link img{
		width:200px;
	}
	.bush-link span{
		width:200px;
		font-size: 24px;
	}
	.banana-link span{
		font-size: 24px;
	}
	.banana-block{
		height:100px;
		width:100%;
	}
	.hover-link{
		width:100px;
		height:76px;
	}
	.book-ad{
		width:80%;
	}
	.purchaseBox{
		width:90%;
	}
	.purchaseBox table, select, input{
		width:200px;
	}
}