<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">:root {
    --fusion-aquamarine: #5effd8;
    --aquamarine-transparent: rgba(138, 238, 216, 0.24);
    --fusion-pink: #ff7fff;
    --fusion-blue: #5facff;
    --fusion-purple: #c34df1;
    --fusion-gray: #949494;
    --democracy-first-blue: #1a2a5e;
    --underlining-duration: 0.55s;
    --font-border-width: 4px;
    --z-body: 3;
    --z-nav: 10; /*  Always above any body content, but not modals */
    --container-max-width: 800px;
  	--containerw-max-width: 1600px;
    --near-top: 300px; /* When should the nav bar always be visible? 5rem. */
    /* The panels are like accordions, except that they're slightly disconnected. */
    --panel-background-color: #f1f1f1;
    --panel-small-border-radius: 2px;
    --panel-large-border-radius: 8px;
}

body {
    font-family: 'Open Sans', sans-serif;
}

.democracy-first h1, .democracy-first h2, .democracy-first h3, .democracy-first h4, .democracy-first h5 {
    font-family: 'Poppins';
}

html, body {
    overflow-x: clip;
}

h1, h2, h3, h4, h5, p {
    /* Avoid things accidentally covering up our text */
    z-index: calc(var(--z-body) + 2);
    scroll-margin-top: 70px;
}

.massive {
    font-size: 2.5rem;
}

/* These were taken from Bootstrap 5 utilities */
.fs-1 {
    font-size: calc(1.375rem + 1.5vw) !important;
}

.float-end {
    float: right !important;
}

@media (min-width: 1200px) {
    .fs-1 {
        font-size: 2.5rem !important;
    }
}

.fs-5 {
    font-size: 1.25rem !important;
}

@media (min-width: 768px) {
    .massive {
        font-size: 2.75rem;
    }
}

@media (min-width: 992px) {
    .massive {
        font-size: 3rem;
    }
}

@media (min-width: 1200px) {
    .massive {
        font-size: 3.25rem;
    }
}

@media (min-width: 1400px) {
    .massive {
        font-size: 3.5rem;
    }
}

.svg-circle {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(25%, 25%);
}

.container {
    max-width: var(--container-max-width);
    margin-right: auto;
    margin-left: auto;
}

.containerw {
    max-width: var(--containerw-max-width);
    margin-right: auto;
    margin-left: auto;
}

.container, .container-fluid {
    z-index: var(--z-body);
    position: relative;
}

.container-fluid video {
    /* The video and images are causing the row to become too tall, making the surrounding text ugly*/
    max-height: 340px;
}

.container-fluid img.h-100 {
    max-height: 240px;
}

.container-fluid img.w-100 {
    max-width: 450px;
}

.container p img {
    max-width: 100%;
}

.container.content-pages-show-basic-wide {
    margin-left: 0;
    margin-right: 0;
}

.w-1600 {
    max-width: 1600px;
}

.w-800 {
    max-width: 800px;
}

.w-inf {
    max-width: inherit;
}

ol, ul {
    padding-left: 2rem;
}


@media (max-width: 767px) {
    .rrr_logo {
        max-width: 200px;
    }
}


.bg-glass {
    background-color: rgba(190, 190, 190, 0.3); /* Semi-transparent white for glass effect */
    backdrop-filter: blur(5px); /* Blur effect for the background */
    border-width: 1px;
    border-top-width: 0;
    border-color: rgba(224, 224, 224, 0.5); /* Light border for the glass edges */
    box-shadow: inset 0 4px 4px rgba(176, 175, 175, 0.6), /* Inner top light */ inset 0 -4px 4px rgba(0, 0, 0, 0.1), /* Inner bottom shadow */ 0 8px 16px rgba(0, 0, 0, 0.1); /* Drop shadow for depth */
}

.bg-glass-opaque {
    background-color: rgba(211, 248, 244, 0.9);
    border-color: rgba(224, 224, 224, 0.7); /* Light border for the glass edges */
    box-shadow: inset 0 4px 4px rgba(176, 175, 175, 0.8), /* Inner top light */ inset 0 -4px 4px rgba(0, 0, 0, 0.3), /* Inner bottom shadow */ 0 8px 16px rgba(0, 0, 0, 0.3); /* Drop shadow for depth */
}

.democracy-first .bg-glass-opaque {
    background-color: rgba(157, 159, 232, 0.53);
}

.bg-pink-glass {
    background: linear-gradient(135deg, rgba(193, 169, 197, 0.53), rgba(221, 157, 232, 0.53));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 35px 0 rgba(31, 38, 135, 0.27);
}

figcaption {
    display: inline-block;
}

.tab-caption {
    padding: 0.5rem 1rem;
    background-color: #f1f9fc91; /* Light gray background color */
    border-radius: 0 0 10px 10px; /* Rounded bottom corners */
    margin-left: 5px;
    margin-top: 0px; /* Pulls the caption up to cover the gap */
    position: relative; /* Allows the caption to overlap the image */
    box-shadow: 0 8px 16px rgba(140, 165, 168, 0.1); /* Drop shadow for depth */;
}

.tab-caption a {
    color: var(--bs-secondary-color);
}

.minor-decoration, .no-decorate {
    color: inherit;
    text-decoration: inherit;
}

.minor-decoration:hover {
    text-decoration: underline;
}

.no-decorate:hover {
    color: inherit;
    text-decoration: inherit;
}

nav {
    z-index: var(--z-nav);
    border-radius: 2px;
}

nav.navbar {
    padding-left: 0;
    padding-right: 0;
    position: fixed;
    transition: transform 0.8s .1s ease,
    background-color 3s ease,
    border-color 3s ease,
    box-shadow 3s ease;
}

.nav-link {
    color: rgba(0, 0, 0, 0.65) !important;
}

.hide-nav-bar {
    transform: translateY(-120%);
}

nav ul {
    padding: 0;
    margin: 0;
}

nav li {
    margin-right: 20px;
    padding: 7px;
    border-radius: 2px;
    transition: background-color 0.00s ease-in-out, transform 0.4s ease-in-out;
}

nav li:hover {
    color: #000; /* Color of text on hover, change as you like */
    background: rgba(255, 255, 255, 0.2); /* Slight hover background */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Shadow for depth */
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    background-color: rgba(211, 248, 244, 0.97);
}

.dropdown-menu ul {
    list-style: none;
}

.dropdown-menu li {
    border-radius: 4px;
}

.dropdown-item {
    padding-right: 4px;
}

.dropdown-item ul {
    width: max-content;
    max-width: 100%;
    font-size: 0.75rem;
    pointer-events: none;  /* Don't hover separately. The parent is already an &lt;a&gt; */
}

.dropdown-item li {
    margin-right: 0;
}

.dropdown-item:hover {
    background-color: rgba(228, 248, 245, 0.83);
    border-radius: 4px;
}

ul.dropdown-menu {
    margin-top: 0.125rem;
}

.dropdown-menu, .dropdown-menu li {
    z-index: var(--z-body) +5;
}

.dropdown-menu-end {
    right: 5px;
}

.dropdown-divider, hr.divider {
    border-color: var(--fusion-purple);
}

.dropdown-divider:hover {
    box-shadow: none;
}

.divider:hover, hr.divider {
    box-shadow: none;
}

.logo {
    height: 33px;
    width: auto;
}

li.thumbnail-blog-preview {
    border-radius: 4px;
    border-bottom: 2px solid #c8ced2;
}

@media (min-width: 576px) {
    footer ul {
        list-style: none;
    }
}

footer ul a {
    color: inherit;
    text-decoration: inherit;
}

footer ul a:hover {
    text-decoration: underline;
}

.icons {
    font-size: 24px;
    color: gray;
}

.icons svg {
    width: 30px;
    height: 30px;
}

.icons svg:hover {
    cursor: pointer;
    animation: neon-pink-glow 15s ease-in-out infinite alternate;
    color: gray;
}

.icons li {
    display: inline-block;
}

.neon-pink:hover {
    animation: neon-pink-glow 15s ease-in-out infinite alternate;
}

@keyframes neon-pink-glow {
    from {
        filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff) drop-shadow(0 0 30px #fff) drop-shadow(0 0 40px #F897E9EA) /*drop-shadow(0 0 70px #F897E9EA)
            drop-shadow(0 0 80px #F897E9EA)
            drop-shadow(0 0 100px #F897E9EA)
            drop-shadow(0 0 150px #F897E9EA);*/
    }
    to {
        filter: drop-shadow(0 0 5px #F897E9EA) drop-shadow(0 0 10px #F897E9EA) drop-shadow(0 0 15px #fff) drop-shadow(0 0 20px #F897E9EA) drop-shadow(0 0 35px #F897E9EA) drop-shadow(0 0 40px #F897E9EA) /*drop-shadow(0 0 50px #F897E9EA)
            drop-shadow(0 0 75px #F897E9EA);*/
    }
}

header {
    position: relative;
    padding-top: 15px;
}

.header-container {
    position: relative;
    min-height: 200px;
}

.header-container img {
    /* Our header images are chosen to be 4:1, and we wish for it to be 2.25 Ã— the line height used later. */
    height: max(200px, calc(1.125 * 0.25 * 100vw));
    max-height: 240px;
    width: 100%;
    object-fit: cover;
}

.header-content {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.democracy-first header {
    background-color: var(--democracy-first-blue);
    color: white;
}

header h1 {
    width: 100%;
    font-size: 4rem;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

header .fs-scale {
    font-size: 2.25rem;
}

/* These media sizes are based on https://getbootstrap.com/docs/5.0/layout/breakpoints/ */
@media (min-width: 576px) {
    header .fs-scale {
        font-size: 4rem;
    }
}

header .fs-scale-3-lines {
    font-size: 2.2rem;
}

header .fs-scale-extra-long {
    font-size: calc(min(4rem, max(5vw, 30px)));
}

h1.nicokaku {
    text-shadow: 2px 0 var(--font-border-width) rgba(176, 175, 175, 0.8),
    -2px 0 var(--font-border-width) rgba(176, 175, 175, 0.8),
    0 2px var(--font-border-width) rgba(176, 175, 175, 0.8),
    0 -2px var(--font-border-width) rgba(176, 175, 175, 0.8);
}

/* These media sizes are based on https://getbootstrap.com/docs/5.0/layout/breakpoints/ */
@media (min-width: 576px) {
    header h1 {
        font-size: 5rem;
    }
}

@media (min-width: 768px) {
    header h1 {
        font-size: 6rem;
    }

    .wide-dropdown {
        position: absolute;
        left: 0;
        width: max-content;
        min-width: 100%;
    }

    ul.grid-list {
        display: grid;
        /* Unfortunately we need an explicit number of columns here */
        grid-template-columns: repeat(2, minmax(100px, 1fr));
        gap: 0;
        list-style-type: none;
    }

    .grid-list li {
        padding-top: 3.5px;
        padding-bottom: 3.5px;
    }

    .grid-list .dropdown-item {
        white-space: normal;  /* Allow wrapping */
        max-width: 213px;  /* Calibrated for Fair + Inclusive Society */
    }
}

@media (min-width: 992px) {
    header h1 {
        font-size: 7rem;
    }

    ul.grid-list {
        /* Unfortunately we need an explicit number of columns here */
        grid-template-columns: repeat(3, minmax(100px, 1fr));
    }
}

@media (min-width: 1400px) {
    ul.grid-list {
        /* Unfortunately we need an explicit number of columns here */
        grid-template-columns: repeat(4, minmax(100px, 1fr));
    }
}

header.container-fluid {
    /* Space under the horizontal, site nav */
    padding-top: 5rem;
}

.sidebar {
    position: sticky;
    top: 4.5rem; /* Enough room for nav */
    height: calc(100vh - 4.5rem);
    overflow-y: hidden;
}

.logo-wrapper {
    display: inline-flex;
    width: 65%;
    position: relative; /* It will be relative to the container now */
    margin-left: auto;
}

.logo-wrapper img {
    width: 100%;
    height: auto;
}

.video {
    display: grid;
    place-items: center;
    /* Above this width, an ugly, thick black border surrounds the thumbnail */
    max-width: calc(min(85vw, 639px));
    box-shadow: 0 4px 14px rgba(176, 175, 175, 0.6),
    0 -4px 14px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.1);
}

.video iframe {
    aspect-ratio: calc(560 / 315);
    width: 100%;
    z-index: 3;
}

/* Ensure the value cards are within a container that controls their width */
.values-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* Adjust gap as needed */
}

.card-body img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    overflow: hidden;
    margin-bottom: 0;
}

.card-title {
    margin-bottom: 0;
}

@font-face {
    font-family: 'NicoKaku_subset';
    /* This only has the glyphs we're actually using. https://stackoverflow.com/a/66238793/1495729 */
    src: url('https://fusionparty.space/fonts/nicokaku_v2_subset.ttf') format('truetype');
}

.nicokaku {
    color: white;
    font-family: 'NicoKaku_subset', 'Dosis', sans-serif;
}

.open-sans {
    font-family: "Open Sans", sans-serif;
}

.inter {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" 0;
}

h2.inter {
    font-weight: 500;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

@keyframes bolden {
    to {
        font-weight: 700;
    }
}

.bolden {
    font-weight: 600;
    animation: bolden 0.7s forwards ease;
}

.fw-700 {
    font-weight: 700 !important;
}

.fw-900 {
    /* h2 and smaller */
    font-weight: 900;
}

.fw-1000 {
    /* h1 */
    font-weight: 1000 !important;
}

.h-underline {
    position: relative;
    display: inline-block; /* Allows the pseudo-element to align with text */
}

.h-underline::after {
    content: '';
    display: block;
    width: 0; /* Start invisible */
    background-color: currentColor; /* Use the color of the text */
    position: absolute;
    left: 0;
    transition: width var(--underlining-duration) ease-in;
}


.h-underline-animate::after {
    width: 100%; /* Full underline */
}

.transition-delay::after {
    transition-delay: calc(var(--underlining-duration) / 2);
}

h2 {
    font-weight: bold;
}

h1.h-underline {
    padding-bottom: 7px;
}

h2.h-underline {
    padding-bottom: 5px;
}

h1::after, h2::after, h3:after, h4:after {
    height: 5px; /* Thickness of the underline */
    border-radius: 4px;
}

h1::after {
    height: 7px;
}

h5.h-underline {
    padding-bottom: 3px;
}

.h-underline h5::after {
    height: 3px;
}

.h-aquamarine::after {
    background-color: var(--fusion-aquamarine);
}

.bg-plasma {
    background-image: url('https://fusionparty.space/images/horizontal_plasma.webp');
    background-size: cover; /* Cover the entire area of the element */
    background-position: center; /* Center the background image */
}

.bg-plasma-top {
    background-image: url('https://fusionparty.space/images/horizontal_plasma_top.webp');
    background-size: cover; /* Cover the entire area of the element */
    background-position: center; /* Center the background image */
}

.bg-plasma-3 {
    background-image: url('https://fusionparty.space/images/plasma-3.webp');
    background-size: cover; /* Cover the entire area of the element */
    background-position: center; /* Center the background image */
}

.bg-plasma-4 {
    background-image: url('https://fusionparty.space/images/water-plasma.webp');
    background-size: cover; /* Cover the entire area of the element */
    background-position: center; /* Center the background image */
}

.bg-underwater {
    background-image: url('https://fusionparty.space/images/underwater_blue.webp');
    background-size: cover;
    background-position: center;
}

.bg-coral {
    background-image: url('https://fusionparty.space/images/coral_background_2.webp');
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* Add padding to the gallery */
.gallery {
    max-height: 30vh;
    max-width: 1500px;
}


.gallery-height {
    max-height: 28vh;
}

/* Ensure consistent height behavior */
.gallery-wrapper {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* Maintain equal heights for images */
    padding-bottom: 15px; /* Ensure space at the bottom */
}

/* Ensure the images fill the container */
.gallery-wrapper img {
    object-fit: cover; /* Ensure image covers the container */
    width: 100%;
    height: 100%; /* Force the image to take up the full height */
}

.bg-aquamarine {
    background-color: rgba(138, 238, 216, 0.73);
}

button.bg-aquamarine:hover {
    background-color: rgba(89, 217, 217, 0.85);
}

.bg-aquamarine-transparent {
    background-color: var(--aquamarine-transparent);
    margin: 0;
    padding: 0;
    box-shadow: 0 4px 15px 0 rgba(31, 38, 135, 0.1);
}

.bg-blue-gray-transparent {
    background-color: #e9fbfab0;
}

.bg-gray-transparent {
    background-color: rgba(167, 173, 172, 0.73);
    color: white;
}

.bg-opal {
    background-color: #46d3e0;
}

button.bg-opal:hover {
    /* This is the background-color for btn-info in Bootstrap 5 */
    background-color: #31d2f2 !important;
}

.h-pink::after {
    background-color: var(--fusion-pink);
}

.h-blue::after {
    background-color: var(--fusion-blue);
}

.h-purple::after {
    background-color: var(--fusion-purple);
}

.h-gray::after {
    background-color: var(--fusion-gray);
}

.h-red::after {
    background-color: var(--fusion-red);
}

.bg-blue {
    background-color: var(--fusion-blue);
}

.bg-blue-green {
    background-color: rgba(57, 164, 161, 0.84);
}

.bg-purple {
    background-color: var(--fusion-purple);
    color: white;
}

.bg-purple:hover {
    background-color: #a20dd7;
    color: white;
}

.bg-pink {
    background-color: #ff7fff;
    color: white;
    border-color: #d249d2;
}

.bg-red {
    background-color: #FF0000;
    color: white;
    border-color: #d249d2;
}

.bg-pink:hover {
    background-color: #dc63dc;
    color: white;
    border-color: #d249d2;
}

button.bg-purple, button.bg-purple:hover {
    border-color: #780a9d;
}

a.bg-purple, a.bg-purple:hover {
    border-color: #780a9d;
}

a.uncolored {
    color: inherit;
    :hover {
        text-decoration: underline;
    }
}

.bg-gray-mist {
    /* This is the top-left of bg-pink-mist */
    background-image: url('https://fusionparty.space/images/gray_mist.webp');
    background-size: cover; /* Cover the entire area of the element */
    background-position: center; /* Center the background image */
    background-attachment: fixed; /* Fixed to the viewport rather than the HTML page, so it doesn't look stretched. */
}

.bg-transparent {
    background-color: transparent;
}

input.bg-white {
    background-color: white;
}


input.form-control {
    height: calc(3.5rem + calc(var(--bs-border-width) * 2));
}

blockquote {
    background-color: var(--aquamarine-transparent);
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border-radius: 0.25rem;
}

.badge-row {
    align-items: center;
    display: flex;
    flex-direction: row;
}

.badged-heading {
    justify-content: flex-start;
    display: flex;
}

.badge {
    /* Nationbuilder was making these small and heavy */
    font-size: inherit;
    font-weight: inherit;
}

.badge img {
  height: inherit;  /* Override the scaling of the hero image */
}

.badge {
  max-height: 5rem;
  max-width: 6rem;
}

.img-small
{
	max-height: 2rem;
  width: 100%;
}

header .badges {
  display: flex;
  flex-direction: column;
  margin-top: 1.5rem;
  gap: 1rem;
  margin-left: 2vw;
}

header .badge-secondary {
  padding: 0.5rem;
  font-size: 1.5rem;
  max-width: 9rem;
  text-transform: uppercase;
}


@media (min-width: 768px) {
    header .badges {
        flex-direction: row;
        align-items: center;
        margin-left: 0.5vw;
        margin-right: 2vw;
    }

    header .badge-secondary {
      padding: 0.75rem;
      font-size: 2rem;
    }
}

.fakedonations{
  min-height: 1500px;
}

.page-pages-show-donation-v2-wide .donation-v2-amounts &gt; div {
    position: relative;
}

.page-pages-show-donation-v2-wide .donation-v2-amounts input[type="radio"] {
    display: none;
}

.page-pages-show-donation-v2-wide .donation-v2-amounts label.radio {
    border-radius: 2px;
    /* todo: these labels should be more like the primary hover */
    background-color: rgba(0, 60, 113, 0.17);

    display: inline-block;
    min-width: 80px;
    padding: 15px 5px;

    font-size: 19px;
    text-align: center;

    margin: 5px 5px 5px 0;
}

.page-pages-show-donation-v2-wide .donation-v2-amounts .custom-control-label::before {
    content: none;
}

.page-pages-show-donation-v2-wide .donation-v2-amounts .custom-control-label::after {
    content: none;
}

.page-pages-show-donation-v2-wide .donation-v2-amounts .custom-control {
    padding-left: 0;
}

.page-pages-show-donation-v2-wide .donation-v2-amounts .custom-control-inline {
    margin-right: 0;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #a5a5a5;
    color: inherit;
    border-color: #a5a5a5;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .2rem rgba(230, 0, 255, 0.25)
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #e380ff
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    color: #fff;
    background-color: #ecb3ff;
    border-color: #ecb3ff
}

.page-pages-show-donation-v2-wide .donation-v2-amounts input[type="radio"] + label {
    background-color: #edcff6;
    color: inherit;
    border-color: #d249d2;
    border-radius: 0.375rem;
}

.donation_form .donation-v2-amounts input[type="radio"]:hover + label {
    background-color: #ec60ec;
    color: white;
    cursor: pointer;
}

.page-pages-show-donation-v2-wide .donation-v2-amounts input[type="radio"]:checked + label {
    background-color: #e05be0;
    color: white;
    border-color: #d249d2;
}

/* See glowing-button.css */
.page-pages-show-donation-v2-wide .donation-v2-amounts input[type="radio"]:checked + label {
    border: none;
    outline: none;
    cursor: pointer;
    position: relative;
    z-index: 0;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.page-pages-show-donation-v2-wide .donation-v2-amounts input[type="radio"]:checked + label:before {
    content: "";
    background: linear-gradient(
            90deg,
            #fff,
            transparent,
            transparent,
            #fff
    );
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(8px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing-button-animation 20s linear infinite;
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px;
}

@keyframes jumbo {
    from {
        background-position: 50% 50%, 50% 50%;
    }
    to {
        background-position: 350% 50%, 350% 50%;
    }
}

.bg-charm {
    --stripes: repeating-linear-gradient(
            100deg,
            #fff 0%,
            #fff 7%,
            transparent 10%,
            transparent 12%,
            #fff 16%
    );
    --stripesDark: repeating-linear-gradient(
            100deg,
            #000 0%,
            #000 7%,
            transparent 10%,
            transparent 12%,
            #000 16%
    );
    --rainbow: repeating-linear-gradient(
            100deg,
            #c8dcf6 10%,
            #efd1ff 15%,
            #a9c6ec 20%,
            #85e3ee 25%,
            #bfddff 30%
    );
    background-image: var(--stripes), var(--rainbow);
    background-size: 300%, 200%;
    background-position: 50% 50%, 50% 50%;

    filter: blur(10px) invert(100%);

    mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);

    position: absolute;
    display: block;
    pointer-events: none;
    width: 100%;
    height: 30vh;
    z-index: var(--z-body) -1;
}

.bg-charm::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--stripes), var(--rainbow);
    background-size: 200%, 100%;
    animation: jumbo 100s linear infinite;
    background-attachment: fixed;
    mix-blend-mode: difference;
}

@keyframes spin {
    100% {
        transform: rotate(1turn);
    }
}

.spin {
    animation: spin 45s linear infinite reverse;
}

.spreadable-container {
    height: max(200px, 0.5vw);
    width: 100%;
    object-fit: cover;
}

.spreadable {
    /* The container is only meant to take up from 3/12 (25%) to 8/12 columns (66%). So 3 images as 41% width */
    width: 37%;
    margin: 0 auto;
    transition: all .4s ease;
    left: -18%;
    top: 33%;
    position: absolute;
    transform: rotate(-20deg);
    z-index: calc(var(--z-body) + 1); /* In front of ballot, but behind headings */
}

.spreadable img {
    height: inherit;
    max-height: 30vw;
}

.spreadable-container .spreadable:nth-child(2) {
    left: 9%;
    transform: rotate(-15deg);
}

.spreadable-container .spreadable:nth-child(3) {
    left: 12%;
    transform: rotate(-11deg);
}

/* This works with glowing buttons */
.animation-sync div:nth-child(1) a::before {
    animation-delay: 3s;
}

.animation-sync div:nth-child(2) a::before {
    animation-delay: 2s;
}

.animation-sync div:nth-child(3) a::before {
    animation-delay: 0s;
}


.panel-row {
    margin-left: 0;
    margin-right: 0;
    column-gap: 0;
}

.panel-row .col {
    padding-left: 0;
    padding-right: 0;
}

.panel-heading {
    background-color: var(--panel-background-color);
    border: 1px solid #e4e5e7;
    padding: 0;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
    height: 100%;
}

.panel-title {
    margin-bottom: 0;
    height: 100%;
}

.panel-heading button {
    position: relative;
    background: none;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    height: 100%;
    color: #646464;
    text-decoration: none;
    width: 100%;
}

.panel-heading button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, #e1e1e1, transparent);
    opacity: 0;
    transition: opacity 1s ease;
    z-index: calc(var(--z-body) + 1); /* Behind the headings */
}

.panel-heading button.panel-faded::before {
    opacity: 1;
}

.panel-heading button:focus {
    outline: none
}

.panel-heading, .panel-title, .panel-title button, .panel-title button::before {
    border-radius: var(--panel-large-border-radius) var(--panel-large-border-radius) var(--panel-large-border-radius);
--var(--panel-large-border-radius);
    transition: border-radius 0.1s ease-in;
}

.panel-title h3 {
    font-size: 1rem;
}

.opened {
    .panel-heading, .panel-title, .panel-title button, .panel-heading button::before {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

.panel-heading:hover {
    border-color: white;
}

.panel-heading button:hover {
    color: white;
    background-color: #c5cdd5;
    border-bottom: none; /* Remove bottom border to visually connect to content */
}

.panel-heading button:after {
    /* Remove any existing icon styles */
    content: "";
}

/* Style for the panel content */
.panel-collapse {
    border: 1px solid #f8f8f8;
    border-top: none; /* Remove top border to connect with tab */
    padding: 15px;
    background-color: var(--panel-background-color);
}

/* Active tab styling */
.active .panel-heading {
    background-color: #efefef;
    color: #ffffff;
    box-shadow: 4px -2px 15px 0 rgba(31, 38, 135, 0.1);
    border-bottom: none;
}

.opened .panel-heading button {
    color: black;
    transition: color 1s ease-in;
}

.opened .active .panel-heading button {
    transition: color 0s linear;
}

.panel-content {
    width: 100%;
    background-color: whitesmoke;
    box-shadow: 4px -2px 15px 0 rgba(31, 38, 135, 0.1);
}

/* Layout adjustments for tabs */
#accordion .col {
    padding: 0 5px;
}

.row[role="tablist"] {
    margin-bottom: -1px; /* Prevents margin between tab row and content */
}
</pre></body></html>