.container {
	display: none;
}


/*Alarm state*/
.rain {
	position: relative;
	display: inline-block;
	width: 30px;
	height: 30px;
	background: black;
	border-radius: 50%;
	transform: translateY(0);
	animation: rainbounce 2s linear infinite;

}

.rain:nth-child(5n+1) { animation-delay: 0.25s; }
.rain:nth-child(5n+2) { animation-delay: 0.5s; }
.rain:nth-child(5n+3) { animation-delay: 0.0s; }
.rain:nth-child(5n+4) { animation-delay: 1s; }
.rain:nth-child(5n+5) { animation-delay: 1.25s; }
.rain:nth-child(5n+6) { animation-delay: 1s; }
.rain:nth-child(5n+7) { animation-delay: 0.75s; }
.rain:nth-child(5n+8) { animation-delay: 0s; }
.rain:nth-child(5n+9) { animation-delay: 0.25s; }
.rain:nth-child(5n+10) { animation-delay: 1s; }
.rain:nth-child(5n+11) { animation-delay: 0.5s; }
.rain:nth-child(5n+12) { animation-delay: 0.75s; }
.rain:nth-child(5n+8) { animation-delay: 0s; }
.rain:nth-child(5n+9) { animation-delay: 0.25s; }
.rain:nth-child(5n+10) { animation-delay: 1s; }
.rain:nth-child(5n+11) { animation-delay: 0.5s; }
.rain:nth-child(5n+12) { animation-delay: 0.75s; }
.rain:nth-child(5n+8) { animation-delay: 0s; }
.rain:nth-child(5n+9) { animation-delay: 0.25s; }
.rain:nth-child(5n+10) { animation-delay: 1s; }

.rain:nth-child(5n+11) { animation-delay: 0.5s; }
.rain:nth-child(5n+12) { animation-delay: 0.75s; }
.rain:nth-child(5n+9) { animation-delay: 0.25s; }
.rain:nth-child(5n+10) { animation-delay: 1s; }

.rain:nth-child(5n+11) { animation-delay: 0.5s; }
.rain:nth-child(5n+12) { animation-delay: 0.75s; }


@keyframes rainbounce {
  from { transform: translateY(0); }
  to { transform: translateY(100px); }
}


#BLAH {
	width: 100%; 
	height: 100vh;
	background: linear-gradient(-45deg, #000000, #4286f4, #081121);
}



#elementone {
  height: 250px;
  width: 250px;
  margin: 0 auto;
  background-color: red;
  animation-name: stretchone;
  animation-duration: 8s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes stretchone {
  0% {
    transform: scale(.3);
    background-color: #ff9e9e;
    border-radius: 100%;
  }
  50% {
    background-color: #fc5a5a;
  }
  100% {
    transform: scale(1.5);
    background-color: #ff1616;
  }
}

body,
html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}


#elementtwo {
  height: 250px;
  width: 250px;
  margin: 0 auto;
  background-color: #b2e8ff;
  animation-name: stretchtwo;
  animation-duration: 8s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes stretchtwo {
  0% {
    transform: scale(.3);
    background-color: #b2e8ff;
    border-radius: 100%;
  }
  50% {
    background-color: #6ad0fc;
  }
  100% {
    transform: scale(1.5);
    background-color: #2681a8;
  }
}

body,
html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}


#elementthree {
  height: 250px;
  width: 250px;
  margin: 0 auto;
  background-color: #ffc849;
  animation-name: stretchthree;
  animation-duration: 8s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes stretchthree {
  0% {
    transform: scale(.3);
    background-color: #ffc849;
    border-radius: 100%;
  }
  50% {
    background-color: #f4b41f;
  }
  100% {
    transform: scale(1.5);
    background-color: #ff9400;
  }
}

body,
html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}


#elementfour {
  height: 250px;
  width: 250px;
  margin: 0 auto;
  background-color: #ffbfda;
  animation-name: stretchfour;
  animation-duration: 8s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes stretchfour {
  0% {
    transform: scale(.3);
    background-color: #ffbfda;
    border-radius: 100%;
  }
  50% {
    background-color: #fc88b8;
  }
  100% {
    transform: scale(1.5);
    background-color: #ff1173 ;
  }
}

body,
html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}


#elementfive {
  height: 250px;
  width: 250px;
  margin: 0 auto;
  background-color: #a0ffb6;
  animation-name: stretchfive;
  animation-duration: 8s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes stretchfive {
  0% {
    transform: scale(.3);
    background-color: #a0ffb6;
    border-radius: 100%;
  }
  50% {
    background-color: #53ba6b;
  }
  100% {
    transform: scale(1.5);
    background-color: #217a35 ;
  }
}

body,
html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}


#elementsix {
  height: 250px;
  width: 250px;
  margin: 0 auto;
  background-color: #e1c1ff;
  animation-name: stretchsix;
  animation-duration: 8s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes stretchsix {
  0% {
    transform: scale(.3);
    background-color: #e1c1ff;
    border-radius: 100%;
  }
  50% {
    background-color: #b976f7;
  }
  100% {
    transform: scale(1.5);
    background-color: #932fef;
  }
}

body,
html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}


#elementseven {
  height: 250px;
  width: 250px;
  margin: 0 auto;
  background-color: lightgray ;
  animation-name: stretchseven;
  animation-duration: 8s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes stretchseven {
  0% {
    transform: scale(.3);
    background-color: lightgray ;
    border-radius: 100%;
  }
  50% {
    background-color: gray ;
  }
  100% {
    transform: scale(1.5);
    background-color: black;
  }
}

body,
html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}



#triangle {
	width: 0px;
	height: 0px;
	border-bottom: 100px solid black;
	border-right: 60px solid transparent;
	border-left: 60px solid transparent;
	border-top: 0px solid transparent;
	background-color: transparent;
	display: inline-block;
	position: fixed;
	left: 0;
	animation: trianglenudge 10s linear infinite; 
	padding-top: 100px;
}

@keyframes trianglenudge {
  	0% {
    transform: translate(0, 0); }
  
 	50% {
    transform: translate(600px, 0); }
  
  	80% {
    transform: translate(700px, 0); }
	
	100% {
	transform: translate(0,0);
	}



	}



#circle {
	height: 100px;
	width: 100px;
	background-color: black;
	position: fixed;
	right: 0;
	display: inline-block;
	padding: 25px;
	border-radius: 100%;
	animation: 
		pulse 5s ease infinite alternate,
		circlenudge 10s linear infinite;
}


@keyframes pulse {
  0% {
    background-color: black; }
  50% {
    background-color: grey; }
  100% {
  	background-color: white; }
}

@keyframes circlenudge {
  0%, 100% {
    transform: translate(0, 0); }
  
  50% {
    transform: translate(-600px, 0); }
  
  80% {
    transform: translate(-700px, 0); }
}




#first {
	width: 100%;
	height: 100vh;
	background: linear-gradient(-45deg, #000000, #4f4f4f, #7f7f7f, #bcbcbc, #ffffff);
	background-size: 400% 400%;
	-webkit-animation: Gradient 10s ease infinite;
	-moz-animation: Gradient 10s ease infinite;
	animation: Gradient 10s ease infinite;

}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50% }
	
	50% {
		background-position: 100% 50% }
	
	100% {
		background-position: 0% 50% }
}


@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50% }
	
	50% {
		background-position: 100% 50% }
	
	100% {
		background-position: 0% 50% }
}


@keyframes Gradient {
	0% {
		background-position: 0% 50% }
	50% {
		background-position: 100% 50% }
	100% {
		background-position: 0% 50% }
}


#second {
	width: 100%; 
	height: 100vh;
	background: linear-gradient(-45deg, #000000, #4286f4, #081121);
}

#morning{
	height: 100%;
	width: 300vh;
	background-color: linear-gradient(90deg, #000000, #d1eaff, #aed8fc.#82bef2);
	position: absolute;
	right: 0px;
	

}

#afternoon{
	height: 100%;
	width: 300vh;
	background-color: linear-gradient(90deg, #82bef2, #63b4f9, #2f85ce);
	position: absolute;
	right: 0px;

}

#night {
	height: 100%;
	width: 300vh;
	background-color: linear-gradient(90deg, #2f85ce, #1172c4, #054b87);
	position: absolute;
	right: 0px;
}


#middleofnight{
	height: 100%;
	width: 300vh;
	background-color: linear-gradient(90deg, #054b87, #082844, #0b2135);
	position: absolute;
	right: 0px;
}




#morning{}
#tuesday{}
.wednesday{}
.thursday{}
.friday{}
.saturdau{}