* {
	outline:none;
	
	font-family:calibri,sans-serif;
	font-size:25px;
	
	padding:0px;
	margin:0px;
	
	float:left;
}



#input {
	width:100%;
	height:50%;
	border-radius:50px;
	resize:none;
	overflow:hidden;
}
#input:hover {
	height:60%;
	border-radius:25px;
}
#input:focus {
	height:70%;
	border-radius:10px;
}
#rainbow-frequency-label {
	margin-right:0px;
}
#rainbow-frequency {
	width:20%;
	height:5%;
	border-radius:10px;
	padding:0px 0px 0px 10px;
}
#rainbow-frequency:hover {
	width:30%;
	border-radius:20px;
}
#rainbow-frequency:focus {
	width:50%;
	border-radius:30px;
}
#generate-button {
	width:70%;
	height:10%;
	font-weight:bold;
	
	background-color:rgba(250,250,250,1);
	border-radius:20px;
	margin:0px auto;
}
#generate-button:hover {
	width:90%;
	
	background-color:rgba(240,240,240,1);
	
	border-radius:40px;
	border-color:rgba(240,240,255,1);
}
#generate-button:active {
	background-color:rgba(230,230,230,1);
	border-color:rgba(230,230,255,1);
	
	transition-duration:0.1s;
}



.transition-1 {
	transition-property:width,height,background-color,border-radius,border-color;
	transition-duration:1s;
	transition-timing-function:ease;
}
.border-1 {
	border-style:solid;
	border-width:2px;
	border-color:rgba(200,225,255,1);
}
.background {
	width:45vw;
	height:80vh;
	
	border-radius:10px;
	background-color:rgba(255,255,255,1);
	float:left;
}
.background:hover {
	border-radius:20px;
	background-color:rgba(250,250,250,1);
}
.background:focus {
	border-radius:30px;
	background-color:rgba(245,245,245,1);
}