/* Grid Drawing Club generated CSS */

/* Generated Patterns */
/* User Patterns */
.defaultpattern1 {
  background:transparent;
}

.pattern-0XksK {
  background:linear-gradient(red,lime);
}

.pattern-RyIq4 {
  background:linear-gradient(lime,blue,red);
}

.pattern-5yOBT {
  background:radial-gradient(ellipse farthest-side, yellow, transparent);
}

.pattern-fLBJU {
  background:lime;
}

.pattern-RX2B_ {
  background:blue;
}

.pattern-ZjAGZ {
  }
    logo {
      display:block;
      position:relative;
    }
    letter {
      position: absolute;
      offset-path: xywh(1lh 1lh calc(100% - 2lh) calc(100% - 2lh) round 2lh);
    }
    worm.eng letter {
      animation: logo-eng 40s ease-in-out infinite;
      animation-delay:calc(-10s + var(--i) * -0.25s);
      animation-play-state: paused;

    }
    worm.fin letter {
      animation: logo-fin 40s ease-in-out infinite;
      animation-delay:calc(var(--i) * -0.25s);
      animation-play-state: paused;

    }
    @keyframes logo-eng {
      from {
        offset-distance: 15%;
      }
      to {
        offset-distance: 115%;
      }
    }
    @keyframes logo-fin {
      from {
        offset-distance: 15%;
      }
      to {
        offset-distance: 115%;
      }
    
    
}

.pattern-ZpMqt {
  background:radial-gradient(60% 150% at 50% -50%, gold 50%, yellow); 
border-radius:0 0 45% 45%;

}

.pattern-oVxrw {
  background:linear-gradient(to right, yellow, gold 30% 70%, yellow);
}

.pattern-5AY1X {
  background:linear-gradient(to bottom right, transparent 0 50%, yellow 50%, gold 80%);
}

.pattern-hAsoz {
  background:linear-gradient(to bottom left, transparent 0 50%, yellow 50%, gold 80%);
}

.pattern-ODhjL {
  background:linear-gradient(yellow, gold 30% 70%, yellow);
}



/* Generated Borders */
/* User Borders */
.border-2 {
  border-style: solid;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAAAAXNSR0IArs4c6QAAACRQTFRFAAAALhIrJCMjJVdA5iQc9VcSt68W9sQ8Gz2xTy6VSrPWr6u6ArFGFgAAAAx0Uk5TAP//////////////CcRQJgAAAEVJREFUCJlNjkEOwEAIAieRsP//caHdbqseNCMoa75kAN3FSsoGW5SkbbhERgmsrfG8mgzjDiHfWskxqOZYb81zNOT3zwWDoAGvEZ4ljwAAAABJRU5ErkJggg==");
  border-image-slice: 4;
  border-image-width: 20px 20%;
  border-image-repeat: repeat;
}

.border-3 {
  border-style: solid;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtCAYAAAA6GuKaAAAB0ElEQVRYR2NMq8j7zwAFszomMcLYxIhXZIfClDOE2ZTC2auOdBMU75i6Gq6GVHsZiXEcLkNHHQ0Nd2ICkfH0nbvw5GGqogxPHsSIZzpHk5QkkJPQ9L1L4XpJtXfU0bCgIyZTUhTS5dsmwZPH+0N34FEmaKcCZ+MST9c1JFhK4PLAzMvnCZqPy17GUUdDw46YcpqikIbHEZCBXGLMnjMRLpWako81p5vIW8CTFjEORU4qZx6ewFpSEWMvXCPIVaOOJpBUqBbSuJIKcuGPrObe48Pw5EFMMYechJRkbVFiGWYurkoN2V6sGtGTyqijoUFGUUj//s8Aj2JWRgaCbQ/kaMLFxmUmMXpxJQ9kMxlHHQ0NSpqHNK4om7JoMTzZ5MTF4sywcP3//8PV/0akMgZWROpjYGBkJGgOMfbiNIQYzSgeHnU0JDhwxTDOjHjhwgV4dBsYGGCNEeS0S0zJgKwGuaRCFsdlL1Glx6ijsUQDRSE9WnrAyunRIg8zLYxW47AwoXk1PiQbTLhKD2J6EKM9F2joERNYQ7+7NTqEQK8hhCET0qMDkASSBPJgDUUDkEMypImZW8E1JzI650KgckEO3KE5UUTMvN3o5Cc0GYy4aWYAtDPAZIkQUEsAAAAASUVORK5CYII=");
  border-image-slice: 1 15;
  border-image-width: 20% 5%;
  border-image-repeat: stretch;
}

.border-4 {
  border-style: solid;
  border-image-source: url("data:image/gif;base64,R0lGODdhAwADALMAAAAAAC4SKyQjIyVXQOYkHPVXErevFvbEPBs9sU8ulUqz1q+rugAAAAAAAAAAAAAAACH5BAkKAAAALAAAAAADAAMAAAQFEEhwJogAOw==");
  border-image-slice: 3 0;
  border-image-width: 20% 0%;
  border-image-repeat: round;
}

.border-tfEdQ {
  border-style: solid;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAAXNSR0IArs4c6QAAACBJREFUGFdjZGBg+M+ABhjRBMF8EIEMwLrQBcEKsAoCACTTBAMQ/dOOAAAAAElFTkSuQmCC");
  border-image-slice: 1 2 3 2;
  border-image-width: 1;
  border-image-repeat: stretch;
}



/* Generated Clippaths */
/* User Clippaths */
.clippath-rounded {
  border-radius: 20%;
}

.clippath-ellipse {
  clip-path: ellipse(closest-side farthest-side);
}

.clippath-rhombus {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.clippath-hexagon {
  clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
}

.clippath-octagon {
  clip-path: polygon(40% 0%, 60% 0%, 100% 40%, 100% 60%, 60% 100%, 40% 100%, 0% 60%, 0% 40%);
}

.clippath-triangle-up {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.clippath-triangle-down {
  clip-path: polygon(100% 0, 0 0, 50% 100%);
}

.clippath-triangle-left {
  clip-path: polygon(100% 100%, 100% 0, 0 50%);
}

.clippath-triangle-right {
  clip-path: polygon(100% 50%, 0 0, 0 100%);
}