.path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 2s linear alternate infinite;
  }
  
  @keyframes dash {
    from {
      stroke-dashoffset: 1000;
    }
    to {
      stroke-dashoffset: 0;
    }
  }

  html{
    background: #1d1d22;
    height: 100vh;
  }
  /* div{
    --bg: radial-gradient(#000000 67%, rgba(0, 0, 0, 0) 68%);
    background: linear-gradient(#ff1493 calc(50% - 13em), #ffff00 calc(50% + 13em));
  } */
  body{
    height: 100%;
    margin: 0;
  }
  div.waves{
    width: 100%;
    bottom: 0;
    /*height: 100%;*/
    position: absolute;
    z-index: 99;
  }
  .tutorial-link{
    font-family: sans-serif;
    text-align: center;
    color: #f3f3f3;
  }
  .tutorial-link h2{
    background: linear-gradient(90deg, #00b4db 0%, #224488 50%, #0083b0 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    
  }
  .tutorial-link a{
    text-decoration: none;
    background: linear-gradient(90deg, #00b4db 0%, #224488 50%, #0083b0 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    
  }
  .mmp{
    position: absolute;
    width: 100%;
    top: 53vh;
    left: 0;
    animation-name: move-left;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  svg{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    animation-name: move-left;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  .spacer{
    height: 100px;
    width: 100%;
  }
  
  @keyframes example {
    0%   {
      left:0px;
      top:0px;}
    
    50%  {
      left:-2000px;
      top:800px;}
    
    100% {
      left:0px; 
      top:0px;}
  }