* {
    box-sizing: border-box;
}
body {
    background: rgb(0, 0, 0);
    /* background-image: url(/images/aplat_250_rapide.gif); */
    /* background-repeat: repeat; */
    /* background: -moz-radial-gradient(circle, rgba(48,255,0,1) 0%, rgba(0,255,255,1) 33%, rgba(255,229,0,1) 67%, rgba(255,0,254,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(48,255,0,1) 0%, rgba(0,255,255,1) 33%, rgba(255,229,0,1) 67%, rgba(255,0,254,1) 100%);
    background: radial-gradient(circle, rgba(48,255,0,1) 0%, rgba(0,255,255,1) 33%, rgba(255,229,0,1) 67%, rgba(255,0,254,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#30ff00",endColorstr="#ff00fe",GradientType=1); */
    font-family: 'Roboto', sans-serif;
    margin: 0px;
    padding: 0px;	
    width: 100%;
    height: 800px;
    margin: 0px;
    overflow: hidden;
}

div.gallery{
    display: grid;  
    background-color: rgba(255, 255, 255, 0.50);
    width: auto;
    margin: 0px;
    filter: invert(0) blur(0px) grayscale(0%);
} 
div.gallery > ul{
    --e-s: 100px;
    /* grid-template-columns: repeat(8,1fr); */
    grid-template-columns: var(--e-s) var(--e-s) var(--e-s) var(--e-s) var(--e-s) var(--e-s) var(--e-s) var(--e-s) var(--e-s) var(--e-s) var(--e-s) var(--e-s) var(--e-s) var(--e-s) var(--e-s) var(--e-s) var(--e-s) var(--e-s) var(--e-s)  var(--e-s) var(--e-s);
    grid-template-rows: var(--e-s) var(--e-s) var(--e-s) var(--e-s) var(--e-s) var(--e-s) var(--e-s) var(--e-s) var(--e-s) var(--e-s) var(--e-s) var(--e-s) var(--e-s);
    grid-auto-rows: auto;
    display: grid;
    flex-wrap: wrap;
    flex-direction: row;
/*     justify-items: left;
    align-items: start; */
    background: rgba(255, 255, 255, 0);
    margin: 0px;
    padding: 0px;
}
div.gallery > ul > li{
    display: grid;
    /* background-image: url(/images/aplat_250_rapide.gif);
    background-repeat: no-repeat; */
    width: 100px;
    height: 100px;
    margin: -120px;
    filter: blur(0px);
    transform: rotate(0deg) scale(100%);
    background-color: rgba(255, 255, 255, 0.0);
    opacity: 1;
}
div.gallery > ul > li > div#cube{
    display: grid;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
    margin: 0px;
    padding: 0px;
    opacity: 1;
}
div.gallery > ul > li > div#cube > svg{
    width: 220%;
    /* height: 200%; */
    background-color: rgba(255, 255, 255, 0);
    margin: 0px;
    padding: 0px;
    cursor: cursor;  /* -crosshair- */

}

div.gallery > ul > li > div#cube > svg:active{
    filter: drop-shadow(25px 25px 25px rgba(255, 255, 255, 0)) contrast(100%) hue-rotate(270deg) invert(0) blur(0px);
    background-color: rgba(255, 255, 255, 0);
    transform: rotate(90deg) scale(100%);
    transition-duration: 0s;
    transition-timing-function: ease-out;
}

.st0{
    /* transition: all 2s ease-out; */
    stroke-width: 0px;
    stroke-linecap: round;      /*  (butt / round / square) */
    stroke-linejoin: round;   /*  (miter / round / bevel) */
    stroke-miterlimit: 100;
    transform: scale(100%) rotate(0deg) translate(0px, 0px);
}

.st1,
.st2,
.st3,
.st4,
.st5,
.st6,
.st8,
.st9,
.st10,
.st11,
.st12,
.st13{
    transition: color 2s ease-out;
    transform: scale(100%) rotate(0deg) translate(0px, 0px);
}

:root{
    --st0: opacity:0.5;
    --st1: #FF00FF;
    --st2: #FF0000;
    --st3: #0000FF;
    --st4: #00FF00;
    --st5: #00FFFF;
    --st6: #FFFF00;
    --st7: opacity: 0.5;
    --st8: #383838;
    --st9: #606060;
    --st10: #848484;
    --st11: #CCCCCC;
    --st12: #A8A8A8;
    --st13: #E8E8E8;
}

.st0{
    opacity:0.5;
    fill: var(--st0);
}
.st1{
    fill: var(--st1);
    stroke: var(--st13);
    /* stroke:#383838; */
}
.st2{
    fill: var(--st2);
    stroke: var(--st12);
    /* stroke:#606060; */
}
.st3{
    fill: var(--st3);
    stroke: var(--st11);
    /* stroke:#848484; */
}
.st4{
    fill: var(--st4);
    stroke: var(--st10);
    /* stroke:#CCCCCC; */
}
.st5{
    fill: var(--st5);
    stroke: var(--st9);
    /* stroke:#A8A8A8; */
}
.st6{
    fill: var(--st6);
    stroke: var(--st8);
    /* stroke:#E8E8E8; */
}
.st7{
    fill: var(--st7);
    opacity:0.5;
}
.st8{
    fill: var(--st8);
    stroke: var(--st6);
    /* stroke:#FF00FF; */
}
.st9{
    fill: var(--st9);
    stroke: var(--st5);
    /* stroke:#FF0000; */
}
.st10{
    fill: var(--st10);
    stroke: var(--st4);
    /* stroke:#0000FF; */
}
.st11{
    fill: var(--st11);
    stroke: var(--st3);
    /* stroke:#00FF00; */
}
.st12{
    fill: var(--st12);
    stroke: var(--st2);
    /* stroke:#00FFFF; */
}
.st13{
    fill: var(--st13);
    stroke: var(--st1);
    /* stroke:#FFFF00; */
}

div#content{
    position: absolute;
    /* z-index: 1; */
}

div#elementH{
    display: block;
    /* z-index: 2; */
    position: fixed;
    background-color: rgba(0, 0, 0, 0);
    width: 200px;
    height: 600px;
    border-color: rgb(255, 255, 255);
    border-style: solid;
    border-radius: 0px;
    border-width: 0px;
    margin: 0px;
    padding-top: 0px;

}
div#elementH > div{
    width: 250px;
    height: 400px;
}

div#txt{
    background-color: lawngreen;
    width: 300px;
    height: 200px;
    margin-top: 300px;
}

p {
    display: block;
    color: rgb(255, 255, 255);
    font-size: 13px;
    margin-block-start: 1px;
    margin-block-end: 1px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

h1 {
    display: block;
    color: rgb(255, 255, 255);
    font-size: 15px;
    margin: 0px;
    margin-block-start: 1px;
    margin-block-end: 1px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

/* ------------SLIDER--------------- */

/* .slidecontainer {
    width: 95%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #818181;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #818181;
    cursor: pointer;
} */

button {
    width: 160px;
    height: auto;
    appearance: auto;
    /* -webkit-writing-mode: horizontal-tb !important; */
    font-style: normal;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    text-rendering: auto;
    color: -internal-light-dark(black, white);
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: pointer;
    box-sizing: border-box;
    background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));
    margin-left: 0em;
    padding: 1px 6px;
    border-width: 2px;
    border-style: outset;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;
}
button#cellules {
    width: 160px;
    height: 25px;
    appearance: auto;
    /* -webkit-writing-mode: horizontal-tb !important; */
    font-style: normal;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    text-rendering: auto;
    color: -internal-light-dark(black, white);
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    box-sizing: border-box;
    background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));
    margin-left: 25px;
    margin-top: 425px;
    padding: 1px 6px;
    border-width: 2px;
    border-style: outset;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;
}