@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

@property --a {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@font-face {
    font-family: "Sherman-Display";
    src: url("fonts/Fonts/Sherman-Display.otf");
}

@font-face {
    font-family: "ThePicnicClub-Italic";
    src: url("fonts/Fonts/ThePicnicClub-Italic.ttf");
}

@keyframes spin {
    to {
        --a: 360deg;
    }
}


:root {
    /* variables for the modal and other card lookign thingies */
    --modal-background: hsl(281, 53%, 6%);
    --modal-border: #c28ed7;

    /* --modal-border: linear-gradient(to top, rgba(162, 97, 192, 0.1) 0%, rgba(194, 142, 215, 0.9) 50%, rgba(162, 97, 192, 0.1) 100%) 1; */
    --modal-button-hover: hsl(280, 25%, 12%);



    --bs-modal-bg: #120717;

}


.modal-button-custom {


    display: flex;
    all: unset;
    text-align: center;
    border-top: 1px solid var(--modal-border);
    border-bottom: 1px solid var(--modal-border);
    height: 2rem;
    padding: 0 1rem;
    position: relative;
    transition: background 200ms ease-in-out;

    margin: 0 2rem;

    cursor: pointer;

    .left,
    .right {
        position: absolute;
        width: 1.45rem;
        height: 1.45rem;
        border-bottom: 1px solid var(--modal-border);
        border-left: 1px solid var(--modal-border);
        /* transition: background 200ms ease-in-out; */

        &::before {
            content: "";
            width: 0.75rem;
            height: 0.75rem;
            border: 1px solid var(--modal-border);
            position: absolute;
            top: calc(1rem - 1px);
            left: calc(-0.4rem - 1px);
        }

        /* &::after {
            content: "";
            width: 0.5rem;
            height: 0.5rem;
            background: var(--modal-border);
            position: absolute;
            top: calc(1rem - 1px);
            left: calc(-0rem - 1px);
        } */
    }

    .left {
        left: -0.75rem;
        transform: rotate(45deg);
    }

    .right {
        right: -0.75rem;
        transform: rotate(-135deg);
    }

    &:hover {
        background: var(--modal-button-hover);

        .left,
        .right {
            background: var(--modal-button-hover);
        }
    }

}

p,
li {
    color: white;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
}


.picnic {
    font-family: "ThePicnicClub-Italic", sans-serif;
    position: relative;
    /* top: 0.1em; */
}

body {
    background-color: #020202;
    font-family: "Sherman-Display", sans-serif;
    letter-spacing: 10%;
    color: #c28ed7;

    max-width: 100%;
    overflow-x: hidden;
    /* color: white; */
}


img {
    max-width: 100%;
    max-height: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    color: #feed3d;
}

.nav-selected {
    color: #feed3d
}

.modal-button:hover,
.book-button:hover,
.modal-button:active,
.book-button:active {
    background: var(--modal-button-hover);
}

.modal-button:active,
.book-button:active {
    border: 1px solid;
    border-color: #c28ed7 !important;
}

.card-artist,
.accordian-bg {
    background-color: #120717;
    justify-content: center;
    border: none;
    /* box-shadow: 10px 10px 1px #c28ed7; */
}

.card-artist {
    max-width: max(90%, 200px);
    margin: auto;
}

.modal-button {
    background-color: unset;
    justify-content: center;
    border: none;
}

.book-button {
    background-color: #c28ed7;
    justify-content: center;
    border: none;
}

.modal-header,
.modal-footer {
    background-color: #120717;
}



.glass-card {
    background: rgba(18, 07, 23, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    text-align: center;
}

.card-border,
.accordian-border,
.map-border {
    border-image: linear-gradient(to top, rgba(162, 97, 192, 0.1) 0%, rgba(194, 142, 215, 0.9) 50%, rgba(162, 97, 192, 0.1) 100%) 1;
    border-width: 4px;
    border-style: solid;
    padding: 5px;
}

.text-main-colour {
    font-family: "Sherman-Display", sans-serif;
    letter-spacing: 10%;
}

.text-arial {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
}

.color-light-purple {
    color: #c28ed7;
}

.fixed-bg-image {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.87)),
        url('./images/vid2.webp');
    background-attachment: fixed;
    background-position: center bottom;
    background-size: cover;
}

.fixed-bg-image2 {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.87)),
        url('./images/vid4.webp');
    background-attachment: fixed;
    background-position: center bottom;
    background-size: cover;
}

.accordian-text-colour {
    font-family: "Sherman-Display", sans-serif;
    letter-spacing: 10%;
    color: #c28ed7 !important;
}

.accordian-body {
    /* background-color: #c28ed7; */
    background-color: #120717;
    color: white;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
}



.accordion-button:not(.collapsed) {
    background-color: #120717 !important;
}

/* .accordion-button:not(.collapsed)::after {
    background-image: var(#c28ed7) !important;
    transform: var(--bs-accordion-btn-icon-transform);
} */


/* Overrides the focus border and glow */
.accordion-button:focus {
    border-color: none;
    box-shadow: none;
}

/* Optional: Sets the accordion border itself to #feed3d */
.accordion-item {
    border-color: none;
}

/* .accordion {
    border-image: linear-gradient(to top, rgba(162, 97, 192, 0.1) 0%, rgba(194, 142, 215, 0.9) 50%, rgba(162, 97, 192, 0.1) 100%) 1;
    border-width: 4px;
    border-style: solid;
    padding: 5px;
} */

.accordion {
    --bs-accordion-border-width: 0;
}

#home-hero {
    background-image: url("images/hero.png");
    background-size: cover;
}

#naps {
    background-color: rgba(194, 142, 215, 0.28);
    position: sticky;
    top: 0;
    z-index: 1100;
}

.logo-row {
    position: sticky;
    top: 2.5rem;
    z-index: 1050;
}

#logo-img {
    height: 6em;
    width: auto;
    display: block;
}

.text-cta {
    color: #feed3d;
}

.modal-body {
    background-color: #120717;
    color: #f0f0f0;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
}

.border-grad-colour {
    border-image: linear-gradient(to left,
            rgba(162, 97, 192, 0.1) 0%,
            rgba(194, 142, 215, 0.9) 50%,
            rgba(162, 97, 192, 0.1) 100%) 1;
}

/* .card {
    background: linear-gradient(from var(--a), red, yellow);
    animation: spin 3s linear infinite;
} */

.word-space-lg {
    word-spacing: 2rem;
    letter-spacing: 0.5rem;
}


.gradient-text-hero {

    /* Step 1: Define the purple linear gradient */
    background-image: conic-gradient(from var(--a), red, orange, yellow, green, blue, purple, red);
    /* background-image: conic-gradient(from var(--a), #da22ff, blue, #da22ff); */

    animation: spin 10s linear infinite;

    /* Step 2: Clip the background to the shape of the letters */
    background-clip: text;
    -webkit-background-clip: text;

    /* Step 3: Clear the default text fill color to reveal the gradient */
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.gradient-text-heading,
.card {
    /* Step 1: Define the purple linear gradient */
    background-image: conic-gradient(from var(--a), #da22ff, #c28ed7, #da22ff);

    animation: spin 3s linear infinite;

    /* Step 2: Clip the background to the shape of the letters */
    background-clip: text;
    -webkit-background-clip: text;

    /* Step 3: Clear the default text fill color to reveal the gradient */
    color: transparent;
    -webkit-text-fill-color: transparent;
}



/* @supports (background-clip: text) or (-webkit-background-clip: text) {
    .gradient-text-hero {
        background-image: linear-gradient(to left,
                rgba(162, 97, 192, 0.1) 0%,
                rgba(194, 142, 215, 0.9) 50%,
                rgba(162, 97, 192, 0.1) 100%) 1;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
} */


.neon-text {
    text-shadow: 0 0 5px #631882, 0 0 10px #631882, 0 0 20px #631882, 0 0 40px #631882;
    animation: glow 2.0s infinite alternate;
}

.neon-text-hero {
    text-shadow: 0 0 5px #413d0b, 0 0 10px #413d0b, 0 0 20px #413d0b, 0 0 40px #413d0b;
    animation: glow-hero 2.0s infinite alternate;
}

.f-w-900 {
    font-weight: 900 !important;
}

.bg-pink-gradient-reverse {
    background: linear-gradient(to top, #120717, #020202);
}



@keyframes glow {
    0% {
        text-shadow: 0 0 5px #631882, 0 0 10px #631882, 0 0 20px #631882, 0 0 40px #631882;
    }

    100% {
        text-shadow: 0 0 10px #a628d8, 0 0 20px #a628d8, 0 0 40px #a628d8, 0 0 80px #a628d8;
    }
}

@keyframes glow-hero {
    0% {
        text-shadow: 0 0 5px #413d0b, 0 0 10px #413d0b, 0 0 20px #413d0b, 0 0 40px #413d0b;
    }

    100% {
        text-shadow: 0 0 10px #453F08, 0 0 20px #453F08, 0 0 40px #453F08, 0 0 80px #453F08;
    }
}