@charset "UTF-8";
/* CSS Document */

#container{
	width: 1430px;
	height: 914px;
	background-image: url("hu_extraprojects/Images/indexbg.jpg");
	background-size: cover;
}
#header{
	height: 100px;
	width: 1430px;
	padding-top: 10px;
}
#word{
	text-align: center;
	font-size: 40px;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";	
}
#refsheetdiv{
	height: 55px;
	width: 1410px;
	float: left;
	margin-left: 10px;
	margin-top: 35px;
	background-color: #740305;	
	opacity: .85;
}
.grow:hover{
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
	color: #fff;
	padding: 10px;
	display: inline-block;
	border-radius: 5px;
	animation: blinkingBackground 2s infinite;
	}
	@keyframes blinkingBackground{
		0%		{ background-color: #740305;}
		20%		{ background-color: #CE250C;}
		40%		{ background-color: #F58D03;}
		60%		{ background-color: #E1B206;}
		80%		{ background-color: #6E9824;}
		100%	{ background-color: #64C0D4;}
}
#refsheetword{
	text-align: center;
	font-size: 17px;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	color: white;
}
#biodiv{
	height: 55px;
	width: 1410px;
	float: left;
	margin-left: 10px;
	margin-top: 25px;
	background-color: #CE250C;	
	opacity: .85;
}
#bioword{
	text-align: center;
	font-size: 17px;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	color: white;
}
#culturediv{
	height: 55px;
	width: 1410px;
	float: left;
	margin-left: 10px;
	margin-top: 25px;
	background-color: #F58D03;	
	opacity: .85;
}
#cultureword{
	text-align: center;
	font-size: 17px;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	color: white;
}
#ftddiv{
	height: 55px;
	width: 1410px;
	float: left;
	margin-left: 10px;
	margin-top: 25px;
	background-color: #E1B206;	
	opacity: .85;
}
#ftdword{
	text-align: center;
	font-size: 17px;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	color: white;
}
#hybriddiv{
	height: 55px;
	width: 1410px;
	float: left;
	margin-left: 10px;
	margin-top: 25px;
	background-color: #6E9824;	
	opacity: .75;
}
#hybridword{
	text-align: center;
	font-size: 17px;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	color: white;
}
#mariadiv{
	height: 55px;
	width: 1410px;
	float: left;
	margin-left: 10px;
	margin-top: 25px;
	background-color: #64C0D4;	
	opacity: .75;
}
#mariaword{
	text-align: center;
	font-size: 17px;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	color: white;
}
#mediadiv{
	height: 55px;
	width: 1410px;
	float: left;
	margin-left: 10px;
	margin-top: 25px;
	background-color: #9559D3;	
	opacity: .75;
}
#mediaword{
	text-align: center;
	font-size: 17px;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	color: white;
}
.funimages{
	width: 200px;
	height:200px;
	float:left;
	margin-top: 15px;
	margin-left: 70px;
}
#chinchilla{
	background-image: url("hu_extraprojects/Images/chinchillapicfinal.jpg");
	background-size: contain;
	opacity: .75;
}
#waffles{
	background-size: cover;
	opacity: .75;
	background-image: url("hu_extraprojects/Images/waffles.jpg");
}
#tarotea{
	background-size: contain;
	background-image: url("hu_extraprojects/Images/taroteafinal.gif");
}
#ramen{
	background-size: cover;
	opacity: .75;
	background-image: url("hu_extraprojects/Images/ramenfinal.jpg");
}
#toothless{
	background-size: contain;
	opacity: .75;
	background-image: url("hu_extraprojects/Images/toothlessfinal.jpg");
}
.funimages:hover{
	transform: scale(1.3);
}
#chinchilla:hover{
	height: 200px;
	width: 260px;
	background-image: url("photoshop/hu_photoshop/joshuakatz.jpg");
	background-size: cover;
	opacity: .99;	
}
#tarotea:hover{
	transform:scale(1.6);
}
@media (max-width: 1024px){
	#header{
		width: 1024px;
	}
	#container{
		width: 1024px;
	}
	#refsheetdiv{
		width: 1004px;
	}
	#biodiv{
		width: 1004px;
	}
	#culturediv{
		width: 1004px;
	}
	#ftddiv{
		width: 1004px;
	}
	#hybriddiv{
		width: 1004px;
	}
	#mariadiv{
		width: 1004px;
	}
	#mediadiv{
		width: 1004px;
	}
	.funimages{
		width: 150px;
		height:150px;
		float:left;
		margin-left: 45px;
	}
}

@media (max-width: 414px){
	#header{
		width: 414px;
		height: 130px;
	}
	#container{
		width: 414px;
	}
	#refsheetdiv{
		width: 394px;
		height: 45px;
		padding-top: 10px;
		clear: left;
	}
	#biodiv{
		width: 394px;
		height: 45px;
		margin-top: 20px;
		clear: left;
	}
	#culturediv{
		width: 394px;
		height: 45px;
		margin-top: 20px;
		clear: left;
	}
	#ftddiv{
		width: 394px;
		height: 45px;
		margin-top: 20px;
		clear: left;
	}
	#hybriddiv{
		width: 394px;
		height: 45px;
		margin-top: 20px;
		clear:left;
	}
	#mariadiv{
		width: 394px;
		height: 45px;
		margin-top: 20px;
		clear: left;
	}
	#mediadiv{
		width: 394px;
		height:45px;
		margin-top: 20px;
		clear: left;
	}
	.funimages{
		height: 100px;
		width: 100px;
		margin-left: 30px;
	}
}