*{
  margin:0;
  padding:0;
}

html, body {
  overflow:hidden;
}

@font-face{
  font-family: "ThinSans";
  src: url("ThinSans.woff2") format("woff2");
}

.teksti {
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  color: white;
  font-family: ThinSans;
  font-size: 6pt;
  opacity: 0.5; 
}

.grid-container {
  background-image: radial-gradient(
    circle farthest-corner at calc(var(--my-var100_2) * 1%) calc(var(--my-var100) * 1%),
    hsl(calc(var(--my-var360)), 50%, 50%), 
    hsl(calc(var(--my-var360_2)), calc(var(--my-var100) * 1%), 50%), 
    hsl(calc(var(--my-var360_3)), 50%, 50%)
  );
}

.parallelogram {
  position:absolute;
	width: calc(var(--my-var100) * 2px);
	height: calc(var(--my-var100_2) * 3px);
	transform: skew(calc(var(--my-var100_3)* 1deg));
	background: #555;
  animation-name: parallelogram;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  border-radius: calc(var(--my-var100_4) * 1px);
}

@keyframes parallelogram {
  0%   {background-color:hsl(calc(var(--my-var360_3)), calc(var(--my-var100) * 1%), calc(var(--my-var100_2) * 0.7% + 15%)); left:calc(var(--my-var100) * 1%); top:calc(var(--my-var100_3) * 1%);}
  25%  {background-color:hsl(calc(var(--my-var360_2)), calc(var(--my-var100_2) * 1%), calc(var(--my-var100_2) * 0.7% + 15%)); right:200px; top:calc(var(--my-var100_2) * 1%);}
  50%  {background-color:hsl(calc(var(--my-var360_4)), calc(var(--my-var100_2) * 1%), calc(var(--my-var100_2) * 0.7% + 15%)); left:calc(var(--my-var100_3) * 1%); top:calc(var(--my-var100_3) * 1%);}
  75%  {background-color:hsl(calc(var(--my-var360_2)), calc(var(--my-var100) * 1%), calc(var(--my-var100_2) * 0.7% + 15%)); right:0px; top:calc(var(--my-var100_4) * 1%);}
  100% {background-color:hsl(calc(var(--my-var360_3)), calc(var(--my-var100) * 1%), calc(var(--my-var100_2) * 0.7% + 15%)); left:calc(var(--my-var100) * 1%); top:calc(var(--my-var100_3) * 1%);}

  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(-360deg);
  }
}

.square {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  animation-name: square;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  border-radius: calc(var(--my-var100_3) * 1px);
}

@keyframes square {
  0%   {background-color:hsl(calc(var(--my-var360_2)), calc(var(--my-var100) * 1%), calc(var(--my-var100_2) * 0.7% + 15%)); left:calc(var(--my-var100) * 1%); top:calc(var(--my-var100_3) * 1%);}
  25%  {background-color:hsl(calc(var(--my-var360_3)), calc(var(--my-var100) * 1%), calc(var(--my-var100_2) * 0.7% + 15%)); left:200px; top:calc(var(--my-var100_2) * 1%);}
  50%  {background-color:hsl(calc(var(--my-var360)), calc(var(--my-var100) * 1%), calc(var(--my-var100_2) * 0.7% + 15%)); left:calc(var(--my-var100_3) * 1%); top:calc(var(--my-var100_3) * 1%);}
  75%  {background-color:hsl(calc(var(--my-var360_4)), calc(var(--my-var100) * 1%), calc(var(--my-var100_2) * 0.7% + 15%)); left:0px; top:calc(var(--my-var100) * 1%);}
  100% {background-color:hsl(calc(var(--my-var360_2)), calc(var(--my-var100) * 1%), calc(var(--my-var100_2) * 0.7% + 15%)); left:calc(var(--my-var100) * 1%); top:calc(var(--my-var100_3) * 1%);}

  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}

.oval {
  height: calc(var(--my-var1000) * 1px / 2);
  width: calc(var(--my-var1000_2) * 1px / 2);
  background-color: red;
  border-radius: calc(var(--my-var100) * 1px);
  position:absolute;
  animation-name: oval;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes oval {
  0%   {background-color:hsl(calc(var(--my-var360_2)), calc(var(--my-var100) * 1%), calc(var(--my-var100_2) * 0.7% + 15%)); left:calc(var(--my-var100) * 1%); top:calc(var(--my-var100_3) * 1%);}
  25%  {background-color:hsl(calc(var(--my-var360)), calc(var(--my-var100_2) * 1%), calc(var(--my-var100_2) * 0.7% + 15%)); right:200px; top:calc(var(--my-var100_4) * 1%);}
  50%  {background-color:hsl(calc(var(--my-var360)), calc(var(--my-var100) * 1%), calc(var(--my-var100_2) * 0.7% + 15%)); left:calc(var(--my-var100_3) * 1%); top:calc(var(--my-var100_3) * 1%);}
  75%  {background-color:hsl(calc(var(--my-var360_4)), calc(var(--my-var100) * 1%), calc(var(--my-var100_2) * 0.7% + 15%)); right:0px; top:calc(var(--my-var100_2) * 1%);}
  100% {background-color:hsl(calc(var(--my-var360_2)), calc(var(--my-var100) * 1%), calc(var(--my-var100_2) * 0.7% + 15%)); left:calc(var(--my-var100) * 1%); top:calc(var(--my-var100_3) * 1%);}

  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(720deg);
  }
}

.grid-container {
  background-image: radial-gradient(
    circle farthest-corner at calc(var(--my-var100_2) * 1%) calc(var(--my-var100) * 1%),
    hsl(calc(var(--my-var360)), 50%, 50%), 
    hsl(calc(var(--my-var360_2)), calc(var(--my-var100) * 1%), 50%), 
    hsl(calc(var(--my-var360_3)), 50%, 50%)
  );
}

canvas{
  height: 100vh;;
  width: 100%;
}