/* Reset */
html {box-sizing: border-box;}*,*::before,*::after {box-sizing: inherit;}body,h1,h2,h3,h4,h5,h6,ul,ol,li,p,pre,blockquote,figure,hr {margin: 0;padding: 0; font-size:100%; font-weight: normal;}ul {list-style: none;}input,textarea,select,button {color: inherit;font: inherit;letter-spacing: inherit;}input,textarea,button {border: 1px solid gray;}button {border-radius: 0;padding: 0.75em 1em;background-color: transparent;}button * {pointer-events: none;}embed,iframe,img,object,video {display: block;max-width: 100%;}table {table-layout: fixed;width: 100%;}[hidden] {display: none !important;}noscript {display: block;margin-bottom: 1em;margin-top: 1em;}
/* Buttons and input buttons */
[role="button"],input[type="submit"],input[type="reset"],input[type="button"],button { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;}
input[type="submit"], input[type="reset"], input[type="button"], button { background: none; border: 0; color: inherit; font: inherit; line-height: normal; overflow: visible; padding: 0; }
input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0;}
#c{font: clamp(12px, .8vw, 20px)/1.5em monospace; letter-spacing: 1px;}
a{color:black;}
#c.mute:after{content:""; position:absolute; width:100%; height:100vh; background:black; z-index: 200; opacity:.8;border:20vw solid black;}
/* Cascade */
:root{
  --gridSize:100px;
  --c0:white; /* No synth */
  --c1:black;
  --c2:tan;
  --c3:blue;
  --c4:cyan;
  --c5:gold;
  --c6:gray;
  --c7:lime;
  --c8:magenta;
  --c9:peru;
  --c10:pink;
  --c11:red;
  --c12:teal;
  --c13:khaki;
  --c14:olive;
  --c15:purple;
  --c16:silver;
}
.show-grid .c-grid{background-image: linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px); z-index: 200; pointer-events: none; opacity: .5; position: absolute; top:0; left:0;
  background-size: calc(var(--gridSize) + 1px) calc(var(--gridSize) + 1px); width:100vw; height:100vh;}
.start{position: absolute; top:0; left: 0; bottom:0; right:0; background: lightgray; width:100%; opacity: .8; z-index: 900; display: flex; justify-content: center; align-items: center; cursor: pointer;}
[data-instrument]{position: relative;}
[data-instrument]:hover{z-index:200;}
[data-instrument]:before{
  content: attr(id);
  /* background: white; */
  position: absolute;
  top:-1.2em; right:0;
  opacity: 0;
  height: 0;
}
.c{text-transform: uppercase;}
.scan [data-instrument]:before{opacity:1; width:auto; height:auto;}
.color-scale{display: none; position: absolute; bottom: 0; left:0;}
.c-timer{display: none; position: absolute; top: 0; right:0;}
.color-box, .c-timer{height:20px; padding:0 2px; text-shadow: 1px 1px 1px white}
.color-box:before{content: attr(data-name); text-shadow: 1px 1px 1px white}
.scan .color-scale, .scan .c-timer{display: flex;}
.cas{position: relative}

body{
      background-color: white;
      display: flex;
      align-items: center;
      height: 100vh;
      justify-content: center;
    }
    .el{
      cursor:pointer;
        
      position:absolute;
    }
    #c-0{
      background-color: peru;
    }
    #c-1{
      background-color: red;
    }

madiv {
  position: absolute;
  background: red;
  width: 10vw;
  height: 10vh;
  top: 10vh;
}

madiv1 {
  background-color: aqua(192, 25, 195);
  height: 10vh;
  width: 20vw;
  border-radius: 100%;
  top: 20em;
  left: 100em;
}
madiv2 {
  background-color: rgb(255, 244, 123);
  height: 50vh;
  width: 40vw;
  border-radius: 20%;
  top: 10em;
  left: 10em;
}
.madiv3 {
  background-color: rgb(255, 225, 255);
  height: 10vh;
  width: 30vw;
  border-radius: 50%;
  top: 5em;
  left: 5em;
  border-width: 10vh;
}
.madiv2 {
  background-color: rgb(255, 244, 123);
  height: 50vh;
  width: 40vw;
  border-radius: 20%;
  top: 10em;
  left: 10em;
}
.orbite {
  position: absolute;
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: tourner 20s linear infinite;
  pointer-events: none; /* pour ne pas gêner les clics */
  z-index: 1000; /* au-dessus de la grille */
  background: transparent !important;
}

.rond1 {
  position: absolute;
  width: 30px;
  height: 40px;
  background-color: rgb(0, 0, 0);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(400px, -50%);
}

.rond2 {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: rgb(28, 255, 28);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(100px, -50%);
}
.rond3 {
  position: absolute;
  width: 70px;
  height: 170px;
  background-color: rgb(232, 35, 195);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(500px, -50%);
}
.rond4 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: rgb(232, 255, 25);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(600px, -50%);
}

@keyframes tourner {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.cas1{
        background-color: rgb(34, 100, 233);
        border-radius: 10px;
        position: absolute;
        width:2vh;
        height:2vh;
        animation: anim calc(var(--id) * 0.1s + 0.2s) ease-in 0s infinite alternate;
      }
      @keyframes anim {
        0%   {top:1vh;left: 1vw;}
        100% {top:99vh;left: 99vw;}
      }