html{
  font-family: Georgia, serif;
  background-image: url("https://sailorsfriend.neocities.org/aotmpages/mountainlake.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
/*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: pink;
  color:purple;
  border-color: darkorange;
  border-radius: 15px;
  border-style: solid;
  transition-duration: .5s; 
  font-family: Courier, monospace;
  font-weight: bold;
}
button:hover{
  background-color:purple;
  color: gold;
}
/*Adjusts the appearance of all boxes except for the large #body box*/
.container{
  border-style: solid;
  padding: 5px;
}
.vertical{
  background: rgba(0,0,36,.5);
  background: linear-gradient(180deg, rgba(0,0,36,.7) 0%, rgba(61,9,121,.7) 66%, rgba(218,0,255,.7) 93%);
}
.horizontal{
  background: rgba(0,0,36,.5);
  background: linear-gradient(90deg, rgba(0,0,36,.7) 0%, rgba(61,9,121,.7) 66%, rgba(218,0,255,.7) 93%);;
}
/*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: gold;
  transition-duration: .5s;
}
#url:hover{
  background-color: darkorange;
  color: white;
}
/*How hyperlinks in the relationship page look*/
#char{
  color: gold;
  transition-duration: .5s; 
}
#char:hover{
  color: white;
  background-color: darkorange;
  box-shadow: 5px 5px 8px #1EB818, 10px 10px 8px #050098, 15px 15px 8px #FF00EC, 5px 5px 8px #FFD833 inset, 10px 10px 8px #FF7E33 inset, 15px 15px 8px #FF3333 inset;
}
/*how the credits link looks*/
#credit{
 text-align: center;
 grid-area: credit;
 margin: auto;
 color: gold;
 transition-duration: .5s;
}
#credit:hover{
  background-color: darkorange;
  color: purple;
}
/*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;
  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;
  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;
  overflow-y: scroll;
  /*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;
}
/*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;
  max-width: 1150px;
  width: 100%;
}
/*link box*/
#links {
  grid-area: links;
  width: 300px;
  margin: 5px;
}
/*gallery images*/
#thumbnail{
  max-width: 150px;
  max-height: 150px;
  border-style: none; 
  margin: 5px;
  transition-duration: .5s;
}
#thumbnail:hover{
  box-shadow: 5px 5px 8px #1EB818, 10px 10px 8px #050098, 15px 15px 8px #FF00EC, 5px 5px 8px #FFD833 inset, 10px 10px 8px #FF7E33 inset, 15px 15px 8px #FF3333 inset;
  border-radius: 10px;
}
/*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;
}