/* 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;
  background-image: url( '/images/websiteBackground.jpg' );
  background-size: cover;
  background-position: center;
  color: black;
  font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, serif;
  font-optical-sizing: auto;
  font-style: normal;
}

button{
  cursor: pointer;  
}

a{
  cursor: pointer;  
}

.substack-post-embed iframe {
  width: unset !important;
}

  .closedBook {
    cursor: pointer;
    background-color: #26290D;
    background-image: url(/images/bookcoverbackground.jpg);
    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;
    box-shadow: -5px 5px 15px 4px black;
  }
  
  .closedBook img {
  height: 100%;
  width: 100%;
  }
  
.bookBinding {
  display: flex;
  margin: auto;
  justify-content: center;
  height: 818px;
  width: calc(2 * 727px);
  max-height: 90vh;
  max-width: 90vw;
  position: relative;
  border: solid 5px #3C4300;
  filter: drop-shadow(1px 6px 10px black);
}

.bookBinding > * {
  /* render all children of book binding slightly higher (above the tabs) */
  z-index: 2;
}

.nav{
  display: flex;
  gap: 10px;
  position: absolute;
  top: -30px;
  left: 75%;
  transform: translate(-50%);
  z-index: 1;
}
  
.navTab{
  width: 30px;
  height: 30px;
  background-color: #E2D5A7;
  border-radius: 3px 3px 0px 0px;
  cursor: pointer;
}

.navTab:hover{
  background-color: #648651;
  }
  
.activeTab{
  background-color: #DB9E38;
  }

.leftPage,
.rightPage {
  background-color: #C6AE86;
  width: 0;
  padding: 50px;
  min-width: calc(50% - 100px);
  position: relative;
  background-image: url( '/images/pageBackground.svg' );
  background-size: cover;
}

.leftPage {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.leftPageContent {
  height: 100%;
  width: 100%;
  overflow: visible;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
}

.seam{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #3A2A18;
  box-shadow: 0px 0px 12px 4px #3A2A18;
  }

.rightPageContent {
  height: 100%;
  width: 100%;
  overflow: auto;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
}

.topRightBorder{
  pointer-events: none;
  width: 185px;
  position:absolute;
  top:2%;
  left:2%;
}

.wordmark{
 width: 150px;
 height: 33px;
 position:absolute;
 background-color: #573924;
 top: 2%;
 left: 50%;
 transform: translate(-50%, 0);
 mask-image: url(/images/InkantressWordmark.svg);
 mask-repeat: round;
}

.wordmark:hover{
 background-color: #74212F; 
}

.topLeftBorder{
  pointer-events: none;
  width: 185px;
  position:absolute;
  top:2%;
  right:2%;
  transform: scaleX(-1);
  color: #573924;
}

.bottomRightBorder{
  pointer-events: none;
  width: 185px;
  position:absolute;
  bottom:2%;
  right:2%;
  transform: scaleX(-1) scaleY(-1);
}

.bottomLeftBorder{
  pointer-events: none;
  width: 185px;
  position:absolute;
  bottom:2%;
  left:2%;
  transform: scaleY(-1);
}

.mainButton{
  cursor: pointer;
  /*background-image: url( '/images/tape.svg' );*/
  /*background-color: transparent;*/
  border: 0px;
  min-width: 110px;
  color: #F7E0BC;
  height: 50px;
  font-family: inherit;
  font-size: medium;
  padding: 0 15px;
  background: transparent;
  position: relative;
}

.mainButton img{
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}

.mainButton:hover img{
 filter: drop-shadow(0px 4px 6px black);
}

.mainButton:focus img{
 filter: drop-shadow(0px 4px 6px black);
}

.mainButton span{
  position: relative;
  pointer-events: none;
  white-space: nowrap;
}

.webIntro{
  text-align: justify;
  margin-top: -8px;
  color: #5C3F28;
  font-size: 16.5px;
  
  }

  
.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: 10px 5px;
}

@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);
    gap: 5px;
    }
  
.pageLink{
  width: 0;
  min-width: 100%;
  align-items: center;
  text-align: center;
  cursor: pointer;
 }
 
 .pageLink p{
  padding-bottom: 10px; 
 }
 
.pageLink img{
  max-height: 100%;
  max-width: 100%;
  border-radius: 5px;
}

.textAlignLeft {
   text-align: left;
}

.textAlignCenter{
 text-align: center;
}

.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:3;
  transition: opacity 1s ease;
  }  
  
.art {
  inset: 50px;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr;
  opacity: 0;
  align-items: center;
  text-align: center;
  justify-content: center;
  z-index:4;
  position:absolute;
  transition: opacity 1s ease 0.3s;
  pointer-events: none;
  }
  
.artImgWrapper {
  height: 0;
  min-height: 100%;
  width:0;
  min-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

}
  
.art img{
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  margin-top: 3px;
  border-radius: 10px;
 }
 
 
 .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{
   height: 200px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   }

  .projectList{
    display:flex;
    flex-direction: column;
    gap: 10px;
    height: 0;
    min-height: 100%;
    overflow-y: auto;
    
    }
 
 .designListThumbnail{
   background-color: white;
   }
.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:4;
  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;
    
}

.curses{
 border-style: dashed; 
 padding: 5px;
 border-width: 3px;
 border-color: #921A1A;
 text-align: center;
 color: #921A1A;
}
  
.column {
  display: flex;
  flex-direction: column;
}

.ctaRow {
  display: flex;
  width: 100%;
  justify-content: space-around;
  
}

.leftMargin {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin-bottom: 15px;
}

.greetingContainer,
.leftMarginContent {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
}

.greetingContainer img{
  width: 50%;
}

.leftMarginContent{
 padding-top: 30px; 
 gap: 10px;
}

.banners img{
  width: 88px;
  height: 31px;
}

.show {
  opacity: 1;
}
  
.hide {
  opacity: 0;
}
 
 .filter {
   display: flex;
   color: black;
   padding: 7px;
   justify-content: center;
   gap: 10px;
   }

.hidden { 
  display: none;
}

.fade-in {
  opacity: 0;
  animation: fadeUp 2s ease-out forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

.paragraphLink{
 color: #30221C;
 cursor: pointer;
 text-decoration: underline;
}

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

h1 {
  margin: 5px;
}

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