body {
  height: 100vh;
  width: 100vw;
  display: grid;
  place-items: center;
  background-color: black;
  margin: 0px;
  overflow: hidden;
}

#wrapper {
  aspect-ratio: 1.75;
  width: 100vmin;
  position: relative;
}

#wrapper > .shape {
  height: 50%;
  width: 50%;
  background-color: rgba(255 255 255 / 5%);
  position: absolute;
  transition: left, top, height, width, border-radius;
  transition-duration: 750ms;
  transition-timing-function: ease-in-out;
}

#wrapper > .shape:nth-child(1) {
  background-color: rgb(176, 190, 197);
  z-index: 2;
}

#wrapper > .shape:nth-child(2) {
  background-color: rgb(254, 228, 64);
  z-index: 2;
}

#wrapper > .shape:nth-child(3) {
  background-color: rgb(155, 93, 229);
  z-index: 1;
}

#wrapper > .shape:nth-child(4) {
  background-color: rgb(241, 91, 181);
  z-index: 2;
}

#wrapper > .shape:nth-child(5) {
  background-color: rgb(245, 245, 245);
  z-index: 2;
}

#wrapper > .shape:nth-child(6) {
  background-color: rgb(0, 187, 249);
  z-index: 2;
}

#wrapper > .shape:nth-child(7) {
  background-color: rgb(0, 245, 212);
  z-index: 2;
}

/* TreeMap Shape */
#wrapper[data-configuration="1"] > .shape:nth-child(1) {  
  left: 0%;
  top: 0%;
  height: 50%;
  width: 20%;
}

#wrapper[data-configuration="1"] > .shape:nth-child(2) {  
  left: 20%;
  top: 0%;
  height: 50%;
  width: 30%;
}

#wrapper[data-configuration="1"] > .shape:nth-child(3) {  
  left: 50%;
  top: 0%;
  height: 100%;
  width: 50%;
}

#wrapper[data-configuration="1"] > .shape:nth-child(4) {  
  left: 0%;
  top: 50%;
  height: 50%;
  width: 30%;
}

#wrapper[data-configuration="1"] > .shape:nth-child(5) {  
  left: 30%;
  top: 50%;
  height: 50%;
  width: 20%;
}

#wrapper[data-configuration="1"] > .shape:nth-child(6) {  
  left: 70%;
  top: 50%;
  height: 50%;
  width: 30%;
}

#wrapper[data-configuration="1"] > .shape:nth-child(7) {  
  left: 85%;
  top: 75%;
  height: 25%;
  width: 15%;
}
/* End of TreeMap Shape */

/* Columns Shape */
#wrapper[data-configuration="2"] > .shape:nth-child(1) {
  left: 25%;
  top: 20%;
  height: 80%;
  width: 15%;
}

#wrapper[data-configuration="2"] > .shape:nth-child(2) {  
  left: 40%;
  top: 20%;
  height: 50%;
  width: 10%;
}

#wrapper[data-configuration="2"] > .shape:nth-child(3) {  
  left: 50%;
  top: 0%;
  height: 100%;
  width: 25%;
}

#wrapper[data-configuration="2"] > .shape:nth-child(4) {  
  left: 0%;
  top: 0%;
  height: 50%;
  width: 10%;
}

#wrapper[data-configuration="2"] > .shape:nth-child(5) {  
  left: 10%;
  top: 0%;
  height: 70%;
  width: 15%;
}

#wrapper[data-configuration="2"] > .shape:nth-child(6) {  
  left: 75%;
  top: 10%;
  height: 80%;
  width: 15%;
}

#wrapper[data-configuration="2"] > .shape:nth-child(7) {  
  left: 90%;
  top: 40%;
  height: 60%;
  width: 10%;
}
/* End of Columns Shape */


/* Bars Shape */
/* Bar Position 3*/
#wrapper[data-configuration="3"] > .shape:nth-child(1) {
  left: 0%;
  top: 30%;
  width: 80%;
  height: 15%;
}

/* Bar Position 1*/
#wrapper[data-configuration="3"] > .shape:nth-child(2) {  
  left: 0%;
  top: 0%;
  width: 50%;
  height: 15%;
}

/* Bar Position 2*/
#wrapper[data-configuration="3"] > .shape:nth-child(3) {  
  left: 0%;
  top: 15%;
  width: 100%;
  height: 15%;
}

/* Bar Position 5*/
#wrapper[data-configuration="3"] > .shape:nth-child(4) {  
  left: 0%;
  top: 60%;
  width: 50%;
  height: 15%;
}

/* Bar Position 7*/
#wrapper[data-configuration="3"] > .shape:nth-child(5) {  
  left: 0%;
  top: 90%;
  width: 70%;
  height: 15%;
}

/* Bar Position 6*/
#wrapper[data-configuration="3"] > .shape:nth-child(6) {  
  left: 0%;
  top: 75%;
  width: 80%;
  height: 15%;
}

/* Bar Position 4*/
#wrapper[data-configuration="3"] > .shape:nth-child(7) {  
  left: 0%;
  top: 45%;
  width: 60%;
  height: 15%;
}
/* End of Bars Shape */

/* Venn Diagram Shape */
#wrapper[data-configuration="4"] > .shape:nth-child(1) {  
  left: 0%;
  top: 16%;
  height: 18.2rem;
  width: 18.2rem;
}

#wrapper[data-configuration="4"] > .shape:nth-child(2) {  
  left: 50%;
  top: 70%;
  height: 15.5rem;
  width: 15.5rem;
}

#wrapper[data-configuration="4"] > .shape:nth-child(3) {  
  left: 58%;
  top: 20%;
  height: 20rem;
  width: 20rem;
}

#wrapper[data-configuration="4"] > .shape:nth-child(4) {  
  left: 24%;
  top: 30%;
  height: 18.4rem;
  width: 18.4rem;
}

#wrapper[data-configuration="4"] > .shape:nth-child(5) {   
  left: 34%;
  top: 56%;
  height: 11rem;
  width: 11rem;
}

#wrapper[data-configuration="4"] > .shape:nth-child(6) {  
  left: 6%;
  top: 65%;
  height: 17.5rem;
  width: 17.5rem;
}

#wrapper[data-configuration="4"] > .shape:nth-child(7) {  
  left: 80%;
  top: 8%;
  height: 9rem;
  width: 9rem;
}
/* End of Venn Diagram Shape */

/* Scatter Graph Shape */
#wrapper[data-configuration="5"] > .shape:nth-child(1) {  
  left: 10%;
  top: 20%;
  height: 3rem;
  width: 3rem;
}

#wrapper[data-configuration="5"] > .shape:nth-child(2) {  
  left: 30%;
  top: 50%;
  height: 3rem;
  width: 3rem;
}

#wrapper[data-configuration="5"] > .shape:nth-child(3) {  
  left: 30%;
  top: 58%;
  height: 3rem;
  width: 3rem;
}

#wrapper[data-configuration="5"] > .shape:nth-child(4) {  
  left: 42%;
  top: 42%;
  height: 3rem;
  width: 3rem;
}

#wrapper[data-configuration="5"] > .shape:nth-child(5) {   
  left: 34%;
  top: 62%;
  height: 3rem;
  width: 3rem;
}

#wrapper[data-configuration="5"] > .shape:nth-child(6) {  
  left: 66%;
  top: 5%;
  height: 3rem;
  width: 3rem;
}

#wrapper[data-configuration="5"] > .shape:nth-child(7) {  
  left: 18%;
  top: 83%;
  height: 3rem;
  width: 3rem;
}
/* End of Scatter Graph Shape */

#wrapper[data-roundness="1"] > .shape {   
  border-radius: 0rem; 
}

#wrapper[data-roundness="2"] > .shape {  
  border-radius: 6rem;
}

#wrapper[data-roundness="3"] > .shape {  
  border-radius: 50%;
}