*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}
.container{
  width: 80vmin;
  height: 80vmin;
  display: flex;
  flex-wrap: wrap;
  cursor: pointer;
  background-color: white;
  background-size: cover;
  outline: 2vmin solid white;
}
.container > div{
  width: 4vmin;
  height: 4vmin;
  flex: 0 0 auto;
}

/* SECTION FORMES ----------------------- */
.full{}
/* .top{
  clip-path: polygon(50% 50%, 0 0, 100% 0);
}
.bottom{
  clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
}
.left{
  clip-path: polygon(50% 50%, 0 0, 0 100%);
}
.right{
  clip-path: polygon(50% 50%, 100% 0, 100% 100%);
} */
.topleft{
  clip-path: polygon(100% 0, 0 100%, 0 0);
}
/* .topright{
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.bottomleft{
  clip-path: polygon(0 0, 100% 100%, 0 100%);
} */
.bottomright{
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
/* .circle{
  border-radius: 50%;
}
.topleftcircle{
  border-radius: 100% 0% 0% 10% / 100% 10% 0% 0%;
}
.toprightcircle{
  border-radius: 0% 100% 100% 0% / 0% 100% 0% 100% ;
}
.bottomleftcircle{
  border-radius: 0% 100% 0% 100% / 0% 0% 100% 100%;
}
.bottomrightcircle{
  border-radius: 0% 100% 100% 0% / 0% 0% 100% 100%;
} */

/* SECTION COULEURS --------------------- */
.color0{background-color: transparent;}
.color1{background-color: #7400B8;}
.color2{background-color: #6930C3;}
.color3{background-color: #5E60CE;}
.color4{background-color: #5390D9;}
.color5{background-color: #4EA8DE;}
.color6{background-color: #48BFE3;}
.color7{background-color: #56CFE1;}
.color8{background-color: #64DFDF;}
.color9{background-color: #72EFDD;}
.colorblack{background-color: black;}
.colorwhite{background-color: white;}