/* Variables. */
:root{
    --background-color:white; 
    --text-color:#0e2415; 
    --link-color:#0ba46a;
    --link-hover-color:black;
    --body-font:sans-serif;
    --title-font:"Lucida Console";
    --hr-color: #9BA85A;
    --title-color:#008622;
}

/* General */
b {
  color:#0e5c44;
  font-family:var(--title-font);
  font-size: 20px;
}
a {
  text-shadow: 2px 2px 3px #0000001c;
}

body{
  background-color:var(--background-color);
  color:var(--text-color);
  font-family:var(--body-font);
}
img{
  max-width:100%;
  max-height:100%;
}
img:hover{
}
a{
  color:var(--link-color);
  text-decoration:none;
}
a:hover{
  color: var(--link-hover-color);
}
.fphover:hover{
  transform: scale(1.1);
  filter: grayscale(0%);
}
.fphover{
    transition: 0.3s;
    transition-behavior: normal;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-delay: 0s;
    transition-property: all;
}
#mainmenucontainer{
  max-width:1300px;
  margin: 0px auto;
  padding: 1em;
}
#container{
  max-width:1100px;
  margin: 0px 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(--title-color);
}
#title a, .title-text a, .title-nav a{
  color:var(--title-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(--hr-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;
}
.butnns{
  display:grid;
  align-content: space-evenly;
}
.butnns img{
  filter: grayscale(100%);
}
.pcaption{
}
.button {
  position: absolute;
  bottom: 10px; /* adjust to desired spacing */
  right: 10px; /* adjust to desired spacing */
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
}
input[type=button] {
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  align-content: center;
  background-color: DarkOliveGreen; /* Green */
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin-top: 5px;
}


/* Page Layout */

#page, #page-flipped, #two-column, #three-column, #page-about, #page-project{
  display:grid;
  gap:.3em;
}
#logos{
  display:grid;
  gap:1em;
  grid-template-columns:repeat(4, 2fr);
  justify-content:center;
  margin: 15px 15px 15px 15px;
}
#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;
}
#page-about, #page-project{
  grid-template-columns:1.5fr 1fr;
}
.img-container{
  text-align:center;
  justify-content:center;
}
.paintin{
  width: auto;
  height: auto;
}
.gif{
  justify-content: center;
  align-items: stretch;
  text-align: center;
  width: 100%;;
  display: flex;
  height: auto;
  flex-direction: column;
}
.fig{
   display: flex;
}
.txt{
  margin: auto auto auto 7px;
}
.poster{
  width: auto;
  height: auto;
}
.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;
}