html{
  background-color: lavender;
  background-image: url("ghostiesbackground.png");
  color: purple; /*anything in black or blue has its own color parameters*/
  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: darkorange;
  color:white;
  border-color: white;
  border-style: solid;
  border-width: 3px;
 transition-duration: .5s; 
 border-radius: 7px;
}
button:hover{
  background-color:purple;
  color:white;
  border-color: white;
  border-style: dotted;
  border-radius: 15px;
}
/*Adjusts the appearance of all boxes except for the large #body box*/
.container{
  border-style: dashed;
  border-color: #ffd176;
  border-width: 2px;
  background-color: rgba(255, 144, 46, .8);
  padding: 6px;
}
/*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{
  color: #5d5bc2;
  transition-duration: .5s;
}
#url:hover{
  background-color: purple;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  box-shadow: 3px 3px 3px white, -3px -3px 3px white, 3px -3px 3px white, -3px 3px 3px white, 2px 2px 2px inset white, -2px -2px 2px inset white, 2px -2px 2px inset white, -2px 2px 2px inset white;
}
/*How hyperlinks in the relationship page look*/
#char{
 color: lightblue;
 text-shadow: 1px 1px 1px purple, -1px -1px 1px purple, -1px 1px 1px purple, 1px -1px 1px purple;
 transition-duration: .5s; 
}
#char:hover{
  background-color: purple;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  text-shadow:  none;
  box-shadow: 3px 3px 3px white, -3px -3px 3px white, 3px -3px 3px white, -3px 3px 3px white, 2px 2px 2px inset white, -2px -2px 2px inset white, 2px -2px 2px inset white, -2px 2px 2px inset white;
}
/*how the credits link looks*/
#credit{
 text-align: center;
 grid-area: credit;
 margin: auto;
 color: white;
 transition-duration: .5s;
}
#credit:hover{
  background-color: darkorange;
  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: solid;
  border-color: white;
  border-width: 1px;
  border-radius: 7px;
  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 purple;
  padding-right: 5px;
}
/*how data values on the infotable look*/
#value{
  text-align: left;
  padding-left: 5px;
  color: white;
}
/*box holding background/personality/relationships*/
#summary{
  grid-area: summary;
  margin: 5px;
  width: 500px;
  overflow-y: scroll;
  max-height: 650px;
  scrollbar-color: orange purple;
  /*two values: arrows/bar color and background color. doesn't work on all browsers*/
}
/*lore box*/
#lore{
  grid-area: lore;
  margin: 5px;
  max-width: 300px;
  width: 100%;
  max-height: 470px;
  overflow-y: scroll;
  scrollbar-color: orange purple;
}
/*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{
  text-shadow:  none;
  box-shadow: 3px 3px 3px white, -3px -3px 3px white, 3px -3px 3px white, -3px 3px 3px white, 2px 2px 2px inset white, -2px -2px 2px inset white, 2px -2px 2px inset white, -2px 2px 2px inset white;
  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;
}