/*:root {
  --maincolor: hsl(287, 81%, 35%);
  --subcolor: hsl(287, 81%, 65%);
  --subcolor2: hsl(287, 81%, 85%);
  --darkcolor: hsl(287, 81%, 15%);
}*/

/* nav {
  background-color: var(--subcolor);
} */

/* .container {
  background-color: white;
} */

/* header{
  background-color: var(--maincolor);
} */

/* .image {
  background-color: var(--maincolor);
} */

.stats {
  background-color: var(--subcolor2);
  border-radius: 20px;
}

.quote {
  font-style: italic;
  text-align: center;
  background-color: var(--subcolor);
  color: var(--darkcolor);
  border-radius: 20px;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  margin-bottom: 10px;
  justify-content: center;
}

.summary {
  border: 4px dashed var(--maincolor);
  border-radius: 10px;
  padding: 20px;
}

.fullbody {
  float: left;
  width: 350px;
  margin-right: 20px;
  margin-bottom: 10px;
}

.fullbody img {
  max-width: 100%;
  height: auto;
}

.appearance {
  border: 4px dashed var(--maincolor);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 10px;
}

.personality {
  border: 4px dashed var(--maincolor);
  border-radius: 10px;
  padding: 20px;
}

/*.divider {
  width: 100%;
  height: 40px;
  margin-bottom: 20px;
  
  background-image: url("https://64.media.tumblr.com/30054000f74395a661ca4b07cd835b20/15f3d5feff64a894-8b/s2048x3072/3819c1e7f39d133a863211bb0547b6184fa53443.pnj");
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: center; 
  
  filter: sepia(100%) hue-rotate(170deg) saturate(200%);
}*/

.abilities {
  border: 4px dashed var(--maincolor);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 10px;
}

.trivia {
  border: 4px dashed var(--maincolor);
  border-radius: 10px;
  padding: 20px;
}