style.css

body{
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	text-align: center;
	top: 5%;
	margin: 0;
	background-image: linear-gradient(90deg, #c697ff, #ff5d6d);
}

h1{
	font: 300 2rem 'Open Sans', sans-serif;
	color: #525f7f;
	text-align: center;
	padding: 1vh 0px;
	margin: 0px 0px;
}

h2{
	font: 200 1.2rem 'Open Sans', sans-serif;
	color: #525f7f;
	padding: 1vh 0px 0px 0px;
	margin: 0px 0px;
}

h4{
	font: 200 0.8rem 'Open Sans', sans-serif;
	color: #525f7f;
}

h3{
	color: #9e9e9e;
	font: 200 1rem 'Open Sans', sans-serif;
	text-align: center;
	padding: 0px 0px 3vh 0px;
	margin: 0px 0px;
}

#colorinfo{
	padding: 15px 10px;
	background-color: #ffffff;
	width: 60%;
	margin: auto;
	margin-top: 15vh;
	box-shadow: 0px 0px 10px 5px #00000044;
}

@media(min-width: 900px){
	#colorinfo{
		width: 40%;
	}

}

@media(min-width: 1200px){
	#colorinfo{
		width: 30%;
	}

}

h4#clickinstruction {
	padding-bottom: 0px;
	margin-bottom: 5px;
}

#gradientdiv{
	padding-top: 5%;
	width: 100%; 
	height: 85vh;
	
}

/*Styling Input*/
input[type="color"] {
	-webkit-appearance: none;
	border: 1px;
	border-radius: 50%;
	width: 32px;
	height: 32px;
}

/*Randomize Button*/
.button {
  background-color: #ffffff;
  border: 1px solid #878787;
  color: #525f7f;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font: 200 0.8rem 'Open Sans', sans-serif;
  margin: 0px auto 0px auto;
}

.button:hover{
  transition-duration: 0.3s;
  background-color: #878787;
  border: 1px solid #878787;
  color: #ffffff;
}