/* Variables. */
:root{
    --background-color:white;
    --text-color:black;
    --link-color:gray;
    --link-hover-color:black;
    --body-font:sans-serif;
}

/* General */

body{
  background-color:var(--background-color);
  color:var(--text-color);
  font-family:var(--body-font);
  margin:0;
  padding:0;
}
img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
}
a{
  color:var(--link-color);
  text-decoration:none;
}
a:hover{
  color:var(--link-hover-color);
}
#container{
  max-width:1000px;
  margin:0 auto;
  padding:1em;
}
pre{
  white-space:pre-wrap;
  word-break: break-all;
}
code{
  background-color:#eee;
  word-break: break-all;
  white-space:pre-wrap;
}
  
/* Header */

#title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:bold;
  color:var(--text-color);
}
#title a, .title-text a, .title-nav a{
  color:var(--text-color)!important;
}
.title-arrow{
  transition:0.2s;
}
#description-toggle, .description{
  display:none;
}
#description-toggle:checked ~ .description {
  display:block;
}
#description-toggle:checked ~ * .title-arrow{
  transform:rotate(-180deg);
}
hr{
  border-top:1px solid var(--text-color);
  border-bottom:none;
  margin:1em 0;
}

/* Gallery Layout */
 
#gallery{
  display:grid;
  width:100%;
  gap:1em;
  grid-template-columns:repeat(3, 1fr);
}
#gallery a{
  color:var(--text-color);
  opacity:1;
  transition:0.5s all;
  display:grid;
  gap:1em;
  align-items:flex-start;
}
#gallery a:hover{
  opacity:0.75;
}
.item-image img{
  width:100%;
    height:100%;
    object-fit:cover;
}
.item-image{
  line-height:0;
  aspect-ratio:1/1;
}
.item-title{
  text-align:center;
  font-size:0.9rem;
}

/* Page Layout */

#page, #page-flipped, #two-column, #three-column, #page-about, #page-project{
  display:grid;
  gap:1em;
}
#page-about .img-container{
  display:grid;
  justify-content:center;
  align-items:center;
}
#page-about .caption{
  text-align:left;
}
#page{
  grid-template-columns:2fr 1fr;
}
#page-flipped{
  grid-template-columns:1fr 2fr;
}
#two-column{
  grid-template-columns:repeat(2, 1fr);
}
#three-column{
  grid-template-columns:repeat(3, 1fr);
}
#two-column, #three-column{
  justify-content:center;
  align-items:center;
}
#page-about, #page-project{
  grid-template-columns:1fr 1.5fr;
}
.img-container{
  text-align:center;
}
.page-divider{
  display:none;
  margin-top:0;
}
.caption-always-centered{
  text-align:center;
}
.caption-always-left{
  text-align:left;
}
.caption-always-right{
  text-align:right;
}
#page-flipped .caption{
  text-align:right;
}
footer{
  display:flex;
  justify-content:space-between;
  width:100%;
  align-items:center;
}

/* Mobile */

@media (max-width:700px){
  #gallery{
  grid-template-columns:repeat(2, 1fr);
  }
  .page-divider{
  display:block;
  }
  #page .caption, #page-flipped .caption{
    text-align:center;
  }
  #page, #page-flipped, #page-about, #page-project, #three-column, #two-column{
    grid-template-columns:1fr;
  }
}