* {
    box-sizing: border-box;
    padding: 0;
}
html {
    font-family: 'futura-pt', helvetica, sans-serif;
    font-size: 2vw;
    overflow-x: hidden;
    scroll-behavior: smooth;
    touch-action: pan-y;
}
    
body {
    background-color: rgba(0, 49, 83, 1);
    
}

/* --------------------------------------------------------*/

h1 {
    font-weight: bold;
}

h2 {
   font-weight: 100;
}

ul {
    list-style: none;
    display: flex;
    writing-mode: vertical-rl;
}

li {
    margin: 0.1rem;
    background-color: rgba(0, 49, 83, 1);
    padding: 0.5rem 0.5rem 0.5rem 0;
    list-style-type: none;
}

a {
    color: rgba(213, 159, 0, 1);
    font-weight: bolder;
    text-decoration: none;
    text-transform: uppercase;
}

:focus-visible {
    outline: 4px solid rgba(213, 159, 0, 1);
    padding: 0.3vw;
    border-radius: 1rem;
}

a[img-focus]:focus-visible {
    outline: 6px solid rgba(213, 159, 0, 1);
    border-radius: 0;
    padding: 0;
}

p {
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    font-size: 1vw;
}

/* --------------------------------------------------------*/

header {
    margin: auto;
    text-transform: uppercase;
    margin-top: 0;
}

header .header-wrapper {
    background-color: rgba(213, 159, 0, 1);
}

header h1 {
    color: rgba(0, 49, 83, 1);
    display: flex;
    align-items: flex-end;
    margin-bottom: -0.2rem;
}    

header h2 {
    color: rgba(0, 49, 83, 1);
}

.menu {
    display: flex;
    align-items: flex-end;
}

.photos {
    columns: 225px;
    break-inside: avoid;
    margin-left: 20px;
    margin-right: 20px;
    column-gap: 12px;
}
  
.photos img {
    width: 100%;
    display: block;
    margin-top: 0px;
    margin-bottom: 10px;
    border: 1px solid black;
}

div.visionneuse {
    display: none;
}   


/* --------------------------------------------------------*/
  
@supports (display: grid){
    
    .intro-wrapper {
        display: grid;
        height: 100vh;
        grid-template-columns: 75vw 25vw;
        grid-template-rows: 60vw max-content;
        

    }
    
    .vl {
        border-left: 2vw solid rgba(213, 159, 0, 1);
        height: 104vh;
        position: fixed;

        margin: -1rem 0 0 74vw;
        z-index: -999;
    }
    
    header .header-wrapper {
        display: grid;
        grid-template-columns:40vw max-content 30vw 3.5vw; 
        grid-template-rows: 42vw ;
        margin-top: -18rem;
        margin-left: -10rem;
        transform: rotate(35deg);
    }

    
    header h1 {
        grid-column: 2 / 3;
        grid-row: 2;
    }
    
    header h2 {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        text-orientation: sideways;
        grid-column: 4;
        grid-row: 2 ;
        margin: 0 -0.1rem 0.2rem 0;
        
    }
    
    .menu{
        grid-column: 2 / 3;
        grid-row: 2 / span 3;
        margin: 1vh 0 4vh -1.7rem;
    }

    div.visionneuse {
        position: fixed;
        height: 100vh;
        width: 100vw;
        z-index: 999;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 49, 83, 0.8);
        grid-template-columns: 10vw 80vw 10vw;
        grid-template-rows: 5vh 90vh 5vh;
       
    }
    
    div.visionneuse:target {
        display: grid;
    }
    
    div.visionneuse img {
        width: 100%;
        max-height: 100%;
        display: flex;
        grid-column: 2 span 3;
        grid-row: 2;
        object-fit: contain;
        align-self: center;
        justify-content: center;
    }
    
    .ferme {
        
        display: flex;
        position: relative;
        z-index: 999;
        color: rgba(213, 159, 0, 1);
        justify-self: left;
        margin: 0;
        font-weight: bold;
        font-size: 40px;
        grid-column: 3;
        grid-row: 1;
    }
    
    .suiv {
        display: flex;
        position: relative;
        z-index: 999;
        color: rgba(213, 159, 0, 1);
        font-size: 60px;
        font-weight: bold;
        grid-row: 2;
        grid-column: 3;
        align-self: center;
        justify-self: left;
    }
    
    .prec {
        display: flex;
        position: relative;
        z-index: 999;
        color: rgba(213, 159, 0, 1);
        font-size: 60px;
        font-weight: bold;
        grid-column: 1;
        grid-row: 2;
        align-self: center;
        justify-self: right;
    }

    /* -------Galerie-------------*/
    
    #galerie {
        display: flex;
        justify-content: center;
    }


    .photos {
        display: grid;
        row-gap: 2rem;
        max-width: 100vw;
    }

    /* --------------------------------------------------------*/

    #contact {
        display: grid;
        height: 80vh;
        max-width: 100vw;
        align-self: center;
        justify-content: center;
        grid-template-columns: repeat(5, 16vw);
        grid-template-rows: 30vh 5vh 10vh 30vh;
        row-gap: 1rem;
        margin: 0;
    }
    
    #contact p {
        display: flex;
        align-items: flex-end;
        text-align: center;
        justify-content: center;
        color: rgb(223, 223, 223);
        grid-column: 1 / span 5;
        grid-row: 3;
        font-size: 3vw;
    }
    
    #email {
        display: flex;
        align-items: flex-start;
        justify-self: center;
        width: 70vw;
        grid-column: 1 / span 5;
        grid-row: 4;
    }
    
    #insta-logo {
        display: flex;
        align-content: flex-end;
        justify-content: center;
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        max-height: 3vw;
    }
    
    #bsky-logo {
        display: flex;
        justify-content: center;
        grid-column: 3;
        grid-row: 2;
        width: 100%;
        max-height: 3vw;
    }
    
    #tumblr-logo {
        display: flex;
        justify-content: center;
        grid-column: 4;
        grid-row: 2;
        width: 100%;
        max-height: 3vw;
    }
    
    /* --------------------------------------------------------*/


    @media (max-width : 449px) {
        
        header .header-wrapper {
            display: grid;
            grid-template-columns:40vw 60vw 30vw 3.5vw; 
            margin-top: -18rem;
            margin-left: -13.75rem;
            transform: rotate(35deg);
        }

        header h1 {

            font-weight: bolder;
        }

        header h2 {
            font-weight: bold;
        }
        
        .menu {
            margin: 0 0 15vh -2.35rem;
        }
        
        li {
            margin: 0.2rem;
            padding: 0.5rem 0.5rem 0.5rem 0;
            
            font-size: 2rem;
        }
        
        
        #insta-logo {
            max-height: 8vw;
        }
        
        #bsky-logo {
            width: 10%;
            max-height: 4vw;
            
        }
        
        #tumblr-logo {
            width: 100%;
            max-height: 8vw;
        } 
    }

    @media (max-aspect-ratio : 1 / 1) and (min-width : 450px){

        .menu {
            margin: 0 0 10vh -1.70rem;}
        
        header .header-wrapper {
            margin-top: -18rem;
            margin-left: -10rem;
        }

    
    }
    
    @media (min-aspect-ratio : 1 / 1) {
        
        .intro-wrapper {
            grid-template-columns: 90vw 10vw;
            grid-template-rows: 30vw max-content;
        }
            
        header .header-wrapper {
            transform: rotate(20deg);
            margin: -22.5rem 0 0 -10rem;
        }
        
        .vl {
            border-left: 1.5vw solid rgba(213, 159, 0, 1);
            margin: -1rem 0 0 89vw;
        }
        
        .menu {
            margin: 0 0 4vh -1.55rem;
        }

        li {
            margin: 0.05rem;
            padding: 0.25rem 0.25rem 0.25rem 0;
            font-size: 1.2vw;
        }

        .photos {
            grid-template-columns: 4fr 2fr 3fr 2fr 4fr;
            gap: 1rem;
            max-width: 90vw;
        }

        svg {
            z-index: 9999;
            width: 100%;
            height: auto;}
        
        .photos a:nth-of-type(1){
            grid-column: 4 / span 2;
            grid-row: 1 / span 6;
            z-index: 2;
            
        }

        .photos a:nth-of-type(2){
            grid-column: 3 / span 2;
            grid-row: 6 / span 6;
            
        }

        .photos a:nth-of-type(3){
            grid-column: 1 / span 3;
            grid-row: 11 / span 6;
            z-index: 2;
        }

        .photos a:nth-of-type(4){
            grid-column: 3 / span 3;
            grid-row: 16 / span 6;
            
        }

        .photos a:nth-of-type(5){
            grid-column: -5 / span 2;
            grid-row: 21 / span 6;
            
        }

        .photos a:nth-of-type(6){
            grid-column: 1/ span 2;
            grid-row: 26 / span 6;
            
        }

        .photos a:nth-of-type(7){
            grid-column: -4/ span 3;
            grid-row: 29 / span 6;
            
        }

        .photos a:nth-of-type(8){
            grid-column: 1 / span 2;
            grid-row: 32 / span 6;
            
        }

        .photos a:nth-of-type(9){
            grid-column: -5/ span 4;
            grid-row: 37 / span 6;
            
        }

        .photos a:nth-of-type(10){
            grid-column: 1 / span 3;
            grid-row: 42 / span 6;
            z-index: 2;
        }

        .photos a:nth-of-type(11){
            grid-column: -3 / span 2;
            grid-row: 47 / span 6;
            z-index: 2;
        }

        .photos a:nth-of-type(12){
            grid-column: -4 / span 2;
            grid-row: 51 / span 6;
        }

        .photos a:nth-of-type(13){
            grid-column: 1 / span 3;
            grid-row: 55 / span 6;
            
        }

        header h1 {
            font-weight: bold;
        }

        header h2 {
            font-weight: 200;
        }
    }
    
    @media (min-aspect-ratio : 15 / 10) {
        .intro-wrapper {
            grid-template-columns: 94.5vw 5.5vw;
            grid-template-rows: 20vw max-content;}
        header .header-wrapper {
            grid-template-columns:40vw 60vw 22vw min-content;
            transform: rotate(12deg);
            margin: -24rem 0 0 -11rem;}
        h2 {
            font-size: 1.9vw;}
        .menu {
            margin: -2.5rem 0 4vh -1.55rem;
        }
        .vl {
            border-left: 1.5vw solid rgba(213, 159, 0, 1);
            margin: -1rem 0 0 93.5vw;
        }
        
        .photos img {
            max-height: 80vh;
            max-width: 100%;
            width: auto;
        }
        
        .photos a:nth-of-type(3){
            grid-column: 1 / span 2;
            grid-row: 11 / span 6;
            z-index: 2;
        }

        .photos a:nth-of-type(4){
            grid-column: 4 / span 2;
            grid-row: 13 / span 6;
            
        }

        .photos a:nth-of-type(5){
            grid-column: 2 / span 3;
            grid-row: 18 / span 6;
            
        }

        .photos a:nth-of-type(6){
            grid-column: 1 / span 2;
            grid-row: 23 / span 6;
            
        }

        .photos a:nth-of-type(7){
            grid-column: 2 / span 2;
            grid-row: 27 / span 6;
            
        }

        .photos a:nth-of-type(8){
            grid-column: 4 / span 2;
            grid-row: 32 / span 6;
            
        }

        .photos a:nth-of-type(9){
            grid-column: 2 / span 3;
            grid-row: 37 / span 6;
            
        }

        .photos a:nth-of-type(10){
            grid-column: 1 / span 2;
            grid-row: 41 / span 6;
            z-index: 2;
        }

        .photos a:nth-of-type(11){
            grid-column: 2 / span 2;
            grid-row: 46 / span 6;
            z-index: 2;
        }

        .photos a:nth-of-type(12){
            grid-column: 4 / span 3;
            grid-row: 51 / span 6;
        }

        .photos a:nth-of-type(13){
            grid-column: 2 / span 3;
            grid-row: 56 / span 6;
        }
        
        #contact p {
            font-size: 2vw;
        }
        
        #contact svg {
            width: 40vw;
        }
    
    }

    @media (min-aspect-ratio : 22 / 10) {
        .intro-wrapper {
            grid-template-columns: 85vw 10vw;
            grid-template-rows: 10vw max-content;
        }
        header .header-wrapper {
            transform: rotate(0);
            grid-template-columns:40vw max-content max-content 13.75vw min-content 23vw 15vw;
            margin: -22.5rem 0 0 -18rem;
        }
        .menu {
            margin: -3rem 0 4vh -1.55rem;
        }
        header h2 {
            display: flex;
            align-items: flex-end ;
            transform: rotate(0deg);
            writing-mode: horizontal-tb;
            grid-column: 5;
            margin: 0 0 0 0;
        }

        .vl {
            margin: -1rem 0 0 84.05vw;
        }

        .photos a:nth-of-type(13){
            grid-column: 3 / span 3;
            grid-row: 56 / span 6;
        }
    }
    
    @media (min-aspect-ratio : 393 / 100) {
        li {
            padding: 0.1rem 0.1rem 0.1rem 0;
            font-size: 0.7vw;}
        .menu {
            margin: -3rem 0 4vh -1.55em;
        }
        .vl {
            border-left: 0.7vw solid rgba(213, 159, 0, 1);
        }
    }
    

}

/* --------------------------------------------------------*/