@import url( "./base.css" );

textarea {
	animation: colorCycle 60s ease-in-out 0s infinite;
}

#background--images {
	opacity: 0.7;
}

.background--image {
	animation: fade 100s infinite;
}

.button {
	animation: colorCycle 60s ease-in-out 0s infinite;
}

.button--inverse {
	animation: backgroundColorCycle 60s ease-in-out 0s infinite;
}

.button--large {
	padding: 1rem 2.5rem;
	font-size: 1.4rem;
}

.border {
	animation: colorCycle 60s ease-in-out 0s infinite;
}

.font--color {
	font-weight: 500;
	animation: colorCycle 60s ease-in-out 0s infinite;
}

#img1 { background-image: url( "../images/1.jpg" ); animation-delay: 0s; }
#img2 { background-image: url( "../images/2.jpg" ); animation-delay: 10s;}
#img3 { background-image: url( "../images/3.jpg" ); animation-delay: 20s; }
#img4 { background-image: url( "../images/4.jpg" ); animation-delay: 30s; }
#img5 { background-image: url( "../images/5.jpg" ); animation-delay: 40s; }
#img6 { background-image: url( "../images/6.jpg" ); animation-delay: 50s; }
#img7 { background-image: url( "../images/7.jpg" ); animation-delay: 60s; }
#img8 { background-image: url( "../images/8.jpg" ); animation-delay: 70s; }
#img9 { background-image: url( "../images/9.jpg" ); animation-delay: 80s; }
#img10 { background-image: url( "../images/10.jpg" ); animation-delay: 90s; }

#img1, #img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10 {
	position: absolute;
	top: 0;
	left: 0;
	height: 100vh;
}

@keyframes backgroundColorCycle {
	0%	{ background-color: rgba( 102, 0, 0, 0.8 ); }		15% { background-color: rgba( 169, 78, 4, 0.8 ); }
	30%	{ background-color: rgba( 162, 148, 42, 0.8 ); }	45% { background-color: rgba( 10, 132, 30, 0.8 ); }
	60%	{ background-color: rgba( 0, 75, 149, 0.8 ); }		75% { background-color: rgba( 9, 4, 97, 0.8 ); }	
	90%	{ background-color: rgba( 66, 26, 106, 0.8 );}	   100% { background-color: rgba( 102, 0, 0, 0.8 ); } 
}

@keyframes colorCycle {
	 0%	{ color: rgba( 102, 0, 0, 1 ); fill: rgba( 102, 0, 0, 1 ); }		
	 15% { color: rgba( 169, 78, 4, 1 ); fill: rgba( 169, 78, 4, 1 ); }
	 30% { color: rgba( 162, 148, 42, 1 ); fill: rgba( 162, 148, 42, 1 ); } 
	 45% { color: rgba( 10, 132, 30, 1 ); fill: rgba( 10, 132, 30, 1 ); }
	 60% { color: rgba( 0, 75, 149, 1 ); fill: rgba( 0, 75, 149, 1 ); }	 
	 75% { color: rgba( 9, 4, 97, 1 ); fill: rgba( 9, 4, 97, 1 ); }	
	 90% { color: rgba( 66, 26, 106, 1 ); fill: rgba( 66, 26, 106, 1 ); }	
	100% { color: rgba( 102, 0, 0, 1 ); fill: rgba( 102, 0, 0, 1 ); } 
}

.background-color--cycle { height: 100%; width: 100%; animation: backgroundColorCycle 60s infinite; }
.color--cycle { animation: colorCycle 60s ease-in-out 0s infinite; }