:root{
    --scroll:0px;
}
body{  padding: 0px;}
#viewport{height:3000vh;}
.quadriptyque{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 15px;
}
.quadriptyque figcaption{
    grid-column: span 2;
}

#first{
    width: 95vw;
    left: 0;
    right: 0;
    margin-inline: auto;
    top: 9vh;
    height: 71vh;
    flex-direction: column;
  align-items: center;
  row-gap: 50vh;
  text-align: center;
}
#first span{
    font-size: 2vh;
}
h1{
    font-family: "Sprat";
    font-size: 6em;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    align-self: center;
}
  article{
    display: flex;
    column-gap: 2vh;
    align-items: start;
    transform-style: preserve-3d;
    position: absolute;
    bottom: 0vh;
    transition: opacity 0.3s ease;
    will-change: opacity;
    padding: 3vh 3vh 16vh 3vh;
    background-color: var(--background);
    border: 1.2px solid #000;
}

article p{
    width: 45vw;
    display: inline-block;
    font-size: 4vh;
    font-family: "Lucette";
    border: 1px ridge black;
    padding: 1.5% 1.5% 16vh 1.5%;
    vertical-align: top;
    text-wrap: balance;
}
.format10575{
    max-width: 36.5vw;
}
.format11689{
    max-width: 40.3vw;

}
.format11689vertical{
    max-width: 30.9vw;
}
.format6555{
    max-width: 22.6vw;
}
.format146114vertical{
    max-width: 39.6vw;
}
.format146114{
    max-width: 50vw;
}

figure figcaption{
    font-family: "Lucette";
    font-size: 2vh;
    margin-top: 1vh;
}

figure:hover, article p:hover{
    cursor: pointer;
}

#viewpoint{
    width:100vw;
    height:100vh;
    position: fixed;
    perspective: 100vw; 
    perspective-origin: 50vw 50vh; /*X position value, Y position value*/
}
#viewbox{
    position: absolute;
    width:100vw;
    height: 100vh;
    transform-style: preserve-3d;
     transform: translateZ(calc(var(--scroll) * 1px));
     will-change: transform;
}
/*
article:nth-child(6n+1){
    transform: rotateY(45deg);
    left: 5vw;
}
article:nth-child(6n+2){
    left:60vw;
}
article:nth-child(6n+3){
    left:-10vw;
}
article:nth-child(6n+4){
    left: 20vw;
    border-left:0px;
}
article:nth-child(6n+5){
    transform: rotateY(-45deg) ;
}
article:nth-child(6n+6){
    transform: rotateY(45deg);
}*/

#lightbox{
    display: none;
    background-color: #0000002c;
    width:100vw;
    height:93vh;
    top:7vh;
    left:0;
    position: fixed;

}

#lightboxcont{
    display: block;
    position: relative;
    background-color: var(--background);
    width: 80vw;
    height: 75vh;
    margin-inline: auto;
    left: 0;
    top: 5vh;
    right: 0;
    padding: 1%;
    border: 1px solid black;
}

#lightboxcont figure{
    width: 98%;
  margin-inline: auto;
  height: auto;
  max-height: 100%;
  align-content: center;
  display: flex;
  flex-direction: column;
}
#lightboxcont figure img{
    display: block;
  object-fit: contain;
  min-height: 0;
}

#lightboxcont figure figcaption{
    text-align: center;
}

#lightboxcont .museetext {
	border: 0px;
	font-size: 3vh;
	max-width: 100%;
}

#lightbox .hide{
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 0;
    width: 100vw;
    height: 100vh;
    background-color: transparent;
    border: 0px;
    font-family: "Sprat";
    font-size: 3.4vh;
    color: transparent;
}
@media screen and (max-device-width:900px), (max-width:900px)  {
    #first{
            width: 89vw;
    }
    h1{
        font-size: 3.1em;
    }
    article p{
        width: fit-content;
      
        font-size: 1.2em;

        padding: 1.5% 1.5% 11vh 1.5%;
    }
    article:nth-child(6n+2) {
        left: 31vw;
    }
    .format10575{
        /*max-width: 15.1em;*/
        max-width: 61.8vw;

    }
    .format11689{
        /*max-width: 16.7em;*/
        max-width: 68.3vw;

    
    }
    .format11689vertical{
        /*max-width: 12.8em;*/
        max-width: 52.4vw;

    }
    .format6555{
        /*max-width: 9.4em;*/
        max-width: 38.3vw;

    }
    .format146114vertical{
        /*max-width: 16.39em;*/
        max-width: 67.15vw;

    }
    .format146114{
        /*max-width: 21em;*/
        max-width: 84vw;

    }
    
}

@media screen and (max-height:900px) and (orientation: landscape) {

    h1{
        font-size: 4em;
    }
    article p {
        width: fit-content;
        font-size: 1.6em;
        padding: 1.5% 1.5% 9vh 1.5%;
        max-width: 53vw;
    }
}

@media screen and (max-device-width:900px), (max-width:900px)  {
    #viewpoint{
        width:100vw;
        height:100vh;
        position: fixed;
        perspective: 150vw; 
        perspective-origin: 50vw 50vh; /*X position value, Y position value*/
    }
    #lightbox .hide{
        position: absolute;
  left: 0px;
  top: 0px;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  background-color: transparent;
  border: 0px;
  font-family: "Sprat";
  font-size: 3.4vh;
  color: transparent;
    }
    #lightboxcont{
        height:auto;
        padding:4%;
    }
    
#lightboxcont .museetext {
	font-size: 2.5vh;
}
}
@media screen and (max-device-width:600px), (max-width:600px)  {
    h1{
        font-family: "Sprat";
        font-size: 3.1vh;
        text-align: center;
        text-transform: uppercase;
        left: 0;
        right: 0;
        margin-inline: auto;
    }
  
    article:nth-child(6n+2){
        left: 0vw;
    }

    article{
        padding: 1.5vh 1.5vh 10vh 1.5vh;
        top: auto;
        height: fit-content;
        row-gap: 2vh;
        left:0px!important;
        bottom:15vh;

    }
    article p{
        width: fit-content;
        font-size: 1.2em;
        padding: 1.5% 1.5% 11vh 1.5%;
    }
    article{
        flex-direction: column;
    }

   /* article:nth-child(6n+2){
        left: 0vw;
    }

    article:nth-child(6n+6){
        left: 32vw;
    }*/
        figure{
        align-self: center;
    }
   
    .format10575{
        /*max-width: 15.1em;*/
        max-width: 79.1vw;

    }
    .format11689{
        /*max-width: 16.7em;*/
        max-width: 87.4vw;

    
    }
    .format11689vertical{
        /*max-width: 12.8em;*/
        max-width: 67vw;

    }
    .format6555{
        /*max-width: 9.4em;*/
        max-width: 49vw;

    }
    .format146114vertical{
        /*max-width: 16.39em;*/
        max-width: 86vw;

    }
    .format146114{
        /*max-width: 21em;*/
        max-width: 110vw;

    }
  
}
@media screen and (max-width: 360px){
    h1{
        font-family: "Sprat";
        font-size: 1.5em;
        text-align: center;
        text-transform: uppercase;
    }
}
@media screen and (max-width: 330px){
    h1{
        font-size: 1.32em;
    }
}