html{
  background-image: url("https://sailorsfriend.neocities.org/gddcspages/angelstatue.png");
  background-repeat:no-repeat;
  background-position: -150px 120%;
  background-size: 500px;
  background-color: rgb(244,240,196);
  color: brown;
  font-family: Courier, monospace;
  }
/*part with prev/proj/next buttons*/
nav{
  text-align: center;
  margin: auto;
  border-radius: 15px;
  margin-bottom: 5px;
  max-width: 400px;
  width: 100%;
}
/*buttons*/
button{
  background-color: white;
  color:brown;
  border-color: gold;
  border-radius: 15px;
  border-style: solid;
 transition-duration: .5s; 
}
button:hover{
  background-color:darkorange;
  color:white;
  border-color: white;
  box-shadow: 3px 3px 3px orange, -3px -3px 3px orange, 3px -3px 3px orange, -3px 3px 3px orange;
}
/*Adjusts the appearance of all boxes except for the large #body box*/
.container{
  border-style: double;
  border-color:brown;
  background-color: rgb(245, 233, 97);
  padding: 5px;
}
/*adjusts section heads*/
h3{
  border-bottom: 2px dotted;
  margin-top: 2px;
}
/*subsection heads*/
h4{
  font-size: 18px;
  margin-bottom: 5px;
  margin-top: 2px;
}
/*How hyperlinks in the link box look*/
#url{
  font-weight: bolder;
  color: darkorange;
  transition-duration: .5s;
}
#url:hover{
  background-color: brown;
  color: white;
}
/*How hyperlinks in the relationship page look*/
#char{
  color: darkorange;
  transition-duration: .5s; 
}
#char:hover{
  color: white;
  background-color: brown;
}
#credit{
 text-align: center;
 grid-area: credit;
 margin: auto;
 color: brown;
 transition-duration: .5s;
}
#credit:hover{
  background-color: brown;
  color: white;
}
/*how large you want your ref image to be*/
#image{
  max-width:200px;
}
/*how large you want your portrait image to be*/
#portrait{
 max-width:250px; 
}
/*part with character name*/
#head{
  max-width: 1000px;
  width: 100%;
  border-radius: 0px 125px 15px 0px;
  margin-bottom: 5px;
}
/*character name*/
h2{
  margin: 5px;
}
/*large container*/
#body {
  border-style: double;
  border-color: brown;
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-areas: 
    "info summary ref"
    "info summary lore"
    "links summary lore"
    "trivia trivia trivia"
    "credit credit credit";
  justify-content: center;
}
/*box holding portrait and info table*/
#infobox{
  grid-area: info;
  max-width: 300px;
  width: 100%;
  margin: 5px;
  text-align: center;
}
/*info table*/
#data {
  display: grid;
  grid-template-columns: auto auto;
  max-width: 150px;
  width: 100%;
  margin: auto;
}
/*how categories on the infotable look*/
#category{
  text-align: right;
  border-right: 2px solid white;
  padding-right: 5px;
}
/*how data values on the infotable look*/
#value{
  text-align: left;
  padding-left: 5px;
}
/*box holding background/personality/relationships*/
#summary{
  grid-area: summary;
  margin: 5px;
  width: 500px;
  max-height: 650px;
  overflow-y: scroll;
  scrollbar-color: brown white;
}
/*lore box*/
#lore{
  grid-area: lore;
  margin: 5px;
  max-width: 300px;
  width: 100%;
  max-height: 470px;
  overflow-y: scroll;
  scrollbar-color: brown white;
}
/*box holding the ref image, not the image itself. image itself is #img*/
#ref{
  grid-area: ref;
  margin: 5px;
  max-width: 300px;
  width: 100%;
  text-align: center;
}
/*trivia box*/
#trivia{
  grid-area: trivia;
  margin: 5px;
  width: 100%;
  max-width: 1150px;
}
/*gallery images*/
#thumbnail{
  max-width: 150px;
  max-height: 150px;
  border-style: none; 
  margin: 5px;
  transition-duration: .5s;
}
#thumbnail:hover{
 border-color: white;
  box-shadow: 3px 3px 3px orange, -3px -3px 3px orange, 3px -3px 3px orange, -3px 3px 3px orange;
  border-radius: 10px;
}
/*link box*/
#links {
  grid-area: links;
  width: 300px;
  margin: 5px;
}
/*not actually visible, just what I used to get the character name box to sit where I wanted*/
#align{
  max-width: 1300px;
  width: 100%;
  max-height: 2500px;
  margin:auto;
}