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

    
html, body, h1 ,h2 {
    padding: 0px;
    margin: 0px;

        
    width: 393px;
}
a{
    text-decoration: none;
}
h1{
    z-index: 3;
}


header{
    background: #CBCBCB;

    width: 393px;
    height: 870px;
    flex-shrink: 0;
}
header h1{
    color: #000;
    font-family: Inter;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;

    position: absolute;
    margin: 30px;
}
header img{
    width: 393px;
    height: 577px;
    flex-shrink: 0;
    
    background: #D9D9D9;
    box-shadow: 0 -50px 100px 0 rgba(0, 0, 0, 0.50) inset;
}

.title{
    width: 345px;
    flex-shrink: 0;

    color: #8074C3;
    font-family: Inter;
    font-size: 35px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    
    margin-top: 140px;
    margin-left: 30px;
}
/* BODY */

.title{
    width: 345px;
    height: 73px;
    flex-shrink: 0;

    color: #8074C3;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    
    margin-top: 200px;
    margin-left: 30px;
}
#un{
    width: 393px;
    height: 793px;
    flex-shrink: 0;

    background: linear-gradient(168deg, #613779 12.84%, #B2502A 53.03%, #3FC6A8 94.8%);
}
#deux{
    width: 393px;
    height: 485px;
    flex-shrink: 0;

    background: linear-gradient(168deg, #D1C39B 12.84%, #E3A772 39.24%, #F8E8D0 94.8%);
}
#trois{
    width: 393px;
    height: 486px;
    flex-shrink: 0;

    background: linear-gradient(168deg, #49B9E2 12.84%, #FFA907 44.36%, #767475 94.8%);
}
#quatre{
    width: 393px;
    height: 793px;
    flex-shrink: 0;

    background: linear-gradient(168deg, #85D756 12.84%, #EBF4E2 44.36%, #71A3A7 94.8%);
}
#cinq{
    width: 393px;
    height: 485px;
    flex-shrink: 0;

    background: linear-gradient(168deg, #2D2434 16.59%, #A28BB2 42.95%, #5D5B5F 86.65%);
}

#six{
    width: 393px;
    height: 793px;
    flex-shrink: 0;

    background: linear-gradient(168deg, #323724 12.84%, #885C80 63.28%, #201825 94.8%);
}
#sept{
    width: 393px;
    height: 793px;
    flex-shrink: 0;

    background: linear-gradient(168deg, #816344 16.59%, #853A20 42.95%, #5E4437 86.65%);
}
#huit{
    width: 393px;
    height: 485px;
    flex-shrink: 0;

    background: linear-gradient(168deg, #E9D397 16.59%, #E793BA 42.95%, #89554E 86.65%);
}
#neuf{
    width: 393px;
    height: 793px;
    flex-shrink: 0;

    background: linear-gradient(168deg, #F3F4F6 16.59%, #C0CED3 42.95%, #E2E6E9 86.65%);
}
#dix{
    width: 393px;
    height: 793px;
    flex-shrink: 0;

    background: linear-gradient(168deg, #913668 16.59%, #395858 42.95%, #608393 86.65%);
}
#onze{
    width: 393px;
    height: 486px;
    flex-shrink: 0;

    background: linear-gradient(168deg, #FFFFFF 16.59%, #CC9E86 42.95%, #D9D8D7 86.65%);
}
#douze{
    width: 393px;
    height: 486px;
    flex-shrink: 0;

    background: linear-gradient(168deg, #58383C 16.59%, #DACAB2 42.95%, #3D272A 86.65%);
}
#treize{
    width: 393px;
    height: 793px;
    flex-shrink: 0;

    background: linear-gradient(168deg, #413878 16.59%, #8F5D4D 42.95%, #3B4B30 86.65%);
}
#quatorze{
    width: 393px;
    height: 793px;
    flex-shrink: 0;

    background: linear-gradient(168deg, #10100F 16.59%, #592112 42.95%, #362C09 86.65%);
}
#quinze{
    width: 393px;
    height: 793px;
    flex-shrink: 0;

    background: linear-gradient(168deg, #72CD73 16.59%, #70495D 42.95%, #87AFD6 86.65%);
}


#gallery img{
    flex-shrink: 0;
    width: 320px;
    height: fit-content;
    /* fit content */

    margin: 35px;
    margin-top: 79px;

    background-color: white;
}
}