body {
    background-image: url('/assets/img/bamboo1_tile.png');
    background-size: 750px;
    background-attachment: fixed;
    background-position: center;
    /* background-blend-mode: soft-light; */
    background-blend-mode: overlay;
    background-repeat: repeat;
}

/* Make the background image a bit more reasonable both light and dark mode */
[data-bs-theme=light] body.bg-light{
    background-color: rgba(249, 238, 225, 0.9) !important;
}

[data-bs-theme=dark] body.bg-light{
    background-color: rgba(36, 17, 0, 0.95) !important;
    background-blend-mode: multiply !important;
}

/* Hide based on light or dark mode. This follows Bootstrap's native scheme for display classes. This comes in handy when we have to duplicate an element in each mode, like the Mixcloud player. */

/* Hide light-theme elements when dark theme is active */
[data-bs-theme="dark"] .d-dark-none {
  display: none !important;
}

/* Hide dark-theme elements when light theme is active */
[data-bs-theme="light"] .d-light-none,
:root:not([data-bs-theme="dark"]) .d-light-none {
  display: none !important;
}

.bg-transparent {
    backdrop-filter: blur(10px);
}

p {
    font-weight: 300;
    line-height: 1.25;
}

p b,
p strong,
p i b,
p b i,
p strong em,
p em strong {
    font-weight: 700;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    line-height: 1.13;
}

footer p.small {
    font-size: 0.75em;
    letter-spacing: 0.04rem;
}

form textarea,
form input:not([type="checkbox"]) {
    width: 100%;
    /* background-color: transparent;
    border: solid 2px currentColor; */
    border: none;
}

/* If you want to bring back form sublabels, comment this out: */
form label.wsite-form-sublabel {
    display: none;
}

form ul.formlist {
    padding-left: 0;
}

.script {
    font-family: "Yesteryear", cursive !important;
}

.blob,
.polygon {
    padding: 0.5em 1.5em;
}

.blob:nth-of-type(2n - 1) {
    clip-path: shape(from 88.91% 71.91%,curve to 74.69% 88.54% with 83.60% 81.56%,curve to 54.23% 97.00% with 65.77% 95.53%,curve to 33.13% 92.24% with 42.68% 98.46%,curve to 15.93% 78.19% with 23.57% 86.01%,curve to 5.12% 59.49% with 8.30% 70.37%,curve to 4.31% 37.12% with 1.93% 48.61%,curve to 16.22% 19.11% with 6.69% 25.64%,curve to 35.59% 6.50% with 25.74% 12.58%,curve to 56.74% 3.35% with 45.43% 0.41%,curve to 75.89% 14.05% with 68.04% 6.29%,curve to 88.92% 31.15% with 83.73% 21.82%,curve to 94.16% 51.37% with 94.11% 40.48%,curve to 88.91% 71.91% with 94.21% 62.27%);
}

.blob:nth-of-type(2n) {
    clip-path: shape(from 44.62% 94.08%,curve to 19.07% 82.46% with 30.37% 91.71%,curve to 4.57% 58.54% with 7.77% 73.22%,curve to 9.41% 31.64% with 1.38% 43.86%,curve to 29.37% 11.92% with 17.44% 19.42%,curve to 55.89% 5.45% with 41.30% 4.41%,curve to 82.01% 16.28% with 70.47% 6.49%,curve to 93.89% 40.82% with 93.55% 26.06%,curve to 90.27% 69.84% with 94.24% 55.59%,curve to 72.58% 90.27% with 86.30% 84.09%,curve to 44.62% 94.08% with 58.86% 96.45%);
}

.polygon:nth-of-type(2n - 1) {
    clip-path: polygon(0 0, 100% 12%, 91% 99%, 10% 88%);
}

.polygon:nth-of-type(2n) {
    clip-path: polygon(5% 7%, 90% 0, 100% 100%, 5% 94%);
}

.rounded {
    border-radius: 1em !important;
}

/* Fix dark mode backgrounds and buttons because Bootstrap doesn't invert these with the built-in dark mode */
[data-bs-theme=dark] {
    .bg-light {
        background-color: var(--bs-dark) !important;
    }

    .bg-dark {
        background-color: var(--bs-light) !important;
    }

    .btn-dark {
        background-color: var(--bs-light) !important;
        color: var(--bs-dark) !important;
        border-color: var(--bs-light) !important;
    }

    .btn-outline-dark {
        color: var(--bs-light) !important;
        border-color: var(--bs-light) !important;
    }
}