* {
  padding: 0;
  margin: 0;
}

html {
   background: transparent;
}

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


.meshbg {
  width: 100vw;
  height: 100vh;
    position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
  background: linear-gradient(0deg, var(--c2),var(--c4),black);
}


.mesh1 {
  width: var(--x1);
   height: var(--y1);
    position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
  background: linear-gradient(180deg, var(--c3),var(--c1),black);
  border-radius: 1000%;
  z-index:1;
}

.mesh2 {
  width: var(--x2);
   height: var(--y2);
    position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
   background: linear-gradient(0deg, var(--c3),var(--c1),black);
  border-radius: 1000%;
  z-index:99;
  
}

.mesh3 {
  width: var(--x3);
   height: var(--y3);
    position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
   background: linear-gradient(180deg, var(--c3),var(--c1),black);
  border-radius: 1000%;
  z-index:99;
  
}

.mesh4 {
  width: var(--x4);
   height: var(--y4);
    position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
  background: linear-gradient(0deg, var(--c3),var(--c1),black);
  border-radius: 1000%;
  z-index:99;
  
}

.mesh5 {
  width: var(--x5);
   height: var(--y5);
    position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
  background: linear-gradient(180deg, var(--c3),var(--c1),black);
  border-radius: 1000%;
  z-index:99;
  
}
.mesh6 {
  width: var(--x6);
   height: var(--y6);
    position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
  background: linear-gradient(0deg, var(--c3),var(--c1),black);
  border-radius: 1000%;
  z-index:99;
  
}

.mesh7 {
  width: var(--x7);
   height: var(--y7);
    position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
  background: linear-gradient(180deg, var(--c3),var(--c1),black);
  border-radius: 1000%;
  z-index:99;
  
}

.mesh8 {
  width: var(--x8);
   height: var(--y8);
    position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
  background: linear-gradient(0deg, var(--c3),var(--c1),black);
  border-radius: 1000%;
  z-index:99;
  
}

.mesh9 {
  width: var(--x9);
   height: var(--y9);
    position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
  background: linear-gradient(180deg, var(--c3),var(--c1),black);
  border-radius: 1000%;
  z-index:99;
  
}

.mesh10 {
  width: var(--x10);
   height: var(--y10);
    position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
  background: linear-gradient(0deg, var(--c3),var(--c1),black);
  border-radius: 1000%;
  z-index:99;
  
}