html {
  background: url("https://images.unsplash.com/photo-1518495973542-4542c06a5843?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974");
  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: rgb(0, 128, 0, 0.95);
  color: white;
  padding: 4vh;
  text-align: center;
  font-family: 'Barlow', sans-serif;
  margin-bottom: 10px;
  margin: 0vh 9vw;
  border-top-left-radius: 25%;
  border-top-right-radius: 25%
}

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

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

.character:active
{
  transform: rotate(180deg)
}



#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: rgb(0,128,0,0.95);
  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;
}

a:hover
{
  color: blue;
}

#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: rgb(0,128,0,0.95);
  text-align: center;
  padding: 4vh;
  margin: 4vh 9vh;
  border-bottom-right-radius: 25%;
  border-bottom-left-radius: 25%;
}



.imagesrc a, p{
  color: black;
  font-weight: 900;
}

.imagesrc:hover a
{
  color: white;
}