body{
	background-color: #000000;
	overflow: hidden;
}

.enter {
	background-color: #000000;
	color: #ffffff;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	text-align: center;
	font-family: avenir, san-serif;

}

.snow {
	background-color: #ffffff;
	overflow: hidden;
}

.max {
	height: 150px;
	width: 150px;
	background-color: #000000;
	border: 2px solid #ffffff;
	left: 10%;
	top: 30%;
	position: relative;
}
.blackdot1 {
	height: 25px;
  	width: 25px;
 	background-color: #000000;
 	border-radius: 50%;
 	border: 2px solid #ffffff;
 	position: fixed;
	animation-name: blackdot; 
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-delay: 0%;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.temp{
	height: 150px;
	width: 150px;
	background-color: #000000;
	border: 2px solid #ffffff;
	left: 60%;
	top: 50%;
	position: relative;
	animation-name: temp; 
	animation-duration: 5s;
	animation-timing-function: ease-in-out;
	animation-delay: 0%;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.min {
	height: 150px;
	width: 150px;
	background-color: #000000;
	border: 2px solid #ffffff;
	left: 20%;
	top: 50%;
	position: relative;
}

.blackdot2 {
	height: 25px;
  	width: 25px;
 	background-color: #000000;
 	border-radius: 50%;
 	border: 2px solid #ffffff;
 	position: absolute;
 	animation-name: blackdot; 
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-delay: 0%;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.whitedot2 {
	height: 25px;
  	width: 25px;
 	background-color: #ffffff;
 	border-radius: 50%;
 	border: 2px solid #000000;
 	position: absolute;
 	animation-name: whitedot; 
	animation-duration: 5s;
	animation-timing-function: ease-in-out;
	animation-delay: 0%;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}



.whitedot1 {
	height: 25px;
  	width: 25px;
 	background-color: #ffffff;
 	border-radius: 50%;	
 	border: 2px solid #000000;
 	position: absolute;
 	animation-name: whitedot; 
	animation-duration: 5s;
	animation-timing-function: ease-in-out;
	animation-delay: 0%;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.cloud {
	height: 150px;
	width: 150px;
	background-color: #ffffff;
	border: 2px solid #000000;
	top: 0%;
	position: relative;
	animation-name: cloud;
	animation-duration: 10s;
	animation-timing-function: ease-in-out;
	animation-delay: 0%;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.nocloud {
	height: 150px;
	width: 150px;
	background-color: #ffffff;
	border: 2px solid #000000;
	opacity: 0;
	top: 0%;
	position: relative;
	animation-name: cloud;
	animation-duration: 10s;
	animation-timing-function: ease-in-out;
	animation-delay: 0%;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.humid {
	position: fixed;
	animation-name: humid; 
	animation-duration: 20s;
	animation-timing-function: ease-in-out;
	animation-delay: 0%;
	animation-iteration-count: infinite;
	animation-direction: alternate;

}

.humid2 {
	position: fixed;
	animation-name: humid; 
	animation-duration: 30s;
	animation-timing-function: ease-in-out;
	animation-delay: 0%;
	animation-iteration-count: infinite;
	animation-direction: alternate;

}

.humid3 {
	position: fixed;
	animation-name: humid; 
	animation-duration: 45s;
	animation-timing-function: ease-in-out;
	animation-delay: 0%;
	animation-iteration-count: infinite;
	animation-direction: alternate;

}

.humiddot {
	height: 25px;
  	width: 25px;
 	background-color: #000000;
 	border-radius: 50%;
 	border: 2px solid #ffffff;
 	position: relative;
	display: inline-block;

}

.rain {
	position: fixed;
	height: 100%;
	width: 10%;
	left: 40%;
	top: 30%;

}

.blackdot3 {
	height: 25px;
  	width: 25px;
 	background-color: #000000;
 	border-radius: 50%;
 	border: 2px solid #ffffff;
 	position: relative;
 	display: inline-block;
 	animation-name: raindot; 
	animation-duration: 3s;
	animation-timing-function: ease-in-out;
	animation-delay: .1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
 
}

.whitedot3 {
	height: 25px;
  	width: 25px;
 	background-color: #ffffff;
 	border: 2px solid #000000;
 	border-radius: 50%;	
 	position: relative;
 	display: inline-block;
 	animation-name: raindot; 
	animation-duration: 3s;
	animation-timing-function: ease-in-out;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
.whitedot4 {
	height: 25px;
  	width: 25px;
 	background-color: #ffffff;
 	border: 2px solid #000000;
 	border-radius: 50%;	
 	position: relative;
 	display: inline-block;
 	animation-name: raindot; 
	animation-duration: 3s;
	animation-timing-function: ease-in-out;
	animation-delay: .2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.sunny{
	height: 150px;
	width: 150px;
	background-color: #ffffff;
	border: 2px solid #000000;
	left: 700px;
	top: 50px;
	position: relative;
	animation-name: temp; 
	animation-duration: 5s;
	animation-timing-function: ease-in-out;
	animation-delay: 0%;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.blackdot5 {
	height: 25px;
  	width: 25px;
 	background-color: #000000;
 	border-radius: 50%;
 	border: 2px solid #ffffff;
 	position: fixed;
 	animation-name: blackdot; 
	animation-duration: 2.5s;
	animation-timing-function: ease-in-out;
	animation-delay: 0%;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.whitedot5 {
	height: 25px;
  	width: 25px;
  	bottom: 0%;
 	background-color: #ffffff;
 	border-radius: 50%;
 	border: 2px solid #000000;
 	position: relative;
 	animation-name: whitedot; 
	animation-duration: 5s;
	animation-timing-function: ease-in-out;
	animation-delay: 0%;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

@keyframes blackdot {
	0% {
		left: 0%;
		top: 0%;
		position: relative;
	}
	25% { 
		left: 25%;
		top:80%;
		position: relative;
	}
	50% { 
		left: 50%;
		top:25%;
		position: relative;
	}
	75% { 
		left: 75%;
		top:15%;
		position: relative;
	}
	100% {
		left: 100%;
		top: 100%;
		position: relative;
	}
}

@keyframes whitedot {
	0% {
		left: 0%;
		top: 0%;
		position: relative;
	}
	25% { 
		left: 25%;
		top:20%;
		position: relative;
	}
	50% { 
		left: 30%;
		top:60%;
		position: relative;
	}
	75% { 
		left: 80%;
		top:15%;
		position: relative;
	}
	100% {
		left: 50%;
		top: 80%;
		position: relative;
	}
}

@keyframes temp {
	0% {
		left: 50%;
		position: relative;
	}
	
	
	100% {
		left: 80%;
		position: relative;
	}
}


@keyframes cloud {
	0% {
		left: 0%;
		top: 0%;
		position: relative;
	}
	
	
	100% {
		left: 89%;
		top: 100%;
		position: relative;
	}
}

@keyframes humid {
	0% {
		left: 0%;
		top: 0%;
		position: relative;
	}
	
	
	100% {
		left: 98%;
		top: 100%;
		position: relative;
	}
}

@keyframes raindot {
	0% {
		left: 0%;
		top: 0%;
		position: relative;
	}
	
	100% {
		left: 0%;
		top: 60%;
		position: relative;
	}
}

.makeclear .temp{
	background-color: #ffffff !important;
}