html{
    scroll-behavior: smooth;
}


body{
    margin: 0%;
    padding-left: 15vw;
    padding-right: 15vw;
    padding-top: 15svh;
    font-size: 12px;
    font-family: Roboto;
    font-weight: 300;
    font-feature-settings: "ss03" 1;
}

header{
    position: static;
    width: 100%;
    color: black;
}




a{
    color: black;
    text-decoration: none;
}

ins{
    text-decoration: none;
}

.hidden{
  display: none;
  color: rgba(255, 255, 255, 0);
  transition: color 1s;
}





.description{
    width: 25%;
    text-align: justify;
}

.mail{
    text-decoration: underline;
    transition: color 0.5s;
}


.space {
    height: 30px;
}




.descriptionprojet{
    position: static;
    color: rgb(84, 84, 84);
}



.caroussel{
    width: 34vw;
    max-width: 400px;
    max-height: 70svh;
    object-fit: cover;
    right: 15vw;
    top: 15svh;
    position: fixed;
    animation-duration: 2s;
    animation-name: slide-in;
    animation-timing-function:cubic-bezier(0.15, 0.22, 0.35, 1);
}

.carousselbig{
    width: 80vw;
    height: 80svh;
    object-fit: contain;
    right: 10vw;
    top: 10svh;
    position: fixed;
    animation-duration: 2s;
    animation-name: slide-in;
    animation-timing-function:cubic-bezier(0.15, 0.22, 0.35, 1);
}



.creditphoto{

    top: 85svh;
    margin-top: 10px;
    right: calc(15vw + 400px);
    transform: translateX(100%);
    position: fixed;
    color: grey;
    font-size: 10px;
    cursor: pointer;
}

.plusmoins{

    top: 85vh;
    margin-top: 10px;
    right: calc(15vw);
    position: fixed;
    color: grey;
    font-size: 10px;
}

.detail{
    text-decoration: underline;
    text-decoration-color: rgb(205, 205, 205);
    cursor: pointer;
}




.left{
    width: 150px;
    right: calc(15vw + 250px);
    height: 70svh;
    top: 15svh;
    position: fixed;
    cursor: pointer;
    transition: color 0.5s;
    color: rgba(255, 255, 255, 0);
    user-select: none;
    font-family: Interlight;
}

.right{
    width: 150px;
    right: 15vw;
    height: 70svh;
    top: 15svh;
    position: fixed;
    cursor: pointer;
    text-align: right;
    color: rgba(255, 255, 255, 0);
    transition: color 0.5s;
    user-select: none;
    font-family: Interlight;
}

.leftbig{
    width: 40vw;
    right: 50vw;
    height: 80svh;
    top: 10svh;
    position: fixed;
    cursor: pointer;
    transition: color 0.5s;
    color: rgba(255, 255, 255, 0);
    user-select: none;
    font-family: Interlight;
}

.rightbig{
    width: 40vw;
    right: 10vw;
    height: 80svh;
    top: 10svh;
    position: fixed;
    cursor: pointer;
    text-align: right;
    color: rgba(255, 255, 255, 0);
    transition: color 0.5s;
    user-select: none;
    font-family: Interlight;
}






.zoom{
    width: 100px;
    right: calc(15vw + 150px);
    height: 70svh;
    top: 15svh;
    position: fixed;
    cursor: zoom-in;
}

.unzoom{
    width: 100vw;
    height: 100vh;
    left: 0%;
    top: 0%;
    background-color: rgba(255, 255, 255, 0.851);
    position: fixed;
    cursor: zoom-out;
    transition: color 0.5s;
    backdrop-filter: blur(0.5px);
    font-size: 14px;
    font-family: Interlight;
}







@media screen and (min-width: 2000px) {

    body{
    margin: 0%;
    padding-left: 20vw;
    padding-right: 20vw;
    font-size: 13px;
}

.caroussel{
    width: 20vw;
    max-height: 70vh;
    max-width: unset;
    object-fit: cover;
    right: 20vw;
    top: 15vh;
    position: fixed;
    animation-duration: 2s;
    animation-name: slide-in;
    animation-timing-function:cubic-bezier(0.15, 0.22, 0.35, 1);
}

.description{
    width: 25%;
    text-align: left;
}

.left{
    width: 8vw;
    right: calc(20vw + 12vw);
    height: 70vh;
    top: 15vh;
    position: fixed;
    cursor: pointer;
}

    .right{
    width: 8vw;
    right: 20vw;
    height: 70vh;
    top: 15vh;
    position: fixed;
    cursor: pointer;
}

.zoom{
    width: 4vw;
    right: calc(20vw + 8vw);
    height: 80vh;
    top: 15vh;
    position: fixed;
    cursor: zoom-in;
}

.creditphoto{

    top: 85vh;
    margin-top: 10px;
    right: calc(20vw + 20vw);
    transform: translateX(100%);
    position: fixed;
    color: grey;

}

}

@media screen and (max-width: 1180px) {

.left{
    width: 15vw;
    right: calc(15vw + 19vw);
    height: 70svh;
    top: 15svh;
    position: fixed;
    cursor: pointer;
}

    .right{
    width: 15vw;
    right: 15vw;
    height: 70svh;
    top: 15svh;
    position: fixed;
    cursor: pointer;
}

.zoom{
    width: 4vw;
    right: calc(15vw + 15vw);
    height: 70svh;
    top: 15svh;
    position: fixed;
    cursor: zoom-in;
}

.creditphoto{

    top: 85vh;
    margin-top: 10px;
    right: calc(15vw + 34vw);
    transform: translateX(100%);
    position: fixed;
    color: grey;

}

}

@media screen and (max-width: 800px) {
    body{
    padding-left: 5vw;
    padding-right: 5vw;
    padding-top: 5vw;
}


.caroussel{
    width: 300px;
    max-height: 80vh;
    right: 5vw;
    top: auto;
    bottom: 5vw;
    object-fit: cover;
    cursor: pointer;
    position: fixed;
}
.carousselright{
    width: 300px;
    max-height: 80vh;
    object-fit: cover;
    right: calc(5vw - 300px);
    top: auto;
    bottom: 5vw;
    position: fixed;
    animation-duration: 0.5s;
    animation-name: slide-out;
    animation-timing-function:cubic-bezier(0.15, 0.22, 0.35, 1);
}
.carousselin{
    width: 300px;
    max-height: 80vh;
    object-fit: cover;
    right: calc(5vw);
    top: auto;
    bottom: 5vw;
    position: fixed;
    animation-duration: 0.5s;
    animation-name: return;
    animation-timing-function:cubic-bezier(0.15, 0.22, 0.35, 1);
}

.left{
    width: 100px;
    right: calc(5vw + 200px);
    height: 80vh;
    top: auto;
    bottom: 5vw;
    position: fixed;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0);
    user-select: none;
    vertical-align: bottom;
}
.right{
    width: 100px;
    right: 5vw;
    height: 80vh;
    top: auto;
    bottom: 5vw;
    position: fixed;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0);
    vertical-align: bottom;
    
}

.zoom{
    width: 100px;
    right: calc(5vw + 100px);
    height: 80vh;
    top: 15vh;
    position: fixed;
    cursor: zoom-in;
}

@media (hover: hover) {
.right:hover{
    color: rgb(0, 0, 0);
}

.left:hover{
    color: rgb(0, 0, 0);
}
 }



.creditphoto{

    top: auto;
    bottom: 5vw;
    margin-top: 5px;
    right: auto;
    transform: translateX(0%);
    position: fixed;
}

.description{
    width: 40vw;
    text-align: justify;
    z-index: 100;
}

footer{
   position: fixed;
    top: calc(5vw + 150px);
}
}







@media screen and (max-width: 600px) {

      body{
    padding-left: 10vw;
    padding-right: 10vw;
    padding-top: 10vw;
}

.space {
    height: 15px;
}

.description{
    width: 80vw;
    text-align: justify;
    z-index: 100;
}


.descriptionprojet{
    margin-top: calc(100svh - 10vw - 120px);
    position: absolute;
    height: calc(170px + 5vw);
}

.caroussel{
    width: 65vw;
    height: 60svh;
    left: 17.5vw;
    right: auto;  
    bottom: 10svh;
    object-fit: contain;
    cursor: pointer;
    position: absolute;
}




.left{
    width: 50vw;
    right: 50vw;
    height: 60svh;
    bottom: 10svh;
    top: auto;
    position: absolute;
    cursor: pointer;
}

.right{
    width: 50vw;
    right: 0vw;
    height: 60svh;
    bottom: 10svh;
    top: auto;
    position: absolute;
    cursor: pointer;
}




.zoom{
  display: none;
}



.creditphoto{

    top: auto;
    bottom: 5vw;
    margin-top: 5px;
    left: 10vw;
    transform: translateX(0%);
    position: absolute;
}


}

@media (hover: hover) {
 :hover.mail{
    color: grey;
}
.right:hover{
    color: rgb(255, 255, 255);
}

.left:hover{
    color: rgb(255, 255, 255);
}

.rightbig:hover{
    color: rgb(0, 0, 0);
}

.leftbig:hover{
    color: rgb(0, 0, 0);
}

}

.copyright{
    
    position: fixed;
    bottom: 0vw;
    left: 0%;
    font-size: xx-small;
}


@keyframes slide-in {
   0%   {
    translate: 100vw 0;
  }

 100% {
    translate: 0 0;
  }
}
@keyframes slide-out {
   0%   {
    translate: -400px 0;
  }

 100% {
    translate: 0 0;
  }
}
@keyframes return {
   0%   {
    translate: 400px 0;
  }

 100% {
    translate: 0 0;
  }
}


@font-face {
  font-family: Inter;
  src: url(Fonts/InterDisplay-Regular.woff2);
}

@font-face {
  font-family: Intermed;
  src: url(Fonts/InterDisplay-Medium.woff2);
}

@font-face {
  font-family: Interlight;
  src: url(Fonts/InterDisplay-Light.woff2);
}

@font-face {
  font-family: Roboto;
  src: url(Fonts/Roboto-VariableFont_wdth\,wght.ttf);
}