html { 
  background: url("https://images.unsplash.com/photo-1512641406448-6574e777bec6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

#page {
  margin: 3vw;
}

#title {
  background: linear-gradient(to bottom right, rgb(126, 255, 113, 0.4), rgb(185, 105, 210, 0.5), rgb(26, 15, 130, 0.5));
 	background-color: red; 
  color: white;
  padding: 4vh;
  text-align: center;
  font-family: "Merriweather", sans-serif;
  margin-bottom: 10px;
  margin: 0vh 9vw;
  border-top-left-radius: 25%;
  border-top-right-radius: 25%
}

.character {
  width: 10vw;
}

#content {
  background: linear-gradient(to bottom right, rgb(126, 255, 113, 0.4), rgb(185, 105, 210, 0.5), rgb(26, 15, 130, 0.5));
  background-color: red;
  text-align: center;
  padding: 4vh;
  margin: 4vh 9vw;
  border-radius: 15%;
  
}

h2 {
	color: white;
  text-align: center;
  font-family: "Mate SC";
}

a, p {
  color: honeydew;
  font-family: Arial, sans-serif;
}

hr {
 background-color: rgb(255,255,255, 0.1); 
 border: none;
 height: 1px;
 margin: 15px 0px;
}

footer 
{
	height: 50px;
  color: black;
}
.imagesrc a, p{
  color: black;
  text-align: center;
  padding-top: 30px;
  font-weight: 900;
}

a:hover
{
  color: blue;
  cursor: pointer;
}

#bottom-content
{
  background: linear-gradient(to bottom right, rgb(126, 255, 113, 0.4), rgb(185, 105, 210, 0.5), rgb(26, 15, 130, 0.5));
  background-color: red;
  text-align: center;
  padding: 4vh;
  margin: 4vh 9vh;
  border-bottom-right-radius: 25%;
  border-bottom-left-radius: 25%;
}

.character
{
  width: 10vw;
  border: 2px white dashed;
  border-radius: 50%;
  margin: 1vw;
}

.character:hover
{
  width: 10.2vw;
  transform: rotate(30deg);
}

.imagesrc:hover a
{
  color: cyan;
}