/* Standard */

@font-face {
    font-family: 'Daubenton';
    src: url('./font/Daubenton/Daubenton.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('./font/Daubenton/Daubenton.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */

}
@font-face {
  font-family: 'Palladio';
  src: url('./font/Palladio/P052-Roman.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('./font/Palladio/P052-Roman.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

body {
  margin: 0;
}

header {
  height:2em;
}

footer {
  height:2em;
}

a:link,a:hover,a:active,a:visited {
  text-decoration: none;
  color: inherit;
}

h1,h2,h3,h4,h5,h6,a {

  font-family: HonyaJi-re;
  color: #2e1814ff;

}

p {

  font-family: HonyaJi-re;
  color: #2e1814ff;
  text-align: justify;
  text-justify: inter-word;

}

.main {
  width:80%;
}

.divider {
  margin-top: 2em;
  margin-bottom: 2em;
  color: #2e1814ff;
}

.halfblock {width:65%;}

/* Specific elements */

#info {
  position: absolute;
  margin-left:1em;
  left:10%;
  top:2em;
  width:1em;
  white-space: nowrap;
  overflow: visible;
   float:left;
   text-align:left;
   z-index:1;
}

#chair {
   position: relative;

   width:65%;
   float:right;
   z-index:0;

}
.gallery {
  /* (B1) GRID LAYOUT - 5 IMAGES PER ROW */
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 2em;
  width:100%;

  /* (B2) OPTIONAL WIDTH RESTRICT */
  max-width: 100%;
  margin: 0 auto;
  overflow: show;

}

.duo {
  /* (B1) GRID LAYOUT - 5 IMAGES PER ROW */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 2em;
  width:100%;

  /* (B2) OPTIONAL WIDTH RESTRICT */
  max-width: 100%;
  margin: 0 auto;
  overflow: show;

}

/* (C) GALLERY IMAGES */
.gallery img {
  /* (C1) DIMENSION */
  aspect-ratio: 1/1;
  width: 100%;
  height: ; /* optional */
  padding: 0px;

  /* (C2) COLORS */
  border: 0px solid #ddd;
  background: #fff;

  /* (C3) IMAGE RESIZE */
  /* cover | contain | fill | scale-down */
  object-fit: cover;
}

/*phone*/

/* (D) ON SMALL SCREENS - 3 IMAGES PER ROW */
@media only screen and (max-width: 800px) {

  #info {
    margin-left:1em;
    left:5%;
    top:2em;
  }

  .main {
    width:90%;
    position: relative;

  }

  .home {
    top:8em;
  }

  #frontpage {
    
  }

  .halfblock {width:100%;}

  #chair {
     width:100%;
     float:right;

  }

  .gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 2em;
  }

  .duo {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-gap: 2em;
  }
}

/* (E) OPTIONAL ZOOM ON HOVER */
.gallery img:hover  {
  z-index: 9;
  transform: scale(1.05);
  /* linear | ease | ease-in | ease-out | ease-in-out */
  transition: transform ease 0.1s;
}

/* (F) FULLSCREEN MODE */
.gallery img.full {
  position: fixed;
  top: 0; left: 0; z-index: 999;
  width: 100vw; height: 100vh;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.7);
}
.gallery img.full:hover{
  z-index: 999;
  transform: none;
}

}