lgbtq.css/dist/lgbtq.css

Add some Pride to your stylesheets

/*!-----------------------------------------------\
      LGBTQ.css v2 MIT https://git.io/vK1KB
\-----------------------------------------------!*/

:root {
  --g-red: #d04b36;
  --g-orange: #e36511;
  --g-yellow: #ffba00;
  --g-green: #00b180;
  --g-blue: #147aab;
  --g-indigo: #675997;

  --gay: linear-gradient(
    var(--g-red) 0%,
    var(--g-red) 16.6666%,
    var(--g-orange) 16.6666%,
    var(--g-orange) 33.333%,
    var(--g-yellow) 33.333%,
    var(--g-yellow) 50%,
    var(--g-green) 50%,
    var(--g-green) 66.6666%,
    var(--g-blue) 66.6666%,
    var(--g-blue) 83.3333%,
    var(--g-indigo) 83.3333%,
    var(--g-indigo) 100%
  );

  --t-blue: #4fa5c2;
  --t-pink: #f587ac;
  --t-white: #f9fbfc;

  --trans: linear-gradient(
    var(--t-blue) 0%,
    var(--t-blue) 20%,
    var(--t-pink) 20%,
    var(--t-pink) 40%,
    var(--t-white) 40%,
    var(--t-white) 60%,
    var(--t-pink) 60%,
    var(--t-pink) 80%,
    var(--t-blue) 80%,
    var(--t-blue) 100%
  );

  --b-pink: #c1357e;
  --b-purple: #675997;
  --b-blue: #0655a9;

  --bi: linear-gradient(
    var(--b-pink) 0%,
    var(--b-pink) 40%,
    var(--b-purple) 40%,
    var(--b-purple) 60%,
    var(--b-blue) 60%,
    var(--b-blue) 100%
  );

  --p-magenta: #fa5e5b;
  --p-yellow: #ffba00;
  --p-blue: #4fa5c2;

  --pan: linear-gradient(
    var(--p-magenta) 0%,
    var(--p-magenta) 33.332%,
    var(--p-yellow) 33.332%,
    var(--p-yellow) 66.667%,
    var(--p-blue) 66.667%,
    var(--p-blue) 100%
  );

  --a-black: #222222;
  --a-gray: #a2a2a2;
  --a-white: #f9fbfc;
  --a-purple: #a148a2;

  --asex: linear-gradient(
    var(--a-black) 0%,
    var(--a-black) 20%,
    var(--a-gray) 20%,
    var(--a-gray) 40%,
    var(--a-white) 40%,
    var(--a-white) 60%,
    var(--a-purple) 60%,
    var(--a-purple) 80%,
    var(--a-black) 80%,
    var(--a-black) 100%
  );

  --nb-black: #222222;
  --nb-yellow: #f7e45a;
  --nb-white: #f9fbfc;
  --nb-purple: #675997;

  --nb: linear-gradient(
    var(--nb-yellow) 0%,
    var(--nb-yellow) 25%,
    var(--nb-white) 25%,
    var(--nb-white) 50%,
    var(--nb-purple) 50%,
    var(--nb-purple) 75%,
    var(--nb-black) 75%,
    var(--nb-black) 100%
  );

  --q-black: #000000;
  --q-cornflower: #99d9eb;
  --q-azure: #00a2e6;
  --q-lime: #b4e637;
  --q-white: #fff;
  --q-yellow: #ffba00;
  --q-magenta: #fd6666;
  --q-pink: #ffafc8;
  --queer: linear-gradient(
    var(--q-black) 0%,
    var(--q-black) 8%,
    var(--q-cornflower) 8%,
    var(--q-cornflower) 20%,
    var(--q-azure) 20%,
    var(--q-azure) 32%,
    var(--q-lime) 32%,
    var(--q-lime) 44%,
    var(--q-white) 44%,
    var(--q-white) 56%,
    var(--q-yellow) 56%,
    var(--q-yellow) 68%,
    var(--q-magenta) 68%,
    var(--q-magenta) 80%,
    var(--q-pink) 80%,
    var(--q-pink) 92%,
    var(--q-black) 92%,
    var(--q-black) 100%
  );

  --gaymen-darkgreen: #007c6b;
  --gaymen-palegreen: #40a4a5;
  --gaymen-litegreen: #59c8d2;
  --gaymen-center: #f0efff;
  --gaymen-liteblue: #7aade0;
  --gaymen-paleblue: #0b83c9;
  --gaymen-darkblue: #04336f;
  --gaymen: linear-gradient(
    var(--gaymen-darkgreen) 0%,
    var(--gaymen-darkgreen) 14.28%,
    var(--gaymen-palegreen) 14.28%,
    var(--gaymen-palegreen) 28.58%,
    var(--gaymen-litegreen) 28.58%,
    var(--gaymen-litegreen) 42.87%,
    var(--gaymen-center) 42.87%,
    var(--gaymen-center) 57.16%,
    var(--gaymen-liteblue) 57.16%,
    var(--gaymen-liteblue) 71.45%,
    var(--gaymen-paleblue) 71.45%,
    var(--gaymen-paleblue) 85.74%,
    var(--gaymen-darkblue) 85.74%,
    var(--gaymen-darkblue) 100%
  );

  --gf-pink: #f39ec1;
  --gf-white: #ffffff;
  --gf-purple: #a74a95;
  --gf-black: #000000;
  --gf-blue: #0068b5;
  --genderfluid: linear-gradient(
    var(--gf-pink) 0%,
    var(--gf-pink) 20%,
    var(--gf-white) 20%,
    var(--gf-white) 40%,
    var(--gf-purple) 40%,
    var(--gf-purple) 60%,
    var(--gf-black) 60%,
    var(--gf-black) 80%,
    var(--gf-blue) 80%,
    var(--gf-blue) 100%
  );

  --ag-white: #fff;
  --ag-green: #b8f58a;
  --ag-grey: #b9b9b9;
  --ag-black: #000000;
  --agender: linear-gradient(
    var(--ag-black) 0%,
    var(--ag-black) 14.28%,
    var(--ag-grey) 14.28%,
    var(--ag-grey) 28.58%,
    var(--ag-white) 28.58%,
    var(--ag-white) 42.87%,
    var(--ag-green) 42.87%,
    var(--ag-green) 57.16%,
    var(--ag-white) 57.16%,
    var(--ag-white) 71.45%,
    var(--ag-grey) 71.45%,
    var(--ag-grey) 85.74%,
    var(--ag-black) 85.74%,
    var(--ag-black) 100%
  );

  --i-yellow: #ffba00;
  --i-indigo: #675997;

  --intersex: repeating-radial-gradient(
    circle at center,
    var(--i-yellow),
    var(--i-yellow) 10%,
    var(--i-indigo) 10%,
    var(--i-indigo) 15%,
    var(--i-yellow) 15%,
    var(--i-yellow) 100%
  );

  --lesbian-darkorange: #d82c01;
  --lesbian-paleorange: #f1752c;
  --lesbian-liteorange: #ff985b;
  --lesbian-center: #ffffff;
  --lesbian-litemagenta: #d162a3;
  --lesbian-palemagenta: #b75591;
  --lesbian-darkmagenta: #a60260;
  --lesbian: linear-gradient(
    var(--lesbian-darkorange) 0%,
    var(--lesbian-darkorange) 14.28%,
    var(--lesbian-paleorange) 14.28%,
    var(--lesbian-paleorange) 28.58%,
    var(--lesbian-liteorange) 28.58%,
    var(--lesbian-liteorange) 42.87%,
    var(--lesbian-center) 42.87%,
    var(--lesbian-center) 57.16%,
    var(--lesbian-litemagenta) 57.16%,
    var(--lesbian-litemagenta) 71.45%,
    var(--lesbian-palemagenta) 71.45%,
    var(--lesbian-palemagenta) 85.74%,
    var(--lesbian-darkmagenta) 85.74%,
    var(--lesbian-darkmagenta) 100%
  );

  --polyamorous-yellow: #ffea6f;
  --polyamorous-blue: #14abea;
  --polyamorous-red: #fd2142;
  --polyamorous-black: #181919;
  --polyamorous: no-repeat
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40' width='40'%3E%3Cstyle%3E.y%7Bfill:%23ffea6f%7D%3C/style%3E%3Ctext x='0' y='30' font-size='40' class='y'%3Eπ%3C/text%3E%3C/svg%3E")
      center center,
    linear-gradient(
      var(--polyamorous-blue) 0%,
      var(--polyamorous-blue) 40%,
      var(--polyamorous-red) 40%,
      var(--polyamorous-red) 60%,
      var(--polyamorous-black) 60%,
      var(--polyamorous-black) 100%
    );

  --omni-pink: #ff92c5;
  --omni-fuschia: #ff4ab3;
  --omni-violet: #24033c;
  --omni-softindigo: #5855f8;
  --omni-periwinkle: #7b9dfb;
  --omni: linear-gradient(
    var(--omni-pink) 0%,
    var(--omni-pink) 20%,
    var(--omni-fuschia) 20%,
    var(--omni-fuschia) 40%,
    var(--omni-violet) 40%,
    var(--omni-violet) 60%,
    var(--omni-softindigo) 60%,
    var(--omni-softindigo) 80%,
    var(--omni-periwinkle) 80%,
    var(--omni-periwinkle) 100%
  );

  --p-magenta: #ea38aa;
  --p-green: #44cc70;
  --p-blue: #2188e8;
  --polysexual-image: linear-gradient(
    var(--p-magenta) 0%,
    var(--p-magenta) 33.332%,
    var(--p-green) 33.332%,
    var(--p-green) 66.667%,
    var(--p-blue) 66.667%,
    var(--p-blue) 100%
  );

  --aroace-gold: #e68222;
  --aroace-yellow: #eec62d;
  --aroace-white: #fff;
  --aroace-aqua: #49a6d5;
  --aroace-navy: #1c304b;
  --aroace: linear-gradient(
    var(--aroace-gold) 0%,
    var(--aroace-gold) 20%,
    var(--aroace-yellow) 20%,
    var(--aroace-yellow) 40%,
    var(--aroace-white) 40%,
    var(--aroace-white) 60%,
    var(--aroace-aqua) 60%,
    var(--aroace-aqua) 80%,
    var(--aroace-navy) 80%,
    var(--aroace-navy) 100%
  );

  --gq-lavender: #b390d6;
  --gq-white: #fff;
  --gq-olive: #5d8437;
  --genderqueer: linear-gradient(
    var(--gq-lavender) 0%,
    var(--gq-lavender) 33.332%,
    var(--gq-white) 33.332%,
    var(--gq-white) 66.667%,
    var(--gq-olive) 66.667%,
    var(--gq-olive) 100%
  );
}

.Gay {
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#d04b36),
    color-stop(16.6666%, #d04b36),
    color-stop(16.6666%, #e36511),
    color-stop(33.333%, #e36511),
    color-stop(33.333%, #ffba00),
    color-stop(50%, #ffba00),
    color-stop(50%, #00b180),
    color-stop(66.6666%, #00b180),
    color-stop(66.6666%, #147aab),
    color-stop(83.3333%, #147aab),
    color-stop(83.3333%, #675997),
    to(#675997)
  );
  background-image: -moz-linear-gradient(
    #d04b36 0%,
    #d04b36 16.6666%,
    #e36511 16.6666%,
    #e36511 33.333%,
    #ffba00 33.333%,
    #ffba00 50%,
    #00b180 50%,
    #00b180 66.6666%,
    #147aab 66.6666%,
    #147aab 83.3333%,
    #675997 83.3333%,
    #675997 100%
  );
  background-image: -o-linear-gradient(
    #d04b36 0%,
    #d04b36 16.6666%,
    #e36511 16.6666%,
    #e36511 33.333%,
    #ffba00 33.333%,
    #ffba00 50%,
    #00b180 50%,
    #00b180 66.6666%,
    #147aab 66.6666%,
    #147aab 83.3333%,
    #675997 83.3333%,
    #675997 100%
  );
  background-image: linear-gradient(
    #d04b36 0%,
    #d04b36 16.6666%,
    #e36511 16.6666%,
    #e36511 33.333%,
    #ffba00 33.333%,
    #ffba00 50%,
    #00b180 50%,
    #00b180 66.6666%,
    #147aab 66.6666%,
    #147aab 83.3333%,
    #675997 83.3333%,
    #675997 100%
  );
  background-image: var(--gay);
}

.Trans {
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#4fa5c2),
    color-stop(20%, #4fa5c2),
    color-stop(20%, #f587ac),
    color-stop(40%, #f587ac),
    color-stop(40%, #f9fbfc),
    color-stop(60%, #f9fbfc),
    color-stop(60%, #f587ac),
    color-stop(80%, #f587ac),
    color-stop(80%, #4fa5c2),
    to(#4fa5c2)
  );
  background-image: -moz-linear-gradient(
    #4fa5c2 0%,
    #4fa5c2 20%,
    #f587ac 20%,
    #f587ac 40%,
    #f9fbfc 40%,
    #f9fbfc 60%,
    #f587ac 60%,
    #f587ac 80%,
    #4fa5c2 80%,
    #4fa5c2 100%
  );
  background-image: -o-linear-gradient(
    #4fa5c2 0%,
    #4fa5c2 20%,
    #f587ac 20%,
    #f587ac 40%,
    #f9fbfc 40%,
    #f9fbfc 60%,
    #f587ac 60%,
    #f587ac 80%,
    #4fa5c2 80%,
    #4fa5c2 100%
  );
  background-image: linear-gradient(
    #4fa5c2 0%,
    #4fa5c2 20%,
    #f587ac 20%,
    #f587ac 40%,
    #f9fbfc 40%,
    #f9fbfc 60%,
    #f587ac 60%,
    #f587ac 80%,
    #4fa5c2 80%,
    #4fa5c2 100%
  );
  background-image: var(--trans);
}

.BiPlus {
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#c1357e),
    color-stop(40%, #c1357e),
    color-stop(40%, #675997),
    color-stop(60%, #675997),
    color-stop(60%, #0655a9),
    to(#0655a9)
  );
  background-image: -moz-linear-gradient(
    #c1357e 0%,
    #c1357e 40%,
    #675997 40%,
    #675997 60%,
    #0655a9 60%,
    #0655a9 100%
  );
  background-image: -o-linear-gradient(
    #c1357e 0%,
    #c1357e 40%,
    #675997 40%,
    #675997 60%,
    #0655a9 60%,
    #0655a9 100%
  );
  background-image: linear-gradient(
    #c1357e 0%,
    #c1357e 40%,
    #675997 40%,
    #675997 60%,
    #0655a9 60%,
    #0655a9 100%
  );
  background-image: var(--bi);
}

.Pansexual {
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#ea38aa),
    color-stop(33.332%, #ea38aa),
    color-stop(33.332%, #ffba00),
    color-stop(66.667%, #ffba00),
    color-stop(66.667%, #2188e8),
    to(#2188e8)
  );
  background-image: -moz-linear-gradient(
    #ea38aa 0%,
    #ea38aa 33.332%,
    #ffba00 33.332%,
    #ffba00 66.667%,
    #2188e8 66.667%,
    #2188e8 100%
  );
  background-image: -o-linear-gradient(
    #ea38aa 0%,
    #ea38aa 33.332%,
    #ffba00 33.332%,
    #ffba00 66.667%,
    #2188e8 66.667%,
    #2188e8 100%
  );
  background-image: linear-gradient(
    #ea38aa 0%,
    #ea38aa 33.332%,
    #ffba00 33.332%,
    #ffba00 66.667%,
    #2188e8 66.667%,
    #2188e8 100%
  );
  background-image: var(--pan);
}

.Asexual {
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#222222),
    color-stop(20%, #222222),
    color-stop(20%, #a2a2a2),
    color-stop(40%, #a2a2a2),
    color-stop(40%, #f9fbfc),
    color-stop(60%, #f9fbfc),
    color-stop(60%, #a148a2),
    color-stop(80%, #a148a2),
    color-stop(80%, #222222),
    to(#222222)
  );
  background-image: -moz-linear-gradient(
    #222222 0%,
    #222222 20%,
    #a2a2a2 20%,
    #a2a2a2 40%,
    #f9fbfc 40%,
    #f9fbfc 60%,
    #a148a2 60%,
    #a148a2 80%,
    #222222 80%,
    #222222 100%
  );
  background-image: -o-linear-gradient(
    #222222 0%,
    #222222 20%,
    #a2a2a2 20%,
    #a2a2a2 40%,
    #f9fbfc 40%,
    #f9fbfc 60%,
    #a148a2 60%,
    #a148a2 80%,
    #222222 80%,
    #222222 100%
  );
  background-image: linear-gradient(
    #222222 0%,
    #222222 20%,
    #a2a2a2 20%,
    #a2a2a2 40%,
    #f9fbfc 40%,
    #f9fbfc 60%,
    #a148a2 60%,
    #a148a2 80%,
    #222222 80%,
    #222222 100%
  );
  background-image: var(--asex);
}

.NonBinary {
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#f7e45a),
    color-stop(25%, #f7e45a),
    color-stop(25%, #f9fbfc),
    color-stop(50%, #f9fbfc),
    color-stop(50%, #675997),
    color-stop(75%, #675997),
    color-stop(75%, #222222),
    to(#222222)
  );
  background-image: -moz-linear-gradient(
    #f7e45a 0%,
    #f7e45a 25%,
    #f9fbfc 25%,
    #f9fbfc 50%,
    #675997 50%,
    #675997 75%,
    #222222 75%,
    #222222 100%
  );
  background-image: -o-linear-gradient(
    #f7e45a 0%,
    #f7e45a 25%,
    #f9fbfc 25%,
    #f9fbfc 50%,
    #675997 50%,
    #675997 75%,
    #222222 75%,
    #222222 100%
  );
  background-image: linear-gradient(
    #f7e45a 0%,
    #f7e45a 25%,
    #f9fbfc 25%,
    #f9fbfc 50%,
    #675997 50%,
    #675997 75%,
    #222222 75%,
    #222222 100%
  );
  background-image: var(--nb);
}

.Queer {
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#000000),
    color-stop(8%, #000000),
    color-stop(8%, #99d9eb),
    color-stop(20%, #99d9eb),
    color-stop(20%, #00a2e6),
    color-stop(32%, #00a2e6),
    color-stop(32%, #b4e637),
    color-stop(44%, #b4e637),
    color-stop(44%, #fff),
    color-stop(56%, #fff),
    color-stop(56%, #ffba00),
    color-stop(68%, #ffba00),
    color-stop(68%, #fd6666),
    color-stop(80%, #fd6666),
    color-stop(80%, #ffafc8),
    color-stop(92%, #ffafc8),
    color-stop(92%, #000000),
    to(#000000)
  );
  background-image: -moz-linear-gradient(
    #000000 0%,
    #000000 8%,
    #99d9eb 8%,
    #99d9eb 20%,
    #00a2e6 20%,
    #00a2e6 32%,
    #b4e637 32%,
    #b4e637 44%,
    #fff 44%,
    #fff 56%,
    #ffba00 56%,
    #ffba00 68%,
    #fd6666 68%,
    #fd6666 80%,
    #ffafc8 80%,
    #ffafc8 92%,
    #000000 92%,
    #000000 100%
  );
  background-image: -o-linear-gradient(
    #000000 0%,
    #000000 8%,
    #99d9eb 8%,
    #99d9eb 20%,
    #00a2e6 20%,
    #00a2e6 32%,
    #b4e637 32%,
    #b4e637 44%,
    #fff 44%,
    #fff 56%,
    #ffba00 56%,
    #ffba00 68%,
    #fd6666 68%,
    #fd6666 80%,
    #ffafc8 80%,
    #ffafc8 92%,
    #000000 92%,
    #000000 100%
  );
  background-image: linear-gradient(
    #000000 0%,
    #000000 8%,
    #99d9eb 8%,
    #99d9eb 20%,
    #00a2e6 20%,
    #00a2e6 32%,
    #b4e637 32%,
    #b4e637 44%,
    #fff 44%,
    #fff 56%,
    #ffba00 56%,
    #ffba00 68%,
    #fd6666 68%,
    #fd6666 80%,
    #ffafc8 80%,
    #ffafc8 92%,
    #000000 92%,
    #000000 100%
  );
  background-image: var(--queer);
}

.GayMale {
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#007c6b),
    color-stop(14.28%, #007c6b),
    color-stop(14.28%, #40a4a5),
    color-stop(28.58%, #40a4a5),
    color-stop(28.58%, #59c8d2),
    color-stop(42.87%, #59c8d2),
    color-stop(42.87%, #f0efff),
    color-stop(57.16%, #f0efff),
    color-stop(57.16%, #7aade0),
    color-stop(71.45%, #7aade0),
    color-stop(71.45%, #0b83c9),
    color-stop(85.74%, #0b83c9),
    color-stop(85.74%, #04336f),
    to(#04336f)
  );
  background-image: -moz-linear-gradient(
    #007c6b 0%,
    #007c6b 14.28%,
    #40a4a5 14.28%,
    #40a4a5 28.58%,
    #59c8d2 28.58%,
    #59c8d2 42.87%,
    #f0efff 42.87%,
    #f0efff 57.16%,
    #7aade0 57.16%,
    #7aade0 71.45%,
    #0b83c9 71.45%,
    #0b83c9 85.74%,
    #04336f 85.74%,
    #04336f 100%
  );
  background-image: -o-linear-gradient(
    #007c6b 0%,
    #007c6b 14.28%,
    #40a4a5 14.28%,
    #40a4a5 28.58%,
    #59c8d2 28.58%,
    #59c8d2 42.87%,
    #f0efff 42.87%,
    #f0efff 57.16%,
    #7aade0 57.16%,
    #7aade0 71.45%,
    #0b83c9 71.45%,
    #0b83c9 85.74%,
    #04336f 85.74%,
    #04336f 100%
  );
  background-image: linear-gradient(
    #007c6b 0%,
    #007c6b 14.28%,
    #40a4a5 14.28%,
    #40a4a5 28.58%,
    #59c8d2 28.58%,
    #59c8d2 42.87%,
    #f0efff 42.87%,
    #f0efff 57.16%,
    #7aade0 57.16%,
    #7aade0 71.45%,
    #0b83c9 71.45%,
    #0b83c9 85.74%,
    #04336f 85.74%,
    #04336f 100%
  );
  background-image: var(--gaymen);
}

.GenderFluid {
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#f39ec1),
    color-stop(20%, #f39ec1),
    color-stop(20%, #ffffff),
    color-stop(40%, #ffffff),
    color-stop(40%, #a74a95),
    color-stop(60%, #a74a95),
    color-stop(60%, #000000),
    color-stop(80%, #000000),
    color-stop(80%, #0068b5),
    to(#0068b5)
  );
  background-image: -moz-linear-gradient(
    #f39ec1 0%,
    #f39ec1 20%,
    #ffffff 20%,
    #ffffff 40%,
    #a74a95 40%,
    #a74a95 60%,
    #000000 60%,
    #000000 80%,
    #0068b5 80%,
    #0068b5 100%
  );
  background-image: -o-linear-gradient(
    #f39ec1 0%,
    #f39ec1 20%,
    #ffffff 20%,
    #ffffff 40%,
    #a74a95 40%,
    #a74a95 60%,
    #000000 60%,
    #000000 80%,
    #0068b5 80%,
    #0068b5 100%
  );
  background-image: linear-gradient(
    #f39ec1 0%,
    #f39ec1 20%,
    #ffffff 20%,
    #ffffff 40%,
    #a74a95 40%,
    #a74a95 60%,
    #000000 60%,
    #000000 80%,
    #0068b5 80%,
    #0068b5 100%
  );
  background-image: var(--genderfluid);
}

.Agender {
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#000000),
    color-stop(14.28%, #000000),
    color-stop(14.28%, #b9b9b9),
    color-stop(28.58%, #b9b9b9),
    color-stop(28.58%, #fff),
    color-stop(42.87%, #fff),
    color-stop(42.87%, #b8f58a),
    color-stop(57.16%, #b8f58a),
    color-stop(57.16%, #fff),
    color-stop(71.45%, #fff),
    color-stop(71.45%, #b9b9b9),
    color-stop(85.74%, #b9b9b9),
    color-stop(85.74%, #000000),
    to(#000000)
  );
  background-image: -moz-linear-gradient(
    #000000 0%,
    #000000 14.28%,
    #b9b9b9 14.28%,
    #b9b9b9 28.58%,
    #fff 28.58%,
    #fff 42.87%,
    #b8f58a 42.87%,
    #b8f58a 57.16%,
    #fff 57.16%,
    #fff 71.45%,
    #b9b9b9 71.45%,
    #b9b9b9 85.74%,
    #000000 85.74%,
    #000000 100%
  );
  background-image: -o-linear-gradient(
    #000000 0%,
    #000000 14.28%,
    #b9b9b9 14.28%,
    #b9b9b9 28.58%,
    #fff 28.58%,
    #fff 42.87%,
    #b8f58a 42.87%,
    #b8f58a 57.16%,
    #fff 57.16%,
    #fff 71.45%,
    #b9b9b9 71.45%,
    #b9b9b9 85.74%,
    #000000 85.74%,
    #000000 100%
  );
  background-image: linear-gradient(
    #000000 0%,
    #000000 14.28%,
    #b9b9b9 14.28%,
    #b9b9b9 28.58%,
    #fff 28.58%,
    #fff 42.87%,
    #b8f58a 42.87%,
    #b8f58a 57.16%,
    #fff 57.16%,
    #fff 71.45%,
    #b9b9b9 71.45%,
    #b9b9b9 85.74%,
    #000000 85.74%,
    #000000 100%
  );
  background-image: var(--agender);
}

.Intersex {
  background-image: -moz-repeating-radial-gradient(
    center,
    circle,
    #ffba00,
    #ffba00 10%,
    #675997 10%,
    #675997 15%,
    #ffba00 15%,
    #ffba00 100%
  );
  background-image: -o-repeating-radial-gradient(
    center,
    circle,
    #ffba00,
    #ffba00 10%,
    #675997 10%,
    #675997 15%,
    #ffba00 15%,
    #ffba00 100%
  );
  background-image: repeating-radial-gradient(
    circle at center,
    #ffba00,
    #ffba00 10%,
    #675997 10%,
    #675997 15%,
    #ffba00 15%,
    #ffba00 100%
  );
  background-image: var(--intersex);
}

.Lesbian {
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#d82c01),
    color-stop(14.28%, #d82c01),
    color-stop(14.28%, #f1752c),
    color-stop(28.58%, #f1752c),
    color-stop(28.58%, #ff985b),
    color-stop(42.87%, #ff985b),
    color-stop(42.87%, #ffffff),
    color-stop(57.16%, #ffffff),
    color-stop(57.16%, #d162a3),
    color-stop(71.45%, #d162a3),
    color-stop(71.45%, #b75591),
    color-stop(85.74%, #b75591),
    color-stop(85.74%, #a60260),
    to(#a60260)
  );
  background-image: -moz-linear-gradient(
    #d82c01 0%,
    #d82c01 14.28%,
    #f1752c 14.28%,
    #f1752c 28.58%,
    #ff985b 28.58%,
    #ff985b 42.87%,
    #ffffff 42.87%,
    #ffffff 57.16%,
    #d162a3 57.16%,
    #d162a3 71.45%,
    #b75591 71.45%,
    #b75591 85.74%,
    #a60260 85.74%,
    #a60260 100%
  );
  background-image: -o-linear-gradient(
    #d82c01 0%,
    #d82c01 14.28%,
    #f1752c 14.28%,
    #f1752c 28.58%,
    #ff985b 28.58%,
    #ff985b 42.87%,
    #ffffff 42.87%,
    #ffffff 57.16%,
    #d162a3 57.16%,
    #d162a3 71.45%,
    #b75591 71.45%,
    #b75591 85.74%,
    #a60260 85.74%,
    #a60260 100%
  );
  background-image: linear-gradient(
    #d82c01 0%,
    #d82c01 14.28%,
    #f1752c 14.28%,
    #f1752c 28.58%,
    #ff985b 28.58%,
    #ff985b 42.87%,
    #ffffff 42.87%,
    #ffffff 57.16%,
    #d162a3 57.16%,
    #d162a3 71.45%,
    #b75591 71.45%,
    #b75591 85.74%,
    #a60260 85.74%,
    #a60260 100%
  );
  background-image: var(--lesbian);
}

.Polyamorous {
  background: no-repeat
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40' width='40'%3E%3Cstyle%3E.y%7Bfill:%23ffea6f%7D%3C/style%3E%3Ctext x='0' y='30' font-size='40' class='y'%3Eπ%3C/text%3E%3C/svg%3E")
      center center,
    -webkit-gradient(
      linear,
      left top, left bottom,
      from(#14abea),
      color-stop(40%, #14abea),
      color-stop(40%, #fd2142),
      color-stop(60%, #fd2142),
      color-stop(60%, #181919),
      to(#181919)
    );
  background: no-repeat
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40' width='40'%3E%3Cstyle%3E.y%7Bfill:%23ffea6f%7D%3C/style%3E%3Ctext x='0' y='30' font-size='40' class='y'%3Eπ%3C/text%3E%3C/svg%3E")
      center center,
    -moz-linear-gradient(
      #14abea 0%,
      #14abea 40%,
      #fd2142 40%,
      #fd2142 60%,
      #181919 60%,
      #181919 100%
    );
  background: no-repeat
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40' width='40'%3E%3Cstyle%3E.y%7Bfill:%23ffea6f%7D%3C/style%3E%3Ctext x='0' y='30' font-size='40' class='y'%3Eπ%3C/text%3E%3C/svg%3E")
      center center,
    -o-linear-gradient(
      #14abea 0%,
      #14abea 40%,
      #fd2142 40%,
      #fd2142 60%,
      #181919 60%,
      #181919 100%
    );
  background: no-repeat
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40' width='40'%3E%3Cstyle%3E.y%7Bfill:%23ffea6f%7D%3C/style%3E%3Ctext x='0' y='30' font-size='40' class='y'%3Eπ%3C/text%3E%3C/svg%3E")
      center center,
    linear-gradient(
      #14abea 0%,
      #14abea 40%,
      #fd2142 40%,
      #fd2142 60%,
      #181919 60%,
      #181919 100%
    );
  background: var(--polyamorous);
}

.Omnisexual {
  background: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#ff92c5),
    color-stop(20%, #ff92c5),
    color-stop(20%, #ff4ab3),
    color-stop(40%, #ff4ab3),
    color-stop(40%, #24033c),
    color-stop(60%, #24033c),
    color-stop(60%, #5855f8),
    color-stop(80%, #5855f8),
    color-stop(80%, #7b9dfb),
    to(#7b9dfb)
  );
  background: -moz-linear-gradient(
    #ff92c5 0%,
    #ff92c5 20%,
    #ff4ab3 20%,
    #ff4ab3 40%,
    #24033c 40%,
    #24033c 60%,
    #5855f8 60%,
    #5855f8 80%,
    #7b9dfb 80%,
    #7b9dfb 100%
  );
  background: -o-linear-gradient(
    #ff92c5 0%,
    #ff92c5 20%,
    #ff4ab3 20%,
    #ff4ab3 40%,
    #24033c 40%,
    #24033c 60%,
    #5855f8 60%,
    #5855f8 80%,
    #7b9dfb 80%,
    #7b9dfb 100%
  );
  background: linear-gradient(
    #ff92c5 0%,
    #ff92c5 20%,
    #ff4ab3 20%,
    #ff4ab3 40%,
    #24033c 40%,
    #24033c 60%,
    #5855f8 60%,
    #5855f8 80%,
    #7b9dfb 80%,
    #7b9dfb 100%
  );
  background: var(--omni);
}

.Polysexual {
  background: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#ea38aa),
    color-stop(33.332%, #ea38aa),
    color-stop(33.332%, #44cc70),
    color-stop(66.667%, #44cc70),
    color-stop(66.667%, #2188e8),
    to(#2188e8)
  );
  background: -moz-linear-gradient(
    #ea38aa 0%,
    #ea38aa 33.332%,
    #44cc70 33.332%,
    #44cc70 66.667%,
    #2188e8 66.667%,
    #2188e8 100%
  );
  background: -o-linear-gradient(
    #ea38aa 0%,
    #ea38aa 33.332%,
    #44cc70 33.332%,
    #44cc70 66.667%,
    #2188e8 66.667%,
    #2188e8 100%
  );
  background: linear-gradient(
    #ea38aa 0%,
    #ea38aa 33.332%,
    #44cc70 33.332%,
    #44cc70 66.667%,
    #2188e8 66.667%,
    #2188e8 100%
  );
  background: var(--polysexual-image);
}

.AroAce {
  background: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#e68222),
    color-stop(20%, #e68222),
    color-stop(20%, #eec62d),
    color-stop(40%, #eec62d),
    color-stop(40%, #fff),
    color-stop(60%, #fff),
    color-stop(60%, #49a6d5),
    color-stop(80%, #49a6d5),
    color-stop(80%, #1c304b),
    to(#1c304b)
  );
  background: -moz-linear-gradient(
    #e68222 0%,
    #e68222 20%,
    #eec62d 20%,
    #eec62d 40%,
    #fff 40%,
    #fff 60%,
    #49a6d5 60%,
    #49a6d5 80%,
    #1c304b 80%,
    #1c304b 100%
  );
  background: -o-linear-gradient(
    #e68222 0%,
    #e68222 20%,
    #eec62d 20%,
    #eec62d 40%,
    #fff 40%,
    #fff 60%,
    #49a6d5 60%,
    #49a6d5 80%,
    #1c304b 80%,
    #1c304b 100%
  );
  background: linear-gradient(
    #e68222 0%,
    #e68222 20%,
    #eec62d 20%,
    #eec62d 40%,
    #fff 40%,
    #fff 60%,
    #49a6d5 60%,
    #49a6d5 80%,
    #1c304b 80%,
    #1c304b 100%
  );
  background: var(--aroace);
}

.Genderqueer {
  background: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#b390d6),
    color-stop(33.332%, #b390d6),
    color-stop(33.332%, #fff),
    color-stop(66.667%, #fff),
    color-stop(66.667%, #5d8437),
    to(#5d8437)
  );
  background: -moz-linear-gradient(
    #b390d6 0%,
    #b390d6 33.332%,
    #fff 33.332%,
    #fff 66.667%,
    #5d8437 66.667%,
    #5d8437 100%
  );
  background: -o-linear-gradient(
    #b390d6 0%,
    #b390d6 33.332%,
    #fff 33.332%,
    #fff 66.667%,
    #5d8437 66.667%,
    #5d8437 100%
  );
  background: linear-gradient(
    #b390d6 0%,
    #b390d6 33.332%,
    #fff 33.332%,
    #fff 66.667%,
    #5d8437 66.667%,
    #5d8437 100%
  );
  background: var(--genderqueer);
}

:root {
  --size: 5rem
}

.BannerGay:before {
  content: "";
  width: 100%;
  height: 5rem;
  height: var(--size);
  display: block;
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#d04b36),
    color-stop(16.6666%, #d04b36),
    color-stop(16.6666%, #e36511),
    color-stop(33.333%, #e36511),
    color-stop(33.333%, #ffba00),
    color-stop(50%, #ffba00),
    color-stop(50%, #00b180),
    color-stop(66.6666%, #00b180),
    color-stop(66.6666%, #147aab),
    color-stop(83.3333%, #147aab),
    color-stop(83.3333%, #675997),
    to(#675997)
  );
  background-image: -moz-linear-gradient(
    #d04b36 0%,
    #d04b36 16.6666%,
    #e36511 16.6666%,
    #e36511 33.333%,
    #ffba00 33.333%,
    #ffba00 50%,
    #00b180 50%,
    #00b180 66.6666%,
    #147aab 66.6666%,
    #147aab 83.3333%,
    #675997 83.3333%,
    #675997 100%
  );
  background-image: -o-linear-gradient(
    #d04b36 0%,
    #d04b36 16.6666%,
    #e36511 16.6666%,
    #e36511 33.333%,
    #ffba00 33.333%,
    #ffba00 50%,
    #00b180 50%,
    #00b180 66.6666%,
    #147aab 66.6666%,
    #147aab 83.3333%,
    #675997 83.3333%,
    #675997 100%
  );
  background-image: linear-gradient(
    #d04b36 0%,
    #d04b36 16.6666%,
    #e36511 16.6666%,
    #e36511 33.333%,
    #ffba00 33.333%,
    #ffba00 50%,
    #00b180 50%,
    #00b180 66.6666%,
    #147aab 66.6666%,
    #147aab 83.3333%,
    #675997 83.3333%,
    #675997 100%
  );
  background-image: var(--gay);
}

.BannerTrans:before {
  content: "";
  width: 100%;
  height: 5rem;
  height: var(--size);
  display: block;
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#4fa5c2),
    color-stop(20%, #4fa5c2),
    color-stop(20%, #f587ac),
    color-stop(40%, #f587ac),
    color-stop(40%, #f9fbfc),
    color-stop(60%, #f9fbfc),
    color-stop(60%, #f587ac),
    color-stop(80%, #f587ac),
    color-stop(80%, #4fa5c2),
    to(#4fa5c2)
  );
  background-image: -moz-linear-gradient(
    #4fa5c2 0%,
    #4fa5c2 20%,
    #f587ac 20%,
    #f587ac 40%,
    #f9fbfc 40%,
    #f9fbfc 60%,
    #f587ac 60%,
    #f587ac 80%,
    #4fa5c2 80%,
    #4fa5c2 100%
  );
  background-image: -o-linear-gradient(
    #4fa5c2 0%,
    #4fa5c2 20%,
    #f587ac 20%,
    #f587ac 40%,
    #f9fbfc 40%,
    #f9fbfc 60%,
    #f587ac 60%,
    #f587ac 80%,
    #4fa5c2 80%,
    #4fa5c2 100%
  );
  background-image: linear-gradient(
    #4fa5c2 0%,
    #4fa5c2 20%,
    #f587ac 20%,
    #f587ac 40%,
    #f9fbfc 40%,
    #f9fbfc 60%,
    #f587ac 60%,
    #f587ac 80%,
    #4fa5c2 80%,
    #4fa5c2 100%
  );
  background-image: var(--trans);
}

.BannerBiPlus:before {
  content: "";
  width: 100%;
  height: 5rem;
  height: var(--size);
  display: block;
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#c1357e),
    color-stop(40%, #c1357e),
    color-stop(40%, #675997),
    color-stop(60%, #675997),
    color-stop(60%, #0655a9),
    to(#0655a9)
  );
  background-image: -moz-linear-gradient(
    #c1357e 0%,
    #c1357e 40%,
    #675997 40%,
    #675997 60%,
    #0655a9 60%,
    #0655a9 100%
  );
  background-image: -o-linear-gradient(
    #c1357e 0%,
    #c1357e 40%,
    #675997 40%,
    #675997 60%,
    #0655a9 60%,
    #0655a9 100%
  );
  background-image: linear-gradient(
    #c1357e 0%,
    #c1357e 40%,
    #675997 40%,
    #675997 60%,
    #0655a9 60%,
    #0655a9 100%
  );
  background-image: var(--bi);
}

.BannerPansexual:before {
  content: "";
  width: 100%;
  height: 5rem;
  height: var(--size);
  display: block;
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#ea38aa),
    color-stop(33.332%, #ea38aa),
    color-stop(33.332%, #ffba00),
    color-stop(66.667%, #ffba00),
    color-stop(66.667%, #2188e8),
    to(#2188e8)
  );
  background-image: -moz-linear-gradient(
    #ea38aa 0%,
    #ea38aa 33.332%,
    #ffba00 33.332%,
    #ffba00 66.667%,
    #2188e8 66.667%,
    #2188e8 100%
  );
  background-image: -o-linear-gradient(
    #ea38aa 0%,
    #ea38aa 33.332%,
    #ffba00 33.332%,
    #ffba00 66.667%,
    #2188e8 66.667%,
    #2188e8 100%
  );
  background-image: linear-gradient(
    #ea38aa 0%,
    #ea38aa 33.332%,
    #ffba00 33.332%,
    #ffba00 66.667%,
    #2188e8 66.667%,
    #2188e8 100%
  );
  background-image: var(--pan);
}

.BannerAsexual:before {
  content: "";
  width: 100%;
  height: 5rem;
  height: var(--size);
  display: block;
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#222222),
    color-stop(20%, #222222),
    color-stop(20%, #a2a2a2),
    color-stop(40%, #a2a2a2),
    color-stop(40%, #f9fbfc),
    color-stop(60%, #f9fbfc),
    color-stop(60%, #a148a2),
    color-stop(80%, #a148a2),
    color-stop(80%, #222222),
    to(#222222)
  );
  background-image: -moz-linear-gradient(
    #222222 0%,
    #222222 20%,
    #a2a2a2 20%,
    #a2a2a2 40%,
    #f9fbfc 40%,
    #f9fbfc 60%,
    #a148a2 60%,
    #a148a2 80%,
    #222222 80%,
    #222222 100%
  );
  background-image: -o-linear-gradient(
    #222222 0%,
    #222222 20%,
    #a2a2a2 20%,
    #a2a2a2 40%,
    #f9fbfc 40%,
    #f9fbfc 60%,
    #a148a2 60%,
    #a148a2 80%,
    #222222 80%,
    #222222 100%
  );
  background-image: linear-gradient(
    #222222 0%,
    #222222 20%,
    #a2a2a2 20%,
    #a2a2a2 40%,
    #f9fbfc 40%,
    #f9fbfc 60%,
    #a148a2 60%,
    #a148a2 80%,
    #222222 80%,
    #222222 100%
  );
  background-image: var(--asex);
}

.BannerNonBinary:before {
  content: "";
  width: 100%;
  height: 5rem;
  height: var(--size);
  display: block;
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#f7e45a),
    color-stop(25%, #f7e45a),
    color-stop(25%, #f9fbfc),
    color-stop(50%, #f9fbfc),
    color-stop(50%, #675997),
    color-stop(75%, #675997),
    color-stop(75%, #222222),
    to(#222222)
  );
  background-image: -moz-linear-gradient(
    #f7e45a 0%,
    #f7e45a 25%,
    #f9fbfc 25%,
    #f9fbfc 50%,
    #675997 50%,
    #675997 75%,
    #222222 75%,
    #222222 100%
  );
  background-image: -o-linear-gradient(
    #f7e45a 0%,
    #f7e45a 25%,
    #f9fbfc 25%,
    #f9fbfc 50%,
    #675997 50%,
    #675997 75%,
    #222222 75%,
    #222222 100%
  );
  background-image: linear-gradient(
    #f7e45a 0%,
    #f7e45a 25%,
    #f9fbfc 25%,
    #f9fbfc 50%,
    #675997 50%,
    #675997 75%,
    #222222 75%,
    #222222 100%
  );
  background-image: var(--nb);
}

.BannerQueer:before {
  content: "";
  width: 100%;
  height: 5rem;
  height: var(--size);
  display: block;
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#000000),
    color-stop(8%, #000000),
    color-stop(8%, #99d9eb),
    color-stop(20%, #99d9eb),
    color-stop(20%, #00a2e6),
    color-stop(32%, #00a2e6),
    color-stop(32%, #b4e637),
    color-stop(44%, #b4e637),
    color-stop(44%, #fff),
    color-stop(56%, #fff),
    color-stop(56%, #ffba00),
    color-stop(68%, #ffba00),
    color-stop(68%, #fd6666),
    color-stop(80%, #fd6666),
    color-stop(80%, #ffafc8),
    color-stop(92%, #ffafc8),
    color-stop(92%, #000000),
    to(#000000)
  );
  background-image: -moz-linear-gradient(
    #000000 0%,
    #000000 8%,
    #99d9eb 8%,
    #99d9eb 20%,
    #00a2e6 20%,
    #00a2e6 32%,
    #b4e637 32%,
    #b4e637 44%,
    #fff 44%,
    #fff 56%,
    #ffba00 56%,
    #ffba00 68%,
    #fd6666 68%,
    #fd6666 80%,
    #ffafc8 80%,
    #ffafc8 92%,
    #000000 92%,
    #000000 100%
  );
  background-image: -o-linear-gradient(
    #000000 0%,
    #000000 8%,
    #99d9eb 8%,
    #99d9eb 20%,
    #00a2e6 20%,
    #00a2e6 32%,
    #b4e637 32%,
    #b4e637 44%,
    #fff 44%,
    #fff 56%,
    #ffba00 56%,
    #ffba00 68%,
    #fd6666 68%,
    #fd6666 80%,
    #ffafc8 80%,
    #ffafc8 92%,
    #000000 92%,
    #000000 100%
  );
  background-image: linear-gradient(
    #000000 0%,
    #000000 8%,
    #99d9eb 8%,
    #99d9eb 20%,
    #00a2e6 20%,
    #00a2e6 32%,
    #b4e637 32%,
    #b4e637 44%,
    #fff 44%,
    #fff 56%,
    #ffba00 56%,
    #ffba00 68%,
    #fd6666 68%,
    #fd6666 80%,
    #ffafc8 80%,
    #ffafc8 92%,
    #000000 92%,
    #000000 100%
  );
  background-image: var(--queer);
}

.BannerGayMale:before {
  content: "";
  width: 100%;
  height: 5rem;
  height: var(--size);
  display: block;
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#007c6b),
    color-stop(14.28%, #007c6b),
    color-stop(14.28%, #40a4a5),
    color-stop(28.58%, #40a4a5),
    color-stop(28.58%, #59c8d2),
    color-stop(42.87%, #59c8d2),
    color-stop(42.87%, #f0efff),
    color-stop(57.16%, #f0efff),
    color-stop(57.16%, #7aade0),
    color-stop(71.45%, #7aade0),
    color-stop(71.45%, #0b83c9),
    color-stop(85.74%, #0b83c9),
    color-stop(85.74%, #04336f),
    to(#04336f)
  );
  background-image: -moz-linear-gradient(
    #007c6b 0%,
    #007c6b 14.28%,
    #40a4a5 14.28%,
    #40a4a5 28.58%,
    #59c8d2 28.58%,
    #59c8d2 42.87%,
    #f0efff 42.87%,
    #f0efff 57.16%,
    #7aade0 57.16%,
    #7aade0 71.45%,
    #0b83c9 71.45%,
    #0b83c9 85.74%,
    #04336f 85.74%,
    #04336f 100%
  );
  background-image: -o-linear-gradient(
    #007c6b 0%,
    #007c6b 14.28%,
    #40a4a5 14.28%,
    #40a4a5 28.58%,
    #59c8d2 28.58%,
    #59c8d2 42.87%,
    #f0efff 42.87%,
    #f0efff 57.16%,
    #7aade0 57.16%,
    #7aade0 71.45%,
    #0b83c9 71.45%,
    #0b83c9 85.74%,
    #04336f 85.74%,
    #04336f 100%
  );
  background-image: linear-gradient(
    #007c6b 0%,
    #007c6b 14.28%,
    #40a4a5 14.28%,
    #40a4a5 28.58%,
    #59c8d2 28.58%,
    #59c8d2 42.87%,
    #f0efff 42.87%,
    #f0efff 57.16%,
    #7aade0 57.16%,
    #7aade0 71.45%,
    #0b83c9 71.45%,
    #0b83c9 85.74%,
    #04336f 85.74%,
    #04336f 100%
  );
  background-image: var(--gaymen);
}

.BannerGenderFluid:before {
  content: "";
  width: 100%;
  height: 5rem;
  height: var(--size);
  display: block;
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#f39ec1),
    color-stop(20%, #f39ec1),
    color-stop(20%, #ffffff),
    color-stop(40%, #ffffff),
    color-stop(40%, #a74a95),
    color-stop(60%, #a74a95),
    color-stop(60%, #000000),
    color-stop(80%, #000000),
    color-stop(80%, #0068b5),
    to(#0068b5)
  );
  background-image: -moz-linear-gradient(
    #f39ec1 0%,
    #f39ec1 20%,
    #ffffff 20%,
    #ffffff 40%,
    #a74a95 40%,
    #a74a95 60%,
    #000000 60%,
    #000000 80%,
    #0068b5 80%,
    #0068b5 100%
  );
  background-image: -o-linear-gradient(
    #f39ec1 0%,
    #f39ec1 20%,
    #ffffff 20%,
    #ffffff 40%,
    #a74a95 40%,
    #a74a95 60%,
    #000000 60%,
    #000000 80%,
    #0068b5 80%,
    #0068b5 100%
  );
  background-image: linear-gradient(
    #f39ec1 0%,
    #f39ec1 20%,
    #ffffff 20%,
    #ffffff 40%,
    #a74a95 40%,
    #a74a95 60%,
    #000000 60%,
    #000000 80%,
    #0068b5 80%,
    #0068b5 100%
  );
  background-image: var(--genderfluid);
}

.BannerAgender:before {
  content: "";
  width: 100%;
  height: 5rem;
  height: var(--size);
  display: block;
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#000000),
    color-stop(14.28%, #000000),
    color-stop(14.28%, #b9b9b9),
    color-stop(28.58%, #b9b9b9),
    color-stop(28.58%, #fff),
    color-stop(42.87%, #fff),
    color-stop(42.87%, #b8f58a),
    color-stop(57.16%, #b8f58a),
    color-stop(57.16%, #fff),
    color-stop(71.45%, #fff),
    color-stop(71.45%, #b9b9b9),
    color-stop(85.74%, #b9b9b9),
    color-stop(85.74%, #000000),
    to(#000000)
  );
  background-image: -moz-linear-gradient(
    #000000 0%,
    #000000 14.28%,
    #b9b9b9 14.28%,
    #b9b9b9 28.58%,
    #fff 28.58%,
    #fff 42.87%,
    #b8f58a 42.87%,
    #b8f58a 57.16%,
    #fff 57.16%,
    #fff 71.45%,
    #b9b9b9 71.45%,
    #b9b9b9 85.74%,
    #000000 85.74%,
    #000000 100%
  );
  background-image: -o-linear-gradient(
    #000000 0%,
    #000000 14.28%,
    #b9b9b9 14.28%,
    #b9b9b9 28.58%,
    #fff 28.58%,
    #fff 42.87%,
    #b8f58a 42.87%,
    #b8f58a 57.16%,
    #fff 57.16%,
    #fff 71.45%,
    #b9b9b9 71.45%,
    #b9b9b9 85.74%,
    #000000 85.74%,
    #000000 100%
  );
  background-image: linear-gradient(
    #000000 0%,
    #000000 14.28%,
    #b9b9b9 14.28%,
    #b9b9b9 28.58%,
    #fff 28.58%,
    #fff 42.87%,
    #b8f58a 42.87%,
    #b8f58a 57.16%,
    #fff 57.16%,
    #fff 71.45%,
    #b9b9b9 71.45%,
    #b9b9b9 85.74%,
    #000000 85.74%,
    #000000 100%
  );
  background-image: var(--agender);
}

.BannerIntersex:before {
  content: "";
  width: 100%;
  height: 5rem;
  height: var(--size);
  display: block;
  background-image: -moz-repeating-radial-gradient(
    center,
    circle,
    #ffba00,
    #ffba00 10%,
    #675997 10%,
    #675997 15%,
    #ffba00 15%,
    #ffba00 100%
  );
  background-image: -o-repeating-radial-gradient(
    center,
    circle,
    #ffba00,
    #ffba00 10%,
    #675997 10%,
    #675997 15%,
    #ffba00 15%,
    #ffba00 100%
  );
  background-image: repeating-radial-gradient(
    circle at center,
    #ffba00,
    #ffba00 10%,
    #675997 10%,
    #675997 15%,
    #ffba00 15%,
    #ffba00 100%
  );
  background-image: var(--intersex);
}

.BannerLesbian:before {
  content: "";
  width: 100%;
  height: 5rem;
  height: var(--size);
  display: block;
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#d82c01),
    color-stop(14.28%, #d82c01),
    color-stop(14.28%, #f1752c),
    color-stop(28.58%, #f1752c),
    color-stop(28.58%, #ff985b),
    color-stop(42.87%, #ff985b),
    color-stop(42.87%, #ffffff),
    color-stop(57.16%, #ffffff),
    color-stop(57.16%, #d162a3),
    color-stop(71.45%, #d162a3),
    color-stop(71.45%, #b75591),
    color-stop(85.74%, #b75591),
    color-stop(85.74%, #a60260),
    to(#a60260)
  );
  background-image: -moz-linear-gradient(
    #d82c01 0%,
    #d82c01 14.28%,
    #f1752c 14.28%,
    #f1752c 28.58%,
    #ff985b 28.58%,
    #ff985b 42.87%,
    #ffffff 42.87%,
    #ffffff 57.16%,
    #d162a3 57.16%,
    #d162a3 71.45%,
    #b75591 71.45%,
    #b75591 85.74%,
    #a60260 85.74%,
    #a60260 100%
  );
  background-image: -o-linear-gradient(
    #d82c01 0%,
    #d82c01 14.28%,
    #f1752c 14.28%,
    #f1752c 28.58%,
    #ff985b 28.58%,
    #ff985b 42.87%,
    #ffffff 42.87%,
    #ffffff 57.16%,
    #d162a3 57.16%,
    #d162a3 71.45%,
    #b75591 71.45%,
    #b75591 85.74%,
    #a60260 85.74%,
    #a60260 100%
  );
  background-image: linear-gradient(
    #d82c01 0%,
    #d82c01 14.28%,
    #f1752c 14.28%,
    #f1752c 28.58%,
    #ff985b 28.58%,
    #ff985b 42.87%,
    #ffffff 42.87%,
    #ffffff 57.16%,
    #d162a3 57.16%,
    #d162a3 71.45%,
    #b75591 71.45%,
    #b75591 85.74%,
    #a60260 85.74%,
    #a60260 100%
  );
  background-image: var(--lesbian);
}

.BannerPolyamorous:before {
  content: "";
  width: 100%;
  height: 5rem;
  height: var(--size);
  display: block;
  background: no-repeat
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40' width='40'%3E%3Cstyle%3E.y%7Bfill:%23ffea6f%7D%3C/style%3E%3Ctext x='0' y='30' font-size='40' class='y'%3Eπ%3C/text%3E%3C/svg%3E")
      center center,
    -webkit-gradient(
      linear,
      left top, left bottom,
      from(#14abea),
      color-stop(40%, #14abea),
      color-stop(40%, #fd2142),
      color-stop(60%, #fd2142),
      color-stop(60%, #181919),
      to(#181919)
    );
  background: no-repeat
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40' width='40'%3E%3Cstyle%3E.y%7Bfill:%23ffea6f%7D%3C/style%3E%3Ctext x='0' y='30' font-size='40' class='y'%3Eπ%3C/text%3E%3C/svg%3E")
      center center,
    -moz-linear-gradient(
      #14abea 0%,
      #14abea 40%,
      #fd2142 40%,
      #fd2142 60%,
      #181919 60%,
      #181919 100%
    );
  background: no-repeat
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40' width='40'%3E%3Cstyle%3E.y%7Bfill:%23ffea6f%7D%3C/style%3E%3Ctext x='0' y='30' font-size='40' class='y'%3Eπ%3C/text%3E%3C/svg%3E")
      center center,
    -o-linear-gradient(
      #14abea 0%,
      #14abea 40%,
      #fd2142 40%,
      #fd2142 60%,
      #181919 60%,
      #181919 100%
    );
  background: no-repeat
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40' width='40'%3E%3Cstyle%3E.y%7Bfill:%23ffea6f%7D%3C/style%3E%3Ctext x='0' y='30' font-size='40' class='y'%3Eπ%3C/text%3E%3C/svg%3E")
      center center,
    linear-gradient(
      #14abea 0%,
      #14abea 40%,
      #fd2142 40%,
      #fd2142 60%,
      #181919 60%,
      #181919 100%
    );
  background: var(--polyamorous);
}

.BannerOmnisexual:before {
  content: "";
  width: 100%;
  height: 5rem;
  height: var(--size);
  display: block;
  background: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#ff92c5),
    color-stop(20%, #ff92c5),
    color-stop(20%, #ff4ab3),
    color-stop(40%, #ff4ab3),
    color-stop(40%, #24033c),
    color-stop(60%, #24033c),
    color-stop(60%, #5855f8),
    color-stop(80%, #5855f8),
    color-stop(80%, #7b9dfb),
    to(#7b9dfb)
  );
  background: -moz-linear-gradient(
    #ff92c5 0%,
    #ff92c5 20%,
    #ff4ab3 20%,
    #ff4ab3 40%,
    #24033c 40%,
    #24033c 60%,
    #5855f8 60%,
    #5855f8 80%,
    #7b9dfb 80%,
    #7b9dfb 100%
  );
  background: -o-linear-gradient(
    #ff92c5 0%,
    #ff92c5 20%,
    #ff4ab3 20%,
    #ff4ab3 40%,
    #24033c 40%,
    #24033c 60%,
    #5855f8 60%,
    #5855f8 80%,
    #7b9dfb 80%,
    #7b9dfb 100%
  );
  background: linear-gradient(
    #ff92c5 0%,
    #ff92c5 20%,
    #ff4ab3 20%,
    #ff4ab3 40%,
    #24033c 40%,
    #24033c 60%,
    #5855f8 60%,
    #5855f8 80%,
    #7b9dfb 80%,
    #7b9dfb 100%
  );
  background: var(--omni);
}

.BannerPolysexual:before {
  content: "";
  width: 100%;
  height: 5rem;
  height: var(--size);
  display: block;
  background: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#ea38aa),
    color-stop(33.332%, #ea38aa),
    color-stop(33.332%, #44cc70),
    color-stop(66.667%, #44cc70),
    color-stop(66.667%, #2188e8),
    to(#2188e8)
  );
  background: -moz-linear-gradient(
    #ea38aa 0%,
    #ea38aa 33.332%,
    #44cc70 33.332%,
    #44cc70 66.667%,
    #2188e8 66.667%,
    #2188e8 100%
  );
  background: -o-linear-gradient(
    #ea38aa 0%,
    #ea38aa 33.332%,
    #44cc70 33.332%,
    #44cc70 66.667%,
    #2188e8 66.667%,
    #2188e8 100%
  );
  background: linear-gradient(
    #ea38aa 0%,
    #ea38aa 33.332%,
    #44cc70 33.332%,
    #44cc70 66.667%,
    #2188e8 66.667%,
    #2188e8 100%
  );
  background: var(--polysexual-image);
}

.BannerAroAce:before {
  content: "";
  width: 100%;
  height: 5rem;
  height: var(--size);
  display: block;
  background: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#e68222),
    color-stop(20%, #e68222),
    color-stop(20%, #eec62d),
    color-stop(40%, #eec62d),
    color-stop(40%, #fff),
    color-stop(60%, #fff),
    color-stop(60%, #49a6d5),
    color-stop(80%, #49a6d5),
    color-stop(80%, #1c304b),
    to(#1c304b)
  );
  background: -moz-linear-gradient(
    #e68222 0%,
    #e68222 20%,
    #eec62d 20%,
    #eec62d 40%,
    #fff 40%,
    #fff 60%,
    #49a6d5 60%,
    #49a6d5 80%,
    #1c304b 80%,
    #1c304b 100%
  );
  background: -o-linear-gradient(
    #e68222 0%,
    #e68222 20%,
    #eec62d 20%,
    #eec62d 40%,
    #fff 40%,
    #fff 60%,
    #49a6d5 60%,
    #49a6d5 80%,
    #1c304b 80%,
    #1c304b 100%
  );
  background: linear-gradient(
    #e68222 0%,
    #e68222 20%,
    #eec62d 20%,
    #eec62d 40%,
    #fff 40%,
    #fff 60%,
    #49a6d5 60%,
    #49a6d5 80%,
    #1c304b 80%,
    #1c304b 100%
  );
  background: var(--aroace);
}

.BannerGenderqueer:before {
  content: "";
  width: 100%;
  height: 5rem;
  height: var(--size);
  display: block;
  background: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#b390d6),
    color-stop(33.332%, #b390d6),
    color-stop(33.332%, #fff),
    color-stop(66.667%, #fff),
    color-stop(66.667%, #5d8437),
    to(#5d8437)
  );
  background: -moz-linear-gradient(
    #b390d6 0%,
    #b390d6 33.332%,
    #fff 33.332%,
    #fff 66.667%,
    #5d8437 66.667%,
    #5d8437 100%
  );
  background: -o-linear-gradient(
    #b390d6 0%,
    #b390d6 33.332%,
    #fff 33.332%,
    #fff 66.667%,
    #5d8437 66.667%,
    #5d8437 100%
  );
  background: linear-gradient(
    #b390d6 0%,
    #b390d6 33.332%,
    #fff 33.332%,
    #fff 66.667%,
    #5d8437 66.667%,
    #5d8437 100%
  );
  background: var(--genderqueer);
}