body{
    margin: 0;
    padding: 0;
    overflow: hidden; /*Debug du padding "box_svg" */
}
#background{
    background-color: #eaf0f5 ;
    transition: background-color 4s; 
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0; 
    position: fixed;
}
#grid{
    width: 100vw;
    height: 100vh;
    background-image: url(grid2.svg);
    background-size: 20px 20px;
    margin: 0;
    padding: 0;
    position: fixed;
    opacity: 0.3;
}
.lines{
    width: 100vw;
    height:30vh;
    margin-left: 2.5vw;
    mix-blend-mode:difference;
    position: absolute;
}
#L1{
    position: relative;
    padding-top: 30px;
    height: 20vh; /*demo*/
}
#L2{
    margin-top: -8vh;
    margin-left: 0vw;
}

#L3{
    width: 50%;
    height: 50%;
    margin-top: 25vh;
    position: absolute; 
}
.box_case{
    height: 100%;
    display: inline-block;
    margin-left: 1vw;
}
.case_1{
    width: 21.6vw;
}
.case_2{
    width: 29.5vw;
}
.case_3{
}
.box_svg_1{
    width: 70%;
    height: 70%;
    padding: 15%; /* Sinon coup les bords du svg. + Ajoute un overflow quand resize en grand...*/
	overflow: visible; /* Mieux ? */
}

.box_svg{
    width: 90%;
    height: 90%;
    padding: 5%; /* Ajoute un overflow quand resize en grand*/
}
.box_quart_circle{
    width: 30%;
    height: 30%;
    margin-top: 20vh;
    position: fixed;
    mix-blend-mode:difference;

}
#quart_circle_style{
    fill:transparent;
    stroke:#8b103e;
    stroke-width:17;

}
.box_drawing{
    position: absolute;
    margin-top: -25vh;
    margin-left: -10vw;
    width: 150vw;
    height: 200vh;
    position: fixed;
    mix-blend-mode:exclusion;
}
#drawing_style{
    fill:transparent;
    stroke:#38e326;
    stroke-width:88;
    vector-effect: non-scaling-stroke;

}
.stroke {
    fill: transparent;
    stroke-linecap: round;
    stroke-width: 3vw;
    stroke:yellow;
}
#box_mag_svg {
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 9;
}
#box_mag {
    width: 50vw;
    height: 16vh;
    margin-top: 37vh;
}
.mag_svg {
    fill:none;
    stroke:#38e326;
    stroke-width:0.4vw;
    stroke-linecap: round;
    stroke-linejoin:round;
    vector-effect: non-scaling-stroke;
    mix-blend-mode:difference;

}
#box_website_svg {
    width: 100vw;
    bottom: 0;
    position: absolute;
    z-index: 9;
}
#box_website {
    width: 100vw;
    height: 16vh;
}
.website_svg {
    fill:none;
    stroke:yellow;
    stroke-width:0.4vw;
    stroke-linecap: round;
    stroke-linejoin:round;
    vector-effect: non-scaling-stroke;
    mix-blend-mode:difference;
}
.stroke_trace {
    fill: transparent;
    stroke-linecap: round;
    stroke-width: 70px;
    vector-effect: non-scaling-stroke;
}
#donuts {
    top:30vh;
    transform: translateY(-0%);
    transform: translateY(-0%);
    margin-left:30vw;
    position:absolute;
    mix-blend-mode:exclusion;

}

@media (max-aspect-ratio: 20/8) {
    #box_mag {
        margin-top: 30vh;
    }
    .stroke {
        stroke-width: 4.4vw;
    }
    
}
@media (max-aspect-ratio: 20/13) {
    #box_mag {
        margin-top: 23vh;
    }
    .stroke {
        stroke-width: 4.4vw;
    }

}
@media (max-aspect-ratio: 17/20) {
    #box_mag {
        margin-top: 19vh;
    }
    .stroke {
        stroke-width: 6vw;
    }
    
}