/* Reusable static texture presets. Apply with: class="texture texture--dots" */
.texture {
  background-repeat: repeat;
}

.texture--soft-noise {
  background-color: #25464b;
  background-image: radial-gradient(circle at 12% 25%, rgb(255 255 255 / 18%) 0 1px, transparent 1.5px), radial-gradient(circle at 72% 72%, rgb(0 0 0 / 18%) 0 1px, transparent 1.5px), radial-gradient(circle at 42% 58%, rgb(255 255 255 / 10%) 0 1px, transparent 2px);
  background-size: 9px 13px, 13px 11px, 17px 19px;
}

.texture--dots {
  background-color: #f2b85d;
  background-image: radial-gradient(#fff6 1.5px, transparent 1.8px);
  background-size: 15px 15px;
}

.texture--diagonal-lines {
  background: repeating-linear-gradient(135deg, #ef6f61 0 8px, #df5c5a 8px 16px, #f48a67 16px 20px);
}

.texture--grid {
  background-color: #d7eee8;
  background-image: linear-gradient(#3f8f83 1px, transparent 1px), linear-gradient(90deg, #3f8f83 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .85;
}

.texture--paper {
  background-color: #eadfc8;
  background-image: repeating-linear-gradient(0deg, rgb(91 69 38 / 7%) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgb(255 255 255 / 14%) 0 1px, transparent 1px 7px);
  background-blend-mode: multiply;
}

.texture--crosshatch {
  background-color: #e0e8ec;
  background-image: repeating-linear-gradient(45deg, transparent 0 7px, #72909d 7px 8px), repeating-linear-gradient(-45deg, transparent 0 7px, #72909d 7px 8px);
  opacity: .8;
}

.texture--zigzag {
  background: linear-gradient(135deg, #f6c667 25%, transparent 25%) -12px 0, linear-gradient(225deg, #f6c667 25%, transparent 25%) -12px 0, linear-gradient(315deg, #f6c667 25%, transparent 25%), linear-gradient(45deg, #f6c667 25%, #e78263 25%);
  background-size: 24px 24px;
}

.texture--bubbles {
  background-color: #a9ddec;
  background-image: radial-gradient(circle at 25% 35%, transparent 0 9px, #fff8 10px 11px, transparent 12px), radial-gradient(circle at 72% 70%, transparent 0 14px, #fff7 15px 16px, transparent 17px), radial-gradient(circle at 88% 18%, #fff5 0 4px, transparent 5px);
  background-size: 88px 76px, 120px 105px, 64px 62px;
}

.texture--scanlines {
  background: repeating-linear-gradient(0deg, #152f4c 0 3px, #245274 3px 5px, #152f4c 5px 8px);
}

.texture--radial-burst {
  background: repeating-conic-gradient(from 5deg, #f3bd61 0 9deg, #d86a69 9deg 18deg, #f5d982 18deg 27deg);
  mask-image: radial-gradient(circle, #000 0 58%, transparent 80%);
}

.texture--circuit {
  background-color: #182d3b;
  background-image: radial-gradient(circle at 10px 10px, #65e0bf 0 2px, transparent 3px), linear-gradient(90deg, transparent 9px, #65e0bf55 9px 11px, transparent 11px), linear-gradient(0deg, transparent 9px, #65e0bf55 9px 11px, transparent 11px);
  background-size: 50px 50px;
}

.texture--terrazzo {
  background-color: #ead7bc;
  background-image: radial-gradient(ellipse at 18% 22%, #c56e5a 0 7px, transparent 8px), radial-gradient(ellipse at 70% 35%, #568c86 0 11px, transparent 12px), radial-gradient(ellipse at 42% 78%, #e0a64d 0 6px, transparent 7px), radial-gradient(ellipse at 88% 83%, #8a6496 0 8px, transparent 9px);
  background-size: 110px 92px, 150px 130px, 90px 120px, 180px 160px;
}

.texture--leather {
  background-color: #643d2f;
  background-image: radial-gradient(ellipse at 20% 30%, #fff2 0 2px, transparent 3px), radial-gradient(ellipse at 70% 75%, #1e0d0988 0 3px, transparent 4px);
  background-size: 17px 13px, 23px 19px;
}

.texture--concrete {
  background-color: #b7b5ad;
  background-image: radial-gradient(circle at 20% 30%, #fff3 0 1px, transparent 2px), radial-gradient(circle at 70% 68%, #5c5c5866 0 2px, transparent 3px), repeating-linear-gradient(165deg, transparent 0 28px, #fff2 29px 30px);
  background-size: 31px 27px, 43px 37px, auto;
}

.texture--geode {
  background: repeating-radial-gradient(ellipse at 50% 52%, #1a2545 0 10px, #5b78b0 11px 16px, #eab879 17px 20px, #6cb9ac 21px 26px, #1a2545 27px 30px);
}

.texture--isometric {
  background-color: #d7e6ee;
  background-image: linear-gradient(30deg, #759eae 12%, transparent 12.5% 87%, #759eae 87.5%), linear-gradient(150deg, #759eae 12%, transparent 12.5% 87%, #759eae 87.5%), linear-gradient(30deg, #759eae 12%, transparent 12.5% 87%, #759eae 87.5%), linear-gradient(150deg, #759eae 12%, transparent 12.5% 87%, #759eae 87.5%);
  background-position: 0 0, 0 0, 15px 26px, 15px 26px;
  background-size: 30px 52px;
}

.texture--blueprint {
  background-color: #194a67;
  background-image: linear-gradient(#9bd4df44 1px, transparent 1px), linear-gradient(90deg, #9bd4df44 1px, transparent 1px), linear-gradient(#9bd4df22 1px, transparent 1px), linear-gradient(90deg, #9bd4df22 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px, 12px 12px, 12px 12px;
}

.texture--neon-grid {
  background-color: #111a2c;
  background-image: linear-gradient(#39e0cf66 1px, transparent 1px), linear-gradient(90deg, #e86df066 1px, transparent 1px);
  background-size: 30px 30px;
  box-shadow: inset 0 0 30px #49dcca66;
}

.texture--honeycomb {
  background-color: #f0c36c;
  background-image: linear-gradient(30deg, #bc763e 12%, transparent 12.5% 87%, #bc763e 87.5%), linear-gradient(150deg, #bc763e 12%, transparent 12.5% 87%, #bc763e 87.5%), linear-gradient(30deg, #bc763e 12%, transparent 12.5% 87%, #bc763e 87.5%), linear-gradient(150deg, #bc763e 12%, transparent 12.5% 87%, #bc763e 87.5%);
  background-position: 0 0, 0 0, 15px 26px, 15px 26px;
  background-size: 30px 52px;
}

.texture--woven {
  background-color: #a05a48;
  background-image: repeating-linear-gradient(0deg, #f4d49a 0 2px, transparent 2px 7px), repeating-linear-gradient(90deg, #6d3843 0 2px, transparent 2px 7px);
}

.texture--mosaic {
  background-color: #426e7a;
  background-image: linear-gradient(45deg, #e6b85c 25%, transparent 25% 75%, #e6b85c 75%), linear-gradient(45deg, #d87069 25%, transparent 25% 75%, #d87069 75%);
  background-size: 26px 26px;
  background-position: 0 0, 13px 13px;
}

.texture--lace {
  background-color: #f0e9dc;
  background-image: radial-gradient(circle, #9b7890 0 1.5px, transparent 2px), radial-gradient(circle, #7da89d 0 1.5px, transparent 2px);
  background-size: 13px 13px, 13px 13px;
  background-position: 0 0, 6px 6px;
}

.texture--pixel {
  background-color: #2d325c;
  background-image: linear-gradient(90deg, #ffcf66 50%, transparent 50%), linear-gradient(#ff7e7d 50%, transparent 50%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

.texture--pebbles {
  background-color: #788d91;
  background-image: radial-gradient(ellipse at 25% 30%, #b9c7c1 0 11px, #536c72 12px 14px, transparent 15px), radial-gradient(ellipse at 75% 72%, #d1c09e 0 9px, #536c72 10px 13px, transparent 14px);
  background-size: 82px 68px, 105px 88px;
}

.texture--bubble-wrap {
  background-color: #afd9d4;
  background-image: radial-gradient(circle, transparent 0 8px, #fff8 9px 10px, #5c9e9b 11px 12px, transparent 13px);
  background-size: 25px 25px;
}

.texture--notebook {
  background-color: #fffdf2;
  background-image: linear-gradient(90deg, transparent 0 30px, #e77e7e 31px 32px, transparent 33px), repeating-linear-gradient(0deg, transparent 0 23px, #88b8d0 24px 25px);
}

.texture--felt {
  background-color: #617d8b;
  background-image: radial-gradient(circle at 20% 30%, #d9e3df 0 1px, transparent 2px), radial-gradient(circle at 70% 72%, #294d62 0 1px, transparent 2px);
  background-size: 7px 9px, 11px 13px;
}

.texture--cork {
  background-color: #be8758;
  background-image: radial-gradient(ellipse at 20% 25%, #70452e 0 2px, transparent 3px), radial-gradient(ellipse at 73% 68%, #e0b579 0 3px, transparent 4px);
  background-size: 31px 24px, 43px 37px;
}

.texture--chevron {
  background-color: #536ba3;
  background-image: linear-gradient(135deg, #f2c46f 25%, transparent 25% 75%, #f2c46f 75%), linear-gradient(225deg, #d36e73 25%, transparent 25% 75%, #d36e73 75%);
  background-size: 32px 32px;
  background-position: 0 0, 16px 16px;
}

.texture--sprinkles {
  background-color: #f4e2c0;
  background-image: linear-gradient(25deg, #df6e62 0 3px, transparent 3px 12px), linear-gradient(112deg, #5da9a1 0 3px, transparent 3px 17px), linear-gradient(72deg, #e9ad4f 0 3px, transparent 3px 19px);
  background-size: 31px 29px, 37px 41px, 43px 35px;
}

.texture--ocean-pulse {
  background-color: #102a43;
  background-image: radial-gradient(circle at 14% 22%, rgb(113 236 255 / 70%) 0 1px, transparent 2px), radial-gradient(circle at 76% 68%, rgb(37 211 194 / 42%) 0 2px, transparent 3px), repeating-linear-gradient(0deg, transparent 0 14px, rgb(86 190 214 / 14%) 15px 16px);
  background-size: 19px 23px, 31px 29px, 100% 100%;
}

.texture--electric-blue-grid {
  background-color: #071b3a;
  background-image: linear-gradient(rgb(77 210 255 / 18%) 1px, transparent 1px), linear-gradient(90deg, rgb(77 210 255 / 18%) 1px, transparent 1px), radial-gradient(circle at 50% 50%, rgb(54 174 255 / 30%), transparent 58%);
  background-size: 28px 28px, 28px 28px, 100% 100%;
  box-shadow: inset 0 0 42px rgb(38 142 255 / 28%);
}

.texture--violet-nebula {
  background-color: #211537;
  background-image: radial-gradient(circle at 22% 30%, rgb(255 111 218 / 46%) 0 2px, transparent 3px), radial-gradient(circle at 76% 64%, rgb(132 102 255 / 52%) 0 3px, transparent 5px), radial-gradient(ellipse at 50% 50%, rgb(105 53 185 / 34%), transparent 62%);
  background-size: 23px 27px, 37px 41px, 100% 100%;
}

.texture--amethyst-facets {
  background-color: #302052;
  background-image: repeating-linear-gradient(125deg, transparent 0 18px, rgb(224 178 255 / 16%) 19px 20px), repeating-linear-gradient(35deg, transparent 0 27px, rgb(113 82 205 / 20%) 28px 30px), radial-gradient(circle at 30% 25%, rgb(255 143 231 / 28%), transparent 42%);
  background-size: auto, auto, 100% 100%;
}

.texture--crimson-embers {
  background-color: #4b101b;
  background-image: radial-gradient(circle at 18% 30%, rgb(255 224 153 / 80%) 0 1px, transparent 2px), radial-gradient(circle at 72% 72%, rgb(255 106 72 / 55%) 0 2px, transparent 4px), radial-gradient(circle at 42% 55%, rgb(217 38 76 / 35%) 0 5px, transparent 10px);
  background-size: 17px 21px, 31px 29px, 67px 61px;
}

.texture--ruby-lattice {
  background-color: #5a1024;
  background-image: repeating-linear-gradient(45deg, transparent 0 11px, rgb(255 169 145 / 22%) 12px 13px), repeating-linear-gradient(-45deg, transparent 0 17px, rgb(255 76 104 / 24%) 18px 20px), radial-gradient(circle at 50% 50%, rgb(255 190 100 / 18%), transparent 62%);
  background-size: auto, auto, 100% 100%;
}