*{
  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;
}
.container > div{
  width: 4vmin;
  height: 4vmin;
  flex: 0 0 auto;
}

/* SECTION FORMES ----------------------- */
.full{
  /* clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); */
}
.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%;
  background-color: blue!important;
}
.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: #FBF4E9;}
.color2{background-color: #B1E693;}
.color3{background-color: #6ECB63;}
.color4{background-color: #EC9CD3;}
.colorblack{background-color: black;} */

.color0{background-color: transparent;}
.color1{background-color: #1DB9C3;}
.color2{background-color: #7027A0;}
.color3{background-color: #C32BAD;}
.color4{background-color: #F56FAD;}
.colorwhite{background-color: white;}