@import 'https://fonts.googleapis.com/css?family=Quattrocento';
@import 'https://fonts.googleapis.com/css?family=Oswald:300';
body
	{
		position: relative;
		background-color: #DADFE1;
		margin: 10px auto;
		padding: 0;
	}
	h1
	{
		text-align: center;
		color: #5C97BF;
		font-family: 'Quattrocento';
		font-size: 3em;
		text-transform: lowercase;
	}
	#tea-hold, #timer-hold
	{
		margin: 10px auto;
		background-color: #DADFE1;
		border: 1px solid #34495E;
		text-align: center;
	}
	#tea-hold{
		width:250px;
		height:auto;
		padding:3%
	}
	#teacup-hold
	{
		width: 250px;
		height: 250px;
	}
		#tea-list
		{
			list-style: none;
			margin: 10px;
			padding: 0;
		}
			.tea
			{
				border-radius: 3px;
				background-color: #5C97BF;
				width: 75;
				padding: 3% 0;
				margin-bottom: 5%;
				font-family: 'Oswald';
				font-size: 1em;
				color: #FFF;
				cursor: pointer;
			}
			.tea:hover
			{
				background-color: #FDFDFD;
				color: #000;
			}
	#timer-hold
	{
		margin: 0 auto;
		width: 150px;
		height: auto;
		display: none;
	}
		#teatime
		{
			position: static;
			margin: 0;
			padding: 0;
			width: 100px;
			height:auto;
			font-family: 'Oswald';
			font-size: 45px;
			color: #6C7A89;
			display: inline;
		}
	#teacup-hold
	{
		position: relative;
		margin: 10px auto 0 auto;
		background-color: #5C97BF;
		border-radius: 125px;
		display: none;
	}
		#teacup-empty, #teacup-full
		{
			position: absolute;
			margin: 0 auto;
			width: 90px;
			height: 110px;
			background-color: #F27935;
			border-radius: 0px 0px 20px 20px;
		}
		#teacup-empty
		{
			top: 50%;
		}
			#teacup-empty:before
			{
				position: absolute;
				content: "";
				top: 10px;
				left: 90px;
				width: 25px;
				height: 70px;
				background-color: #F27935;
				border-radius: 0px 15px 15px 0px;
			}
			#teacup-handle
			{
				position: absolute;
				top: 36%;
				left: 68%;
				width: 15px;
				height: 50px;
				border-radius: 0px 10px 10px 0px;
				background-color: #5C97BF;
			}
			#teabag
			{
				position: absolute;
				margin: 0 auto;
				top: 28%;
				left: 60%;
				width: 5px;
				height: 30px;
				background-color: white;
				z-index: 10;
			}
				#teabag:before
				{
					position: absolute;
					content: "";
					top: 30px;
					left: -5px;
					width: 15px;
					height: 15px;
					background-color: #FFF;
				}
		#teacup-full
		{
			position: relative;
			background-color: #F4B350;
			z-index: 1;
			border-radius: 0px;
			height: 90px;
			animation: loading ease 15s infinite;
				-webkit-animation: loading ease 15s infinite;
					-moz-animation: loading ease 15s infinite;
						-o-animation: loading ease 15s infinite;
		}

			@keyframes loading
			{
				0%		{height: 90px;}
				100% 	{height: 0px;}
			}
			@-webkit-keyframes loading
			{
				0%		{height: 90px;}
				100% 	{height: 0px;}	
			}
			@-moz-keyframes loading
			{
				0%		{height: 90px;}
				100% 	{height: 0px;}	
			}
			@-o-keyframes loading
			{
				0%		{height: 90px;}
				100% 	{height: 0px;}	
			}
		p
		{
			position: absolute;
			margin: 0 auto;
			top: 80%;
		    left: 50%;
		    margin-right: -50%;
		    transform: translate(-50%, -50%);
		    font-family: 'Helvetica', sans-serif;
		    font-size: 25px;
		    color: white; 
		}
	#restart
	{
		position: relative;
		width: 100px;
		padding: 10px;
		margin-top: 30px;
		background-color: #FFF;
	    font-family: 'Helvetica', sans-serif;
	    font-size: 16px;
	    color: #34495E;
	    border: none;
	    border-radius: 5px;
		cursor: pointer;
		display: none;
	}
	#restart:active, #restart:focus 
	{
		outline: 0;
	}

	#teacup-empty, p, #restart
	{
		left: 50%;
		margin-right: 50%;
		transform: translate(-50%,-50%);
	}

/*CREDITS*/
.about{
	position: absolute;
	bottom:0; 
	left: 49%;
	with: 50px;
}
.about a{
	text-decoration: none;
	font-size: 1.5em;
}
.about a:visited, .about a:active, .about a:link{
	color:#000;
}
.about a:hover{
	color: red;
}