html {
    height: 100%;
    width: 100%;
    padding: 0%;
    padding-top: 0%;
    margin: 0%;
    border: 0%;
    background-color: var(--back) ;

    /*background-image: radial-gradient(#FAFAFA, #deecf4);*/
    font-family:  'Bricolage Grotesque';
    flex: 1 1 1;

}

:root {
    --back: #f0f0f0 ;
}

.MAIN {
    overflow: hidden;
    background-image: url(theultimatebg2comp.png);
    background-size: cover;
    background-position: center;
    display: grid;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    overflow: hidden;
}

body {
    height: 100%;
    width: 100%;
    margin: 0%;
    padding: 0px;
    gap: 10%;

    box-sizing: border-box;
    flex: 1 1 1 ;

}
.background {
    opacity: 50%;
    position: fixed;
    top: 50%;
    left: 50%;
    height: 1px;
    width: 1px;
    background-color: #808082;
    border-radius: 50%;
    box-shadow: -42vw -4vh 0px 0px #0080FF,25vw -41vh 0px 0px #0080FF,-20vw 49vh 0px 1px #0080FF,5vw 40vh 1px 1px #0080FF,29vw 19vh 1px 0px #0080FF,-44vw -13vh 0px 0px #0080FF,46vw 41vh 0px 1px #0080FF,-3vw -45vh 0px 1px #0080FF,47vw 35vh 1px 0px #0080FF,12vw -8vh 1px 0px #0080FF,-34vw 48vh 1px 1px #0080FF,32vw 26vh 1px 1px #0080FF,32vw -41vh 1px 1px #0080FF,0vw 37vh 1px 1px #0080FF,34vw -26vh 1px 0px #0080FF,-14vw -49vh 1px 0px #0080FF,-12vw 45vh 0px 1px #0080FF,-44vw -33vh 0px 1px #0080FF,-13vw 41vh 0px 0px #0080FF,-36vw -11vh 0px 1px #0080FF,-23vw -24vh 1px 0px #0080FF,-38vw -27vh 0px 1px #0080FF,16vw -19vh 0px 0px #0080FF,28vw 33vh 1px 0px #0080FF,-49vw -4vh 0px 0px #0080FF,16vw 32vh 0px 1px #0080FF,36vw -18vh 1px 0px #0080FF,-25vw -30vh 1px 0px #0080FF,-23vw 24vh 0px 1px #0080FF,-2vw -35vh 1px 1px #0080FF,-25vw 9vh 0px 0px #0080FF,-15vw -34vh 0px 0px #0080FF,-8vw -19vh 1px 0px #0080FF,-20vw -20vh 1px 1px #0080FF,42vw 50vh 0px 1px #0080FF,-32vw 10vh 1px 0px #0080FF,-23vw -17vh 0px 0px #0080FF,44vw 15vh 1px 0px #0080FF,-40vw 33vh 1px 1px #0080FF,-43vw 8vh 0px 0px #0080FF,-48vw -15vh 1px 1px #0080FF,-24vw 17vh 0px 0px #0080FF,-31vw 50vh 1px 0px #0080FF,36vw -38vh 0px 1px #0080FF,-7vw 48vh 0px 0px #0080FF,15vw -32vh 0px 0px #0080FF,29vw -41vh 0px 0px #0080FF,2vw 37vh 1px 0px #0080FF,7vw -40vh 1px 1px #0080FF,15vw 18vh 0px 0px #0080FF,25vw -13vh 1px 1px #0080FF,-46vw -12vh 1px 1px #0080FF,-18vw 22vh 0px 0px #0080FF,23vw -9vh 1px 0px #0080FF,50vw 12vh 0px 1px #0080FF,45vw 2vh 0px 0px #0080FF,14vw -48vh 1px 0px #0080FF,23vw 43vh 0px 1px #0080FF,-40vw 16vh 1px 1px #0080FF,20vw -31vh 0px 1px #0080FF,-17vw 44vh 1px 1px #0080FF,18vw -45vh 0px 0px #0080FF,33vw -6vh 0px 0px #0080FF,0vw 7vh 0px 1px #0080FF,-10vw -18vh 0px 1px #0080FF,-19vw 5vh 1px 0px #0080FF,1vw 42vh 0px 0px #0080FF,22vw 48vh 0px 1px #0080FF,39vw -8vh 1px 1px #0080FF,-6vw -42vh 1px 0px #0080FF,-47vw 34vh 0px 0px #0080FF,-46vw 19vh 0px 1px #0080FF,-12vw -32vh 0px 0px #0080FF,-45vw -38vh 0px 1px #0080FF,-28vw 18vh 1px 0px #0080FF,-38vw -46vh 1px 1px #0080FF,49vw -6vh 1px 1px #0080FF,-28vw 18vh 1px 1px #0080FF,10vw -24vh 0px 1px #0080FF,-5vw -11vh 1px 1px #0080FF,33vw -8vh 1px 0px #0080FF,-16vw 17vh 0px 0px #0080FF,18vw 27vh 0px 1px #0080FF,-8vw -10vh 1px 1px #0080FF;
  
  /* stars were too big with the layers above but left the code in case no one cares  -- as in, if noone's just that  one other loner who actually cares    */
  
  box-shadow: 24vw 9vh 1px 0px #0080FF,12vw -24vh 0px 1px #0080FF,-45vw -22vh 0px 0px #0080FF,-37vw -40vh 0px 1px #0080FF,29vw 19vh 0px 1px #0080FF,4vw -8vh 0px 1px #0080FF,-5vw 21vh 1px 1px #0080FF,-27vw 26vh 1px 1px #0080FF,-47vw -3vh 1px 1px #0080FF,-28vw -30vh 0px 1px #0080FF,-43vw -27vh 0px 1px #0080FF,4vw 22vh 1px 1px #0080FF,36vw 23vh 0px 0px #0080FF,-21vw 24vh 1px 1px #0080FF,-16vw 2vh 1px 0px #0080FF,-16vw -6vh 0px 0px #0080FF,5vw 26vh 0px 0px #0080FF,-34vw 41vh 0px 0px #0080FF,1vw 42vh 1px 1px #0080FF,11vw -13vh 1px 1px #0080FF,48vw -8vh 1px 0px #0080FF,22vw -15vh 0px 0px #0080FF,45vw 49vh 0px 0px #0080FF,43vw -27vh 1px 1px #0080FF,20vw -2vh 0px 0px #0080FF,8vw 22vh 0px 1px #0080FF,39vw 48vh 1px 1px #0080FF,-21vw -11vh 0px 1px #0080FF,-40vw 45vh 0px 1px #0080FF,11vw -30vh 1px 0px #0080FF,26vw 30vh 1px 0px #0080FF,45vw -29vh 0px 1px #0080FF,-2vw 18vh 0px 0px #0080FF,-29vw -45vh 1px 0px #0080FF,-7vw -27vh 1px 1px #0080FF,42vw 24vh 0px 0px #0080FF,45vw -48vh 1px 0px #0080FF,-36vw -18vh 0px 0px #0080FF,-44vw 13vh 0px 1px #0080FF,36vw 16vh 0px 1px #0080FF,40vw 24vh 0px 0px #0080FF,18vw 11vh 0px 0px #0080FF,-15vw -23vh 1px 0px #0080FF,-24vw 48vh 0px 1px #0080FF,27vw -45vh 1px 0px #0080FF,-2vw -24vh 0px 1px #0080FF,-15vw -28vh 0px 0px #0080FF,-43vw 13vh 1px 0px #0080FF,7vw 27vh 1px 0px #0080FF,47vw 5vh 0px 0px #0080FF,-45vw 15vh 1px 1px #0080FF,-5vw -28vh 0px 1px #0080FF,38vw 25vh 1px 1px #0080FF,-39vw -1vh 1px 0px #0080FF,5vw 0vh 1px 0px #0080FF,49vw 13vh 0px 0px #0080FF,48vw 10vh 0px 1px #0080FF,19vw -28vh 0px 0px #0080FF,4vw 7vh 0px 0px #0080FF,21vw 21vh 1px 1px #0080FF,-15vw -15vh 0px 1px #0080FF,-6vw -42vh 1px 0px #0080FF,-15vw 48vh 1px 1px #0080FF,-23vw 25vh 1px 1px #0080FF,-48vw 25vh 0px 1px #0080FF,-31vw -19vh 0px 1px #0080FF,4vw 37vh 1px 1px #0080FF,-43vw 28vh 0px 0px #0080FF,3vw -25vh 0px 1px #0080FF,-39vw 14vh 0px 1px #0080FF,-40vw 31vh 0px 1px #0080FF,35vw -36vh 1px 1px #0080FF,16vw 49vh 0px 0px #0080FF,6vw 39vh 0px 0px #0080FF,3vw -35vh 0px 1px #0080FF,-44vw -2vh 1px 0px #0080FF,-6vw 21vh 1px 0px #0080FF,48vw 9vh 1px 1px #0080FF,-43vw 30vh 1px 1px #0080FF,29vw -12vh 1px 1px #0080FF,-48vw 13vh 1px 0px #0080FF,-42vw 32vh 1px 1px #0080FF,34vw 15vh 1px 1px #0080FF,29vw -37vh 1px 1px #0080FF,28vw 2vh 0px 0px #0080FF;
  animation: zoom 16s alternate infinite;
  
  z-index: -1;
}

@keyframes zoom {
    0%{
        transform: scale(1);
        rotate: 0deg;
        filter: blur(5px);
    }
    100%{
        transform: scale(1.5);
        rotate: 20deg;
        filter: blur(0px);
    }
}

body .conteneur {
    padding: 1%;
    display: flex;
    flex-direction: row;
    /*grid-template-columns: auto auto auto;*/
    /*grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;*/
    flex-wrap: nowrap;
    scroll-snap-align: end;
    width: 100%;
    height: 25em;
    box-sizing: border-box;
    scroll-snap-stop:inherit;
    align-items: start;
    justify-content: center;
    justify-self: end;

}

body .conteneur .devant {
    height: 100%;
    background-color: #a7d4ff25;
    backdrop-filter: blur(20px);
    border: 12px solid;
    border-color: #FFFFFF60;
    border-radius: 2em;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    text-wrap: wrap;
    padding: 1em;
    box-sizing: border-box;
    min-width: fit-content;
    flex: 1;
    box-shadow: 0px 0px 0px 1px #c5d9eb;
    /*box-shadow: 0px 0px 100px #00000020;*/
    /*box-shadow: #22619740 20px 20px 5px 0px;*/
}

body .conteneur .derrière {
    height: 100%;
    background-color: #a7d4ff3c;
    backdrop-filter: blur(20px);
    border: 12px solid;
    border-color: #FFFFFF60;
    border-radius: 2em;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-wrap: wrap;
    padding: 1em;
    box-sizing: border-box;
    min-width: fit-content;
    flex: 1;
    box-shadow: 0px 0px 0px 1px #00000020;
    transform: rotateY(180deg);
    /*box-shadow: 0px 0px 100px #00000020;*/
    box-shadow: #22619740 40px 40px 10px 0px;
}

@media only screen and (width: 1920px) {.b{position: absolute; align-self: center; justify-self: center; display: flex; flex-direction: column; width: 100%;}  .carte {background-color: transparent; min-width: fit-content; width: auto; perspective: 1000px; height: auto; box-sizing: border-box;}}

@media only screen and (max-width: 750px) {.b{position: absolute; align-self: center; justify-self: top; display: flex; flex-direction: column; width: 100%; margin-top: 1em;} .carte {background-color: transparent; margin-right: -6em ; margin-left: -6em ; min-width: fit-content; width: auto; perspective: 1000px; height: auto; box-sizing: border-box;}
.Interoeuvre {display: none;}
}



/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.carte {
    background-color: transparent;
    min-width: fit-content;
    width: auto;
    perspective: 1000px;
    height: auto;
    box-sizing: border-box;
    /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.intérieur {
    /*position: relative;*/
    width: auto;
    height: 25em;
    width: 15em;
    text-align: center;
    transition: all 0.8s;
    transform-style: preserve-3d;
    transition-delay: 100ms;


    flex: 0 1 0;
    margin-top: 90%;
    transform: rotateY(0deg);
}

.middle{
    margin-top: 85%; 
}

.carte:hover .middle{
    margin-top: 0%; 
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.carte:hover .intérieur {
    transform: rotateY(180deg);
    margin-top: 0%;
    transition: all 0.8s;
    transition-timing-function: cubic-bezier(.28,1.56,.5,1);

}

/* Position the front and back side */
.devant, .derrière {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;

}

h1 {
    color: #000;
    align-self: center;
    font-weight: bolder;
    margin: 0.5em;
}

h2 {
    color: #000000EE;
    align-self: center;
    font-weight: bold;
}

h3 {
    color: #000000CC;
    align-self: center;
    font-weight: normal;
    text-wrap: wrap;
}

img {
    height: 4em;
}

img:hover {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.5s;

    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

.PFP {
    height: 8em;
    width: 8em;
    border-radius: 4em;
    align-self: center;
    background-image: url(Hello/are/you/sure/to\ want\ to\ see\ my\ face/here\ you\ go.png);
    filter: brightness(115%);
    background-size: cover;
    background-position: center;
}

.banner {
    background-image: url(theultimatebg3comp.png);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    transition-duration: 1s;

    display: flex;
    justify-content: center;
    align-content: bottom;
    flex-direction: column;

    box-sizing: border-box;
    width: 100%;
    
    margin-bottom: 4.5em;
}

.footer {
    background: none ;

    border-top: #00000020 solid 1px;
    display: flex;
    justify-content: space-between;
    align-content: bottom;
    flex-direction: row;

    box-sizing: border-box;
    width: 100%;
    padding: 0em 2em 0em 2em;
    
    margin-top: 4.5em;
}

.bouton {
    border: 1px;
    border-color: #0080FF80;
    border-style: solid;
    background-color: #0080FF40;
    /*background: linear-gradient(90deg, rgba(128, 255, 128, 0.20) 0%, rgba(128, 255, 128, 0.00) 22.92%, rgba(128, 255, 128, 0.00) 81.14%, rgba(128, 255, 128, 0.20) 100%), radial-gradient(154.39% 59.6% at -11.11% 49.06%, #B4FFB4 0%, rgba(128, 255, 128, 0.00) 15.57%, rgba(128, 255, 128, 0.00) 100%), radial-gradient(159.62% 61.62% at 110.61% 49.06%, #B4FFB4 1.19%, rgba(128, 255, 128, 0.00) 15.57%, rgba(128, 255, 128, 0.00) 100%), rgba(128, 255, 128, 0.50);*/
    color: #0066e3;
    width: 60%;
    padding: 20px;
    gap: 10px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    border-radius: 1em;
    align-self: center;
    font-family: 'source sans pro';
    font-weight: 600;
    text-decoration: none;
    transition-duration: 300ms;
}

.bouton:hover {
    border-color: #0080FF40;
    background-color: #0080FF;
    /*background: linear-gradient(90deg, rgba(0, 161, 0, 0.40) 0%, rgba(128, 255, 128, 0.00) 22.92%, rgba(128, 255, 128, 0.00) 81.14%, rgba(0, 162, 0, 0.40) 100%), radial-gradient(154.39% 59.6% at -11.11% 49.06%, rgba(128, 255, 128, 0.00) 15.57%, #B4FFB4 94.2%, rgba(128, 255, 128, 0.00) 100%), radial-gradient(157.01% 60.61% at 110.61% 49.06%, #80FF80 15.57%, #B4FFB4 97.05%, #80FF80 100%), #80FF80;*/
    color: #808082E8;
    box-shadow: #0080FF;
    font-weight: 700;
    font-size: large;
    text-transform:uppercase;
    transition: ease-out;
    transition-duration: 300ms;
    box-shadow: 0px 0px 100px #0080FF;
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.5s;

    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
}

.button {
    border: 1px;
    border-color: #80ff8080;
    border-style: solid;
    background-color: #80ff8040;
    /*background: linear-gradient(90deg, rgba(128, 255, 128, 0.20) 0%, rgba(128, 255, 128, 0.00) 22.92%, rgba(128, 255, 128, 0.00) 81.14%, rgba(128, 255, 128, 0.20) 100%), radial-gradient(154.39% 59.6% at -11.11% 49.06%, #B4FFB4 0%, rgba(128, 255, 128, 0.00) 15.57%, rgba(128, 255, 128, 0.00) 100%), radial-gradient(159.62% 61.62% at 110.61% 49.06%, #B4FFB4 1.19%, rgba(128, 255, 128, 0.00) 15.57%, rgba(128, 255, 128, 0.00) 100%), rgba(128, 255, 128, 0.50);*/
    color: #206020;
    width: 60%;
    padding: 20px;
    gap: 10px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    border-radius: 1em;
    align-self: center;
    font-family: 'source sans pro';
    font-weight: 600;
    text-decoration: none;
    transition-duration: 300ms;
}

.button:hover {
    border-color: #80ff8040;
    background-color: #80ff80;
    /*background: linear-gradient(90deg, rgba(0, 161, 0, 0.40) 0%, rgba(128, 255, 128, 0.00) 22.92%, rgba(128, 255, 128, 0.00) 81.14%, rgba(0, 162, 0, 0.40) 100%), radial-gradient(154.39% 59.6% at -11.11% 49.06%, rgba(128, 255, 128, 0.00) 15.57%, #B4FFB4 94.2%, rgba(128, 255, 128, 0.00) 100%), radial-gradient(157.01% 60.61% at 110.61% 49.06%, #80FF80 15.57%, #B4FFB4 97.05%, #80FF80 100%), #80FF80;*/
    color: #00000080;
    box-shadow: #80ff80;
    font-weight: 700;
    transition: ease-out;
    transition-duration: 300ms;
    box-shadow: 0px 0px 100px #80ff80;
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.5s;

    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
}

.svg {
    filter: invert(0%) sepia(100%) saturate(7475%) hue-rotate(188deg) brightness(0%) contrast(93%);
    opacity: 50%;
    transition-duration: 300ms;
}


a {
    background-color: #FFFFFF80;
    padding: 0.5em;
    border-radius: 0.4em;
    color: #000000;
    font-family: 'Bricolage Grotesque';
    font-weight: semibold;
    text-decoration: none;
    padding-right: 1.5em;
    background-image: url(Frame\ 2.png);
    background-position: right;
    background-size: 15%;
    background-repeat: no-repeat;
    text-align: start;
    transition-duration: 400ms;
    transition-timing-function: cubic-bezier(.28,1.6,.5,1);
    /*mix-blend-mode: overlay;*/
}

a:hover {
    background-color: #000000d0;
    color: #ffffff;
    letter-spacing: 0.3em;
    transition-duration: 400ms;
    transition-timing-function: cubic-bezier(.28,1.6,.5,1);
    background-image: url(Frame\ 2a.png);
    font-style: italic;
    font-weight: bold;
    text-transform: uppercase;
    /*mix-blend-mode: overlay;*/
}

.a-group {
    gap: 0.2em;
    border-radius: 0.8em;
    display: flex;
    padding: 0%;
    margin: 0%;
    flex-direction: column;
    flex: 1 1 1;
    height: fit-content;
    width: 100%;
    overflow: hidden;
}

.container {
    height: fit-content;
    width: 100%;
    box-sizing: border-box;

    overflow: visible;
    display: flex;
    justify-content: start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1em;
    align-content: flex-start;
    flex: 1 1 1;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(.28,1.56,.5,1);

    perspective: 10cm;
    
}
/*linear-gradient(140deg, rgba(255,249,169,1) 0%, rgba(202,164,225,1) 30%, rgba(122,242,255,1) 60%, rgba(239,255,214,1) 100%)*/
@media screen {max-width} {
    --value : max-width
}

:root {
    --value : ;
    --valua : calc(var(value)/4);
}

.Oeuvre {

    height: 15em;
    background-color: #f4f4f4 ;
    border: 1px solid;
    border-color: #00000020;
    border-radius: 1.5em;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    text-wrap: wrap;
    padding: 1em;
    box-sizing: border-box;
    flex: 1 0 0;
    min-width: 16em;
    box-shadow: #22619740 0px 5px 10px 0px;
    gap: 0.5em;
    transform-origin: top;
    transform: rotateX(0deg) rotateY(0deg);
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(.28,1.8,.5,1);
    transition-delay: 00ms;
}

.Pile {
    height: 15em;
    background-color: #f4f4f4 ;
    border: 1px solid;
    border-color: #00000020;
    border-radius: 1.5em;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    text-wrap: wrap;
    padding: 1em;
    box-sizing: border-box;
    flex: 1 0 0;
    min-width: 16em;
    box-shadow: #22619740 0px 5px 10px 0px;
    gap: 0.5em;
    transform-origin: top;
    transform: rotateX(0deg) rotateY(0deg);
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(.28,1.8,.5,1);
    transition-delay: 00ms;
}

.Empilement {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column-reverse;
    flex: 1 0 0;
    height: 1em;
    gap: 0em;
    width: max-content;
    box-sizing: border-box;
    align-self: center;
}

.PieceTop {
    margin: -12em 0em 0em 0em;
    height: 14em;
    width: 9em;
    border-radius: 1em;
    background-image: url(thumbnails/Group\ 1.png);
    background-position: center;
    background-size: cover;
    border: 1px solid;
    border-color: #00000020;
    transform-origin: bottom;
    transform: rotateZ(-5deg);
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(.28,1.8,.5,1);
    transition-delay: 00ms;
    z-index: 1;
    box-shadow: #00000080 0px 0px 0em 0em;
}

.Pile:hover .PieceTop:active {
    position: absolute;
    place-self: center;
    height: 30rem;
    width: 23.5rem;
    transform: rotateZ(0deg);
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(.28,1.8,.5,1);
    transition-delay: 00ms;
    z-index: 3;
    align-self: center;
    justify-self: center;
    transform-style: preserve-3d;
    animation: change;
    animation-iteration-count: 1;
    animation-duration: 200ms;
    box-shadow: #00000080 0px 0px 10em 0em;
}

@keyframes change {
    0% {filter: blur(0em);}
    20% {filter: blur(2em);}
    100% {filter: blur(0em);}
}

.PieceBottom {
    margin: 0em;
    height: 14em;
    width: 9em;
    border-radius: 1em;
    background-color: #7da87d;
    background-size: cover;
    border: 1px solid;
    border-color: #00000020;
    transform-origin: bottom;
    transform: rotateZ(5deg);
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(.28,1.8,.5,1);
    transition-delay: 00ms;
}

.Pile:hover .PieceTop {
    transform: rotateZ(-15deg);
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(.28,1.8,.5,1);
    transition-delay: 00ms;
}

.Pile:hover .PieceBottom {
    transform: rotateZ(15deg);
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(.28,1.8,.5,1);
    transition-delay: 00ms;
}


.Oeuvre:hover {
    transform: rotateX(0deg) rotateY(0deg) translateZ(0.5em);
    transition-delay: 00ms;
    
    z-index: 2;
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(.28,1.8,.5,1);
    
}

.Pile:hover {
    transform: rotateX(0deg) rotateY(0deg) translateZ(0.5em);
    transition-delay: 00ms;
    
    z-index: 2;
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(.28,1.8,.5,1);
    
}

.Oeuvre:hover .image {
    background-position: center;
    transition-duration: 500ms;
}
 
.Oeuvre h2 {
    margin: 0px;
    padding: 0px;

}

.image {
    height: 10em;
    flex: 1 0 0;
    background-image: url(TheBackground1.png);
    background-size: cover;
    border-radius: 0.5em;
    background-position: top;
    transition-duration: 500ms;
}

.Oeuvre a {
    width: fit-content;
    background-image: none;
    background-position: right;
    background-size: 1.5em;
    background-attachment: ;
    background-color: #f4f4f4;
    border: #00000020 1px solid;
    padding-right: 0.5em;
    align-self: flex-end;
    text-decoration: none;
    border-radius: 0.6em;
}
.Pile a {
    width: fit-content;
    background-image: none;
    background-position: right;
    background-size: 1.5em;
    background-attachment: ;
    background-color: #f4f4f4;
    border: #00000020 1px solid;
    padding-right: 0.5em;
    align-self: flex-end;
    justify-self: flex-end;
    text-decoration: none;
    border-radius: 0.6em;
    z-index: 2;
    position: absolute;
    backdrop-filter: blur(5px);
}

.Oeuvre a:hover {

    font-style: italic;
    font-weight: bold;
    text-transform: none;
    letter-spacing: 0.1em;
    background-color: #000000cc;
    text-decoration: none;
}
.Pile a:hover {

    font-style: italic;
    font-weight: bold;
    text-transform: none;
    letter-spacing: 0.1em;
    background-color: #000000cc;
    text-decoration: none;
}

.Interoeuvre {

    height: 15em;
    background-image: url();
    display: flex;
    background-size: contain;
    background-repeat: no-repeat;
    filter: saturate(120%);
    background-position: center;
    box-sizing: border-box;
    flex: 1 0 0;
    min-width: 16em;
    padding: 1em;

}