* {
    box-sizing: border-box;
    --temp: rgba(255, 255, 255, 0);
    --radius: 25px;
    --fontcolor: #272f35;
    /* user-select: none; */
    /* cursor: url("assets/cursors/cursor_default.png"), default; */
}

#cursorradio {
    position: fixed;
    object-fit: cover;
}

html, body {
    scroll-behavior: smooth;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: monospace;
    background-image: linear-gradient(#4891CC, hsl(231, 52%, 90%), #EFEFF7);
    /* background-image: linear-gradient(rgb(72, 145, 204), rgb(34, 70, 99), rgb(15, 31, 44)); */
}

a {
    color: var(--fontcolor);
}

body {
    overflow: auto;
    overflow-x: hidden;
    perspective: 1px;
    transform-style: preserve-3d;
}
body, body * {
    transform-style: preserve-3d;
}

iframe, .imglink {
    border-radius: var(--radius);
    border-top-left-radius: calc(var(--radius) / 5);
    border-bottom-right-radius: calc(var(--radius) / 5) ;
    width: 100%;
}

#imglinkcontainer {
    border-radius: var(--radius);
    border-top-left-radius: calc(var(--radius) / 5);
    border-bottom-right-radius: calc(var(--radius) / 5) ;
    height: 100px;
    overflow: hidden;
    transition: 250ms;
}

#imglinkcontainer:hover {
    border-radius: var(--radius);
    border-top-left-radius: calc(var(--radius) / 5);
    border-bottom-right-radius: calc(var(--radius) / 5) ;
    height: 180px;
    overflow: hidden;
    transition: 250ms;
}

.bg {
    opacity: 60%;
}
.parallax {
    /* padding: 10%; */
    max-width: 100%;
    margin: auto;
    pointer-events: none;
}
.parallax :nth-child(1) {
    transform: translateZ(-2px) scale(2.25);
    z-index: -400;
    top: -1500px;
    left: -1200px;
}
.parallax :nth-child(2) {
    transform: translateZ(-.75px) scale(2);
    z-index: -200;
    top: 1200px;
    left: 500px;
}
.parallax :nth-child(3) {
    transform: translateZ(.3px) scale(0.1);
    z-index: -300;
    top: -4000px;
    left: 900px;
}
.parallax :nth-child(4) {
    transform: translateZ(0.1px) scale(0.9);
    z-index: -100;
    top: -500px;
    left: 500px;
}
.parallax :nth-child(5) {
    transform: translateZ(-.8px) scale(.1);
    z-index: -50;
    top: -7500px;
    left: -3000px;
}
.parallax :nth-child(6) {
    transform: translateZ(-0.6px) scale(.5);
    z-index: -40000;
    top: 700px;
    left: -300px;
}
.parallax :nth-child(7) {
    transform: translateZ(-1px) scale(2);
    z-index: -1000;
    top: 400px;
    left: 1000px;
}
.parallax :nth-child(8) {
    transform: translateZ(-0.4px) scale(1.4);
    z-index: -400;
    top: 100px;
    left: 1400px;
}
.parallax :nth-child(9) {
    transform: translateZ(0.4px) scale(0.6);
    z-index: -400;
    top: 900px;
    left: 500px;
}
.parallax :nth-child(10) {
    transform: translateZ(-1px) scale(2);
    z-index: -1000;
    top: 1600px;
    left: 100px;
}
.parallax > * {
    position: absolute;
}

:root {
    --magnifier: 2;
    --gap: 1vmin;
    --transition: 0.5s;
}

#boite {
    position: absolute;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#main {
    margin-top: 100px;
    margin-bottom: 100px;
    background-color: var(--temp);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70%;
    max-width: 1200px;
    color: var(--fontcolor);
}

#titre {
    width: 110%;
    padding-top: 50px;
    padding-bottom: 150px;
    transition: 250ms;
}

@font-face {
    font-family: title;
    src: url(../assets/fonts/BlippoBlackBT.ttf);
}
@font-face {
    font-family: subtitle;
    src: url(../assets/fonts/bricolage/BricolageGrotesque-Light.ttf);
}
@font-face {
    font-family: core;
    src: url(../assets/fonts/AzeretMono-Regular.ttf);
}

p {
    font-family: core ;
    font-size: 1em;
}

h1 {
    font-family: title ;
    text-transform: uppercase;
    font-size: 200%;
    text-align: left;
}

h3 {
    font-family: subtitle ;
    text-transform: capitalize;
    font-size: 130%;
    text-align: left;
}

#accueil {
    display: block;
}
#accueil_mobile {
    display: none;
}

#accueil, #accueil_mobile, #info, #apropos, #atelier {
    background-color: var(--temp);
    text-align: center;
    width: 100%;
    padding: 50px;
    padding-top: 50px;
}

#legal {
    background-color: var(--temp);
    text-align: center;
    width: 100%;
    padding: 50px;
    padding-top: 50px;
}

#legal p {
    background-color: var(--temp);
    text-align: left;
    font-size: .75em;
    /* height: 0; */
    /* transform: scaleY(0); */
    /* transition: 200ms; */
}
/* #legal:hover p {
    height: auto;
    transform: scaleY(1);
    transition: 200ms;
} */

#accueil p, #accueil_mobile p, #info p, #apropos p, #atelier p {
    background-color: var(--temp);
    text-align: left;
    /* font-size: 1.5em; */
}

/* make it appear after scroll */
#accueil, #accueil_mobile, #info, #apropos, #legal, #atelier {
    opacity: 100%;
}

#gallerie {
    transform: translateZ(100px) scale(1);
    display: flex;
    z-index: 2000;
}

.container {
    width: 100%;
    height: 50vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
}

.photo {
    --brightness: 0.75;
    --grayscale: 1;
    transition: flex var(--transition), filter var(--transition);
    height: 100%;
    filter: grayscale(var(--grayscale)) brightness(var(--brightness));
    object-fit: cover;
    overflow: hidden;
    flex: 1;
    /* box-shadow: -5px 5px 0px 0px #b28b37; */
    /* box-shadow: -10px 10px 0px 0px #997117; */
    transition: 300ms;
}

.photo:first-of-type{
    border-top-left-radius: calc(var(--radius) / 5);
    border-bottom-left-radius: var(--radius);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.photo:last-of-type{
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: calc(var(--radius) / 5);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.photo:hover {
    --brightness: 1.15;
    --grayscale: 0;
    flex: var(--magnifier);
    transform: translateY(50px);
    transition: 300ms;
}

@media only screen and (orientation: portrait) {
    
    #accueil {
        display: none;
    }

    #accueil_mobile {
        display: block;
    }

    #titre {
        width: 90%;
        padding-bottom: 0px;
        padding-top: 0px;
        margin-bottom: 0px;
        margin-top: 20px;
    }

    #main {
        margin-top: 50px;
        background-color: var(--temp);
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 95%;
        max-width: 1200px;
        color: var(--fontcolor);
    }
    
    .container {
        width: 100%;
        height: 1500px;
        margin-top: 50px;
        margin-bottom: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--gap);
    }

    .photo {
        --brightness: 1;
        --grayscale: 0;
        width: 100%;
        filter: grayscale(var(--grayscale)) brightness(var(--brightness));
        object-fit: cover;
        overflow: hidden;
        flex: 1;
        /* box-shadow: -5px 5px 0px 0px #b28b37; */
        /* box-shadow: -10px 10px 0px 0px #997117; */
        transition: 300ms;
        user-select: none;
    }    
    
    .photo:hover {
        --brightness: 1.15;
        --grayscale: 0;
        flex: calc(var(--magnifier) / 1.5);
        transform: translateY(0px);
        transition: 300ms;
    }
    
    .photo:first-of-type {
        border-top-left-radius: calc(var(--radius) / 5);
        border-top-right-radius: var(--radius);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    
    .photo:last-of-type {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: var(--radius);
        border-bottom-right-radius: calc(var(--radius) / 5);
    }
}