* {
  padding: 0;
  margin: 0;
}

html {

}

body {
  height: 100vh;
  overflow: hidden;
}

body {
  height: 100vh;
}

.colorbg {
    display:grid;
    gap:0;
    position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
  background-color: white;
    width:100vw;
  height: 100vh;
}

.colorparent {
  display:grid;
    gap:0;
    position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
  width:60vw;
  height: 80vh;
background-color: var(--c7);
   z-index:1;
  
}

.color1parent {
   display:grid;
border-radius:1000%;
  align-items: center;
  display: flex;
  justify-content: center;
   z-index:1;
      background-color: var(--c1);
  height: 100%;
}


.color2parent {
  align-items: center;
  display: flex;
  border-radius:1000%;
  justify-content: center;
   z-index:1;
      background-color: var(--c2);
  height: 100%;
}

.color3parent {
  align-items: center;
  display: flex;
  border-radius:1000%;
  justify-content: center;
   z-index:1;
      background-color: var(--c3);
  height: 100%;
  
}

.color4parent {
  align-items: center;
  display: flex;
  border-radius:1000%;
  justify-content: center;
   z-index:1;
      background-color: var(--c4);

}

.color5parent {
  align-items: center;
  display: flex;
  border-radius:1000%;
  justify-content: center;
   z-index:1;
      background-color: var(--c5);
}

.color6parent {
  align-items: center;
  display: flex;
  justify-content: center;
   z-index:1;
  border-radius:1000%;
      background-color: var(--c6);
  height: 100%;

}


.textparent {
  display:grid;
    gap:0;
    position: absolute;
  top: 50%;
  left: 50%;
  
    transform: translate(-50%, -50%);
  width:100vw;
  height: 100vh;
   z-index:2;  
}

.text1parent {
    font-size:16px;
 font-family: "Comic Sans MS", "Comic Sans", cursive;
  align-items: center;
  display: flex;
  justify-content: center;
   z-index:1;
      color: var(--c1);

       filter: invert(100%);
}

.text2parent {
    font-size:16px;
 font-family: "Comic Sans MS", "Comic Sans", cursive;
  align-items: center;
  display: flex;
  justify-content: center;
   z-index:1;
      color: var(--c2);

       filter: invert(100%);
}

.text3parent {
 font-family: "Comic Sans MS", "Comic Sans", cursive;
  align-items: center;
  display: flex;
  justify-content: center;
   z-index:1;
      color: var(--c3);

       filter: invert(100%);
}


.text4parent {
    font-size:16px;
 font-family: "Comic Sans MS", "Comic Sans", cursive;
  align-items: center;
  display: flex;
  justify-content: center;
   z-index:1;
      color: var(--c4);

       filter: invert(100%);
}

.text5parent {
    font-size:16px;
 font-family: "Comic Sans MS", "Comic Sans", cursive;
  align-items: center;
  display: flex;
  justify-content: center;
   z-index:1;
      color: var(--c5);

       filter: invert(100%);
}

.text6parent {
  font-size:16px;
 font-family: "Comic Sans MS", "Comic Sans", cursive;
  align-items: center;
  display: flex;
  justify-content: center;
   z-index:1;
      color: var(--c6);

       filter: invert(100%);
}