/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
html {
 height: 100%;
}
  
body {
  height: 100%;
  margin: 0;
  display: flex;
  scrollbar-color: #573924 transparent;
}

body {
  background-color: #573924;
  color: black;
  font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, serif;
  font-optical-sizing: auto;
  font-style: normal;
}

  .closedBook {
    border: solid 3px #CD9B6C;
    background-color: #26290D;
    text-align: center;
    height: 818px;
    width: 727px;
    max-height: 90vh;
    max-width: 45vw;
    color: #CD9B6C;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
.bookBinding {
    display: flex;
    margin: auto;
    justify-content: center;
    height: 818px;
    width: calc(2 * 727px);
    max-height: 90vh;
    max-width: 90vw;
}


.leftPage {
    background-color: #C6AE86;
    width: 0;
    padding: 50px;
    min-width: calc(50% - 140px);
    border: solid 3px #292B0F;
    border-left-width: 5px;
    border-right: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.seam{
  height: 100%;
  width: 1px;
  background-color: black;
  }
  
.rightPage {
    background-color: #C6AE86;
    width: 0;
    padding: 50px;
    min-width: calc(50% - 140px);
    border: solid 3px #292B0F;
    border-right-width: 5px;
    border-left: 0;
}
.rightPageContent {
  height: 100%;
  width: 100%;
  overflow: auto;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
}

.webIntro{
  text-align: center;
  font-size: 14px;
  }
  
.pageTitle{
  text-align: center;
  letter-spacing: 16px;
}

.contents{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 0;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    gap: 7px 1px;
}

@media (max-width: 1000px){
  .contents {
    grid-template-columns: repeat(3, 1fr);
    }
  }
  
@media (max-width: 700px){
  .contents {
    grid-template-columns: repeat(2, 1fr);
    }
  }
  
  .largeIcons {
    grid-template-columns: repeat(3, 1fr);
    }
  
.pageLink{
  width: 0;
  min-width: 100%;
  align-items: center;
  text-align: center;
 }
 
.pageLink img{
  max-height: 100%;
  max-width: 100%;
}

.textAlignLeft {
   text-align: left;
}

.thumbnail img {
  /* Setting width since we're building with columns in mind, autosizing to fit available width */
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1; 
}

 .updates{
   display: grid;
   grid-template-rows: auto 1fr;
   gap: 10px;
   height: 120px;
 }
 
  .updates .updatesContent {
   overflow-y:auto;
}

.updatesContent .updateEntry{
  padding-left: 7px;
  border-left: solid 2px black;
  }

#introParagraph {
  position: relative;
  z-index:1;
  transition: opacity 1s ease;
  }  
  
.art {
  inset: 50px;
  display: grid;
  grid-template-rows: 1fr auto;
  opacity: 0;
  align-items: center;
  text-align: center;
  justify-content: center;
  z-index:2;
  position:absolute;
  transition: opacity 1s ease 0.3s;
  }
  
.art img{
  height: 100%;
  width: 100%;
 }
 
 .product {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: center;
    text-align: center;
    justify-content: center;
  }
  
  .product img{
    height: 100%;
    width: 100%;
 }
 
 .project{
   display: flex;
   height: 200px;
   }

  .projectList{
    display:flex;
    flex-direction: column;
    gap: 10px;
    height: 0;
    min-height: 100%;
    overflow-y: auto;
    
    }
 
 .designListThumbnail{
   background-color: white;
   width: 50%;
   }
.infoBox{
  display: flex;
  flex-direction: column;
  padding-left: 4%;
  justify-content: center;
  vertical-align:middle;
  }
  
.gallery{
  display: grid;
  height: 100%;
  width: 100%;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.gallery img {
  height: 100%;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
}

.galleryMain{
  height: 0;
  min-height: 100%;
  width:100%;
}

.galleryThumbnailRow{
  display: flex;
  gap: 10px;
  justify-content: center;
}

.galleryThumbnail{
  height: 70px;
  width: 70px;
}

.article {
  inset: 50px;
  display: grid;
  grid-template-rows: 1fr auto;
  opacity: 0;
  align-items: center;
  text-align: center;
  justify-content: center;
  z-index:2;
  position:absolute;
  transition: opacity 1s ease 0.3s;
}
  
.articleGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 30px;
  overflow-y: auto;
  padding: 0 30px;
    
}
 
.show {
  opacity: 1;
}
  
.hide {
  opacity: 0;
}
 
 .filter {
   display: flex;
   color: black;
   padding: 7px;
   justify-content: center;
   gap: 10px;
   }

.hidden { 
  display: none;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: currentColor;
}

.activeFilter {
  color: #573924;
  font-weight: bold;
}
 
p {
    margin: 0;
}

.updates h2 {
     text-decoration-line: underline;
     margin: 0;
}

h1 {
  margin: 5px;
}

h3{
  font-weight: normal;
  margin: 0;
  }