body {
	background-color: #006AC6;
}

/*#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: 40px;
	position: absolute;
	color: white;
	top: 30px;
	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: #382E2C;
	left: 0px;
	top: 500px;
}

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

}

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

}



#cage{
	position: absolute;
	width: 600px;
	top: 100px;
	left: 200px;
	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;
}

#happynobody{
	width: 600px;
	position: absolute;
	top: 200px;
	left: 700px;
	display: none;
	-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4;
    animation-iteration-count: 1;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {left:1000px;}
    25%  {left:900px;}
    50%  {left:800px;}
    75%  {left:700px;}
    100% {left:600px;}
}

/* Standard syntax */
@keyframes example {
 	0%   {left:1000px;}
    25%  {left:900px;}
    50%  {left:800px;}
    75%  {left:700px;}
    100% {left:600px;}
}

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

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

#elephant{
	width: 400px;
	position: absolute;
	top: 400px;
	left: 800px;
	display: none;

}

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


#intro{
	position: absolute;
	width: 500px;
	left: 500px;
	top: 25%;
}