body {
	background-color: #C6D8EC;
}

/*#content_1 {
	display: block;
}

#content_2 {
	display: none;
}


@media screen and (min-width: 480px) {
	
	body {
		background-color: lightgreen;
	}

	#content_1 {
		display: none;
	}

	#content_2 {
		display: block;
	}

}*/

#txt_temp{
	position: absolute;
	top: 200px;
	left: 50%;
	width: 400px;
	height: 200px;
	font-size: 20px;
	text-align: center;
	color: black;
	background-color: lightgrey;
}

#words{
	font-family: sans-serif;
	font-size: 50px;
	position: absolute;
	color: white;
	top: 200px;
	left: 300px;
}

#txtDiv{
	font-family: sans-serif;
	font-size: 30px;
	position: absolute;
	color: white;
	top: 50px;
	left: 30px;
}




#two{
	width: 100%;
	height: 100%;
	background: lightblue;
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
}
audio{
	display: none;
}


.changing_state{
	width: 100%;
	height: 400px;
	position: absolute;
	background: lightblue;
	left: 0px;
	top: 500px;
}

.changing_state_two{
	width: 100%;
	height: 400px;
	position: absolute;
	background: #0957C3;
	left: 0px;
	top: 500px;
}

.changing_sun{
	width: 100px;
	height: 100px;
	background: yellow;
	position: absolute;
	top: 50px;
	left: 900px;
	display: none;

}

.sun{
	width: 100px;
	height: 100px;
	background: #FFD94A;
	position: absolute;
	top: 50px;
	left: 900px;
	display: none;

}





#clouds{
	width: 300px;
	height: 100px;
	border-radius: 50px;
	background: white;
	position: absolute;
	left: 900px;
	display: none;
}


#happyclyde{
	width: 600px;
	position: absolute;
	top: 200px;
	left: 200px;
	display: none;
}

#hotfishy{
	width: 200px;
	position: absolute;
	top: 600px;
	left: 100px;
	-webkit-animation-name: example3; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
    animation-name: example3;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    display: none;
	
}

#coldfishy{
	width: 200px;
	position: absolute;
	top: 600px;
	left: 100px;
	display: none;
	
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example3 {
    0%   {left:100px;}
    25%  {left:500px;}
    50%  {left:900px;}
    75%  {left:1500px;}
    100% {left:100px;}
}

/* Standard syntax */
@keyframes example3 {
    0%   {left:100px;}
    25%  {left:500px;}
    50%  {left:900px;}
    75%  {left:1500px;}
    100% {left:100px;}
}

#warmclyde{
	width: 600px;
	position: absolute;
	top: 200px;
	left: 200px;
	display: none;
	-webkit-animation-name: example2; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
    animation-name: example2;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example2 {
    0%   {top: 200px; left:200px;}
    25%  {top: 300px; left:300px;}
    50%  {top: 200px; left:400px;}
    75%  {top: 300px; left:500px;}
    100% {top: 200px; left:200px;}
}

/* Standard syntax */
@keyframes example2 {
  	0%   {top: 200px; left:200px;}
    25%  {top: 300px; left:300px;}
    50%  {top: 200px; left:400px;}
    75%  {top: 300px; left:500px;}
    100% {top: 200px; left:200px;}
}



/*Clyde turns into a dragon and can breathe fire because he's awesome.*/
#hotclyde{
	width: 600px;
	position: absolute;
	top: 200px;
	left: 200px;
	display: none;
}

#fire{
	width: 50px;
	position: absolute;
	top: 490px;
	left: 800px;
	display: none;
}




#coldclyde{
	width: 600px;
	position: absolute;
	top: 100px;
	left: 100px;
	display: none;
	-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

/*Clyde dances to stay warm.*/
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {left:100px;}
    25%  {left:300px;}
    50%  {left:100px;}
    75%  {left:300px;}
    100% {left:100px;}
}

/* Standard syntax */
@keyframes example {
    0%   {left:100px;}
    25%  {left:300px;}
    50%  {left:100px;}
    75%  {left:300px;}
    100% {left:100px;}
}



#rainman{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
}

#emptyImg{
	position: absolute;
	left: 200px;
}