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

#page {
  margin: 3vw;
}

#title {
  background: linear-gradient(to bottom, rgb(102, 26, 0), rgb(128, 32, 0), rgb(153, 38, 0));
  background-color:#661a00;
  color: white;
  padding: 4vh;
  text-align: center;
  font-family: "Arial";
  margin-bottom: 10px;
  margin: 0vh 9vw;
  border-top-left-radius:25%;
    border-top-right-radius:25%;
}

.character {
  width: 10vw;
  border: 5px black solid;
  border-radius:50%;
  margin:10px;
}

.character:hover
{
	transform: rotate(180deg);
}

.character:active
{
	transform: rotate(270deg);
}


#content {
   background: linear-gradient(to right , rgb(102, 26, 0), rgb(128, 32, 0), rgb(153, 38, 0));
  background-color: #661a00;
  text-align: center;
  padding: 4vh;
  margin: 4vh 9vw;
   border-top-left-radius:25%;
    border-top-right-radius:25%;
   border-bottom-left-radius:25%;
    border-bottom-right-radius:25%;
}

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

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;
}



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


a:hover
{
  color:green;
}

#bottom-content
{
   background: linear-gradient(to top, rgb(102, 26, 0), rgb(128, 32, 0), rgb(153, 38, 0));
   background-color:#661a00;
  padding: 0vh;
  color:white;
  text-align: center;
  margin: 4vh 9vh;
  border-bottom-left-radius:25%;
  border-bottom-right-radius:25%;
}

#footer {
  height: 1500px;
  color: black;
}