html {
  box-sizing: border-box;
  line-height: 1.3;
}

body{
  background-color: #193041;
  background-image: url(Images/galaxy.jpg);
  background-size: auto;
  background-position: center;
  background-attachment: fixed;
  font-family:'Brush Script MT', cursive, 'Montserrat', 'Arial', sans-serif;
  padding: 0 4rem;
}

.container {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 10em 1fr 1fr;
  /*grid-template-columns: auto 18% auto;*/
  grid-template-areas: 
     "nav nav nav"
     "side info info"
     "footer footer footer"
  
    /* "nav nav nav nav"
    "side oc-name oc-name oc-name"
    "side oc-info oc-personality oc-personality"
    "side oc-info oc-relation oc-notes"
    "side oc-info oc-likes oc-likes"
    "side oc-trivia oc-trivia oc-trivia"
    "side oc-backstory oc-backstory oc-backstory"
    "side gallery gallery gallery"
    "footer footer footer footer"; */
}

.item {
  border-radius: 5px;
  color: #ffffff;
  text-align: center;
  padding: 0.625em;
  border-color: #ffe285;
  border-width: 1px;
  border-style: solid;
  box-shadow: 0 0 2px #ffe285;
}

nav {
  grid-area: nav;
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: 3em;
}

.info {
   grid-area: info;
   display: flex;
   gap: 1rem;
}

aside {
  grid-area: aside;
  order: 1;
  flex-basis: 20%;
}
 
main {
  grid-area: main;
  flex-basis: 80%;
}

.side {
  grid-area: side;
  /*min-width: 10em;*/
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gallery {
  grid-area: gallery;
}

footer {
  grid-area: footer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-height: 3em;
}


nav, .side, footer {
  background-color: #1C132A;
}

.page-title {
  font-weight: bold;
  font-size: 2rem;
}

.nav-link {
  font-size: 1.3rem;
}

a {
  color: white;
}

.heading {
  text-align: center;
  border-color: #191224;
  background-color: #284c67;
  border-radius: 10px 20px;
  padding: 0.3rem 5rem;
  width: fit-content;
  border-style: solid;
  border-width: 5px;
  box-shadow: 3px 5px 8px #191224;
  background-image: linear-gradient(#4582b0, #284c67);
}

.center {
  text-align: center;
  margin: auto;
}

img {
  max-width: 100%;
}



/* OC Stuff 

.oc-name, .oc-info, .oc-personality, .oc-trivia, .oc-relation, .oc-notes, .oc-likes, .oc-backstory, .gallery {
  background: rgba(2, 157, 181, 0.6);
  text-align: left;
}



.oc-name {
  grid-area: oc-name;
}

.oc-info {
  grid-area: oc-info;
  /*max-width: 15em;*/
  line-height: 1.5;
}

.oc-personality {
 grid-area: oc-personality;
}

.oc-trivia {
  grid-area: oc-trivia;
  /*height: 200px;*/
  overflow: auto;
} 

.oc-relation {
  grid-area: oc-relation;
  /*height: 10em;*/
  overflow: auto;
}

.oc-notes {
  grid-area: oc-notes;
  overflow: auto;
  /*height: 10em;*/
}

.oc-likes {
  grid-area: oc-likes;
   display: flex;
   flex-direction: row;
   align-content: space-around;
   justify-content: space-around;
}

.oc-backstory {
  grid-area: oc-backstory;
  overflow: auto;
  /*height: 20em;*/
}

 OC Stuff End */

figcaption {
  box-shadow: 0 0 2px black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}

/***
EZ Gallery by netfriend - https://netfriend.neocities.org/ez-gallery/
Released under the Unlicense - https://unlicense.org/
***/

.ezgallery.montage { 
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.ezgallery.montage img {
  flex: auto;
  margin: 0 5px 5px 0;
  object-fit: contain;
  object-position: bottom;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.ezgallery.horizontal { 
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: minmax(100px, auto);
}

.ezgallery.horizontal a {
  text-align: center;
}

.ezgallery.horizontal img {
  text-align: center;
  vertical-align: middle;
  margin: 0 5px 5px 0;
  max-width: 1em;
  max-height: 1em;
  object-fit: contain;
  object-position: bottom;
}

.photoviewer-modal {
  border-radius: 5px;
  margin: 1em 3em;
  background: rgba(44, 33, 56, .9)!important;
}

.photoviewer-inner {
  color: #fceebf;
}

.photoviewer-stage {
  background: rgba(81, 46, 76, .5)!important;
}