:root {
  --p2: 1;
  --p3: 1;
  --p5: 1;
  --p7: 1;
  --p11: 1;
  --p13: 1;
  --p17: 1;
  --p19: 1;
  --p23: 1;
  --p29: 1;
  --p31: 1;
  --p37: 1;
  --p41: 1;
  --p43: 1;
  --p47: 1;
  --p53: 1;
  --p59: 1;
}

div:nth-child(2n) {
  --p2: 2;
}

div:nth-child(4n) {
  --p2: 4;
}

div:nth-child(8n) {
  --p2: 8;
}

div:nth-child(16n) {
  --p2: 16;
}

div:nth-child(32n) {
  --p2: 32;
}

div:nth-child(3n) {
  --p3: 3;
}

div:nth-child(9n) {
  --p3: 9;
}

div:nth-child(27n) {
  --p3: 27;
}

div:nth-child(5n) {
  --p5: 5;
}

div:nth-child(25n) {
  --p5: 25;
}

div:nth-child(7n) {
  --p7: 7;
}

div:nth-child(49n) {
  --p7: 49;
}

div:nth-child(11n) {
  --p11: 11;
}

div:nth-child(13n) {
  --p13: 13;
}

div:nth-child(17n) {
  --p17: 17;
}

div:nth-child(19n) {
  --p19: 19;
}

div:nth-child(23n) {
  --p23: 23;
}

div:nth-child(29n) {
  --p29: 29;
}

div:nth-child(31n) {
  --p31: 31;
}

div:nth-child(37n) {
  --p37: 37;
}

div:nth-child(41n) {
  --p41: 41;
}

div:nth-child(43n) {
  --p43: 43;
}

div:nth-child(47n) {
  --p47: 47;
}

div:nth-child(53n) {
  --p53: 53;
}

div:nth-child(59n) {
  --p59: 59;
}

div {
  --n: calc(1  * var(--p2)  * var(--p3)  * var(--p5)  * var(--p7)  * var(--p11)  * var(--p13)  * var(--p17)  * var(--p19)  * var(--p23)  * var(--p29)  * var(--p31)  * var(--p37)  * var(--p41)  * var(--p43)  * var(--p47)  * var(--p53)  * var(--p59));
}

body {
  margin: 0;
  padding: 0;
  font-size: 0;
}

@property --floor {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@property --floorX {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@property --floorY {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@property --change {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}
@keyframes changeNum {
  0% {
    --change: 0;
  }
  50% {
    --change: 5;
  }
  100% {
    --change: 0;
  }
}
:root {
  animation: changeNum 20s linear forwards infinite;
}

div.container {
  border-bottom: 5px solid #BBB;
  border-left: 5px solid #BBB;
  width: 90vw;
  height: 90vh;
  margin-top: 5vh;
  margin-left: 5vw;
  position: relative;
  background-size: calc(100% / 100) calc(100% / 10);
  background-image: linear-gradient(#DDD 1px, transparent 1px), linear-gradient(90deg, #DDD 1px, transparent 1px);
}

div.element {
  --x0: calc(var(--n) * 1.334 + var(--n) * var(--n) * 0.5325 + 0.235);
  --floor: calc(var(--x0) - .5);
  --x: calc(var(--x0) - var(--floor));
  --size: 10px;
  width: var(--size);
  height: var(--size);
  margin-left: calc(var(--size) / -2);
  margin-top: calc(var(--size) / -2);
  border-radius: 50%;
  background: #2966a3;
  position: absolute;
  bottom: calc(90vh * var(--x));
  left: calc(var(--n) / 100 * 90vw);
}