.bgPattern1 {
  /* source: https://www.magicpattern.design/tools/css-backgrounds */
  background-color: #6a8c32;
  opacity: 1;
  background: linear-gradient(135deg, #b5da4155 25%, transparent 25%) -12px 0/ 24px 24px, linear-gradient(225deg, #b5da41 25%, transparent 25%) -12px 0/ 24px 24px, linear-gradient(315deg, #b5da4155 25%, transparent 25%) 0px 0/ 24px 24px, linear-gradient(45deg, #b5da41 25%, #6a8c32 25%) 0px 0/ 24px 24px;
}

.bgPattern2 {
  background-color: #6a8c32;
opacity: 1;
background: linear-gradient(135deg, #98b73a55 25%, transparent 25%) -26px 0/ 52px 52px, linear-gradient(225deg, #98b73a 25%, transparent 25%) -26px 0/ 52px 52px, linear-gradient(315deg, #98b73a55 25%, transparent 25%) 0px 0/ 52px 52px, linear-gradient(45deg, #98b73a 25%, #6a8c32 25%) 0px 0/ 52px 52px;
}

.bgPattern3 {
  background-color: #4c4c4c;
opacity: 1;
background-image: radial-gradient(circle at center center, #000000, #4c4c4c), repeating-radial-gradient(circle at center center, #000000, #000000, 33px, transparent 66px, transparent 33px);
background-blend-mode: multiply;
}

.bgPattern4 {
  background-color: #9abde3;
opacity: 1;
background-image:  radial-gradient(#afc5ef 2px, transparent 2px), radial-gradient(#afc5ef 2px, #9abde3 2px);
background-size: 80px 80px;
background-position: 0 0,40px 40px;
}


.bgPattern5 {
  background-color: #ffffff;
opacity: 1;
background-image:  linear-gradient(#efefef 3.6px, transparent 3.6px), linear-gradient(90deg, #efefef 3.6px, transparent 3.6px), linear-gradient(#efefef 1.8px, transparent 1.8px), linear-gradient(90deg, #efefef 1.8px, #ffffff 1.8px);
background-size: 90px 90px, 90px 90px, 18px 18px, 18px 18px;
background-position: -3.6px -3.6px, -3.6px -3.6px, -1.8px -1.8px, -1.8px -1.8px;
}



.bgPattern6 {
  background-color: #fffbca;
  opacity: 1;
  background-image:  linear-gradient(30deg, #ebdfb4 12%, transparent 12.5%, transparent 87%, #ebdfb4 87.5%, #ebdfb4), linear-gradient(150deg, #ebdfb4 12%, transparent 12.5%, transparent 87%, #ebdfb4 87.5%, #ebdfb4), linear-gradient(30deg, #ebdfb4 12%, transparent 12.5%, transparent 87%, #ebdfb4 87.5%, #ebdfb4), linear-gradient(150deg, #ebdfb4 12%, transparent 12.5%, transparent 87%, #ebdfb4 87.5%, #ebdfb4), linear-gradient(60deg, #ebdfb477 25%, transparent 25.5%, transparent 75%, #ebdfb477 75%, #ebdfb477), linear-gradient(60deg, #ebdfb477 25%, transparent 25.5%, transparent 75%, #ebdfb477 75%, #ebdfb477);
  background-size: 80px 140px;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}

.bgPattern7 {
  background-color: #16460d;
  opacity: 1;
  background: radial-gradient(circle, transparent 20%, #16460d 20%, #16460d 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #16460d 20%, #16460d 80%, transparent 80%, transparent) 100px 100px, linear-gradient(#044107 8px, transparent 8px) 0 -4px, linear-gradient(90deg, #044107 8px, #16460d 8px) -4px 0;
  background-size: 200px 200px, 200px 200px, 100px 100px, 100px 100px;
}

.bgPattern8 {
  /* Source https://css-pattern.com/ */
  --s: 185px; /* control the size */
  --c1: #2a440e;
  --c2: #4d7914;
  --c3: #325d0b;
  
  --_g: var(--c1) 10%,var(--c2) 10.5% 19%,#0000 19.5% 80.5%,var(--c2) 81% 89.5%,var(--c3) 90%;
  --_c: from -90deg at 37.5% 50%,#0000 75%;
  --_l1: linear-gradient(145deg,var(--_g));
  --_l2: linear-gradient( 35deg,var(--_g));
  background: 
    var(--_l1), var(--_l1) calc(var(--s)/2) var(--s),
    var(--_l2), var(--_l2) calc(var(--s)/2) var(--s),
    conic-gradient(var(--_c),var(--c1) 0) calc(var(--s)/8) 0,
    conic-gradient(var(--_c),var(--c3) 0) calc(var(--s)/2) 0,
    linear-gradient(90deg,var(--c3) 38%,var(--c1) 0 50%,var(--c3) 0 62%,var(--c1) 0);
  background-size: var(--s) calc(2*var(--s)/3);

}

.bgPattern9 {
  --s: 82px; /* control the size */
  --c1: #89b3d8;
  --c2: #ffffff;
  --c3: #bcddfb;
  
  --_g: var(--c3) 0 120deg,#0000 0;
  background:
    conic-gradient(from -60deg at 50% calc(100%/3),var(--_g)),
    conic-gradient(from 120deg at 50% calc(200%/3),var(--_g)),
    conic-gradient(from  60deg at calc(200%/3),var(--c3) 60deg,var(--c2) 0 120deg,#0000 0),
    conic-gradient(from 180deg at calc(100%/3),var(--c1) 60deg,var(--_g)),
    linear-gradient(90deg,var(--c1)   calc(100%/6),var(--c2) 0 50%,
                          var(--c1) 0 calc(500%/6),var(--c2) 0);
  background-size: calc(1.732*var(--s)) var(--s);
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.blurred_gradient {
  position: absolute;
  z-index: 1;
  --size: 500px;
  --speed: 40s;
  --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);

  width: var(--size);
  height: var(--size);
  filter: blur(calc(var(--size) / 5));
  background-image: linear-gradient(rgb(13, 80, 138), rgb(88, 20, 170));
  animation: rotate var(--speed) var(--easing) alternate infinite;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  transition: all 0.5s ease-out;

}

@media (min-width: 720px) {
  .blurred_gradient {
    --size: 1000px;
  }
}

.blurred_gradient_wrapper {
  background-color: #071c39;
  position: relative;
  inset: 0;
  display: flex;
  place-content: center;
  align-items: center;
  overflow: hidden;
}

.blurred_gradient_text {
  position: relative;
  z-index: 2;
  width: 100%;
}


.bgPattern10 {
  --u: 1vmax; /* change size */
	--hue: hue-rotate(0deg); /* change color hue*/
	--c1: #581623;
	--c2: #c1496b;
	--c3: #a33659;
	--gp: 50% / calc(var(--u) * 20) calc(var(--u) * 12);
	--g1: repeating-conic-gradient(
		from 0deg at 50% 40%,
		var(--c2) 0% 15%,
		#fff0 0% 100%
	);
	--g2: repeating-conic-gradient(
		from 0deg at 66.5% 80%,
		#fff0 0% 35%,
		var(--c2) 0% 65%,
		#fff0 0% 100%
	);
	--g3: repeating-conic-gradient(
		from 0deg at 83.5% 30%,
		var(--c1) 0% 35%,
		#fff0 0% 100%
	);
	--g4: repeating-conic-gradient(
		from 0deg at 66.5% 50%,
		#fff0 0% 15%,
		var(--c2) 0% 35%,
		var(--c1) 0% 50%,
		#fff0 0% 100%
	);
	--bp: calc(var(--u) * -10) calc(var(--u) * -6);
	/* height: 100vh; */
	filter: var(--hue);
	background: var(--g1) var(--gp), var(--g2) var(--gp), var(--g3) var(--gp),
		var(--g4) var(--gp), var(--g1) var(--gp), var(--g2) var(--gp),
		var(--g3) var(--gp), var(--g4) var(--gp),
		repeating-linear-gradient(
				90deg,
				var(--c3) 0% 50%,
				var(--c2) 66.5%,
				var(--c1) 66.5% 100%
			)
			50% / calc(var(--u) * 10) calc(var(--u) * 12);
	background-position: var(--bp), var(--bp), var(--bp), var(--bp), 0 0, 0 0, 0 0,
		0 0;

    transform: translateZ(1px);
}

.bgPattern10 h3, .bgPattern10 article {
  text-shadow: rgba(0, 0, 0, 0.7215686275) 3px 3px 6px;
}