/* ------------------------------------------------------------
# Fonts
---------------------------------------------------------------*/
/*Google Fonts*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i");
@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');

@font-face {
    font-family: 'MagicMedieval Regular';
    font-style: normal;
    font-weight: normal;
    src: url('../../fonts/Magicm.woff') format('woff');
}

.magic {
    font-family: "MagicMedieval Regular", sans-serif;
}

/* NAVBAR DROPDOW */
.dropdown ul {
    display: block;
    position: absolute;
    left: 14px;
    top: calc(100% + 30px);
    margin: 0;
    padding: 10px 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    background: #fff;
    box-shadow: 0 0 30px rgba(127, 137, 161, 0.25);
    transition: 0.3s;
    border-radius: 4px;
}

.dropdown ul li {
    min-width: 200px;
}

.dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    font-weight: 600;
}

.navbar .dropdown ul a i {
    font-size: 12px;
}

.dropdown ul a:hover,
.dropdown ul .active:hover,
.dropdown ul li:hover > a {
    color: var(--primary);
}

.dropdown:hover > ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
}

.dropdown img {
    max-width: 24px;
}


/* HERO  */
.logo {
    opacity: 0;
    scale: 0.9
}

.banner {
    background-image: var(--bg-img);
}

.event-logo {
    background-image: var(--event-logo);
}

.hero-item {
    opacity: 0;
    y: 20px;
}

.second-name {
    font-family: MedievalSharp, cursive;
    color: rgb(195, 106, 90);
    -webkit-text-stroke: 4px rgb(253, 219, 212);
    paint-order: stroke;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.75));
    font-size: 3rem;
    letter-spacing: 0.05em;
    opacity: 1;
    transform: none;
}

.hero-block h1 {
    margin-bottom: 0;
}

.hero-block .payline {
    margin-bottom: 16px;
    color: #fff;
}

.hero-block .date-loc {
    margin-bottom: 64px;
}

.hero
.card-hand {
    opacity: 0
}

.card-hand-1 {
    y: 80px;
    /* transform: rotate(-35deg); */
}

.card-hand-2 {
    y: 70px;
    /* transform: rotate(-20deg); */
}

.card-hand-3 {
    y: 60px;
    /* transform: rotate(-10deg); */
}

.card-hand-4 {
    y: 50px;
}

.card-hand-5 {
    y: 60px;
    /* transform: rotate(10deg); */
}

.card-hand-6 {
    y: 70px;
    /* transform: rotate(20deg) */
}

.card-hand-7 {
    y: 80px;
    /* transform: rotate(35) */
}

/* FESTIVAL and GENERAL SECTIONS */

.motion-item {
    opacity: 0;
    y: 30px;
    transform: none;
}

.motion-item-2,
.guest-box {
    opacity: 0;
    y: 40px;
    transform: none;
}

.spirit-box {
    opacity: 0;
    y: 50px;
    transform: none;
    display: flex;
    flex-direction: column;
}

.spirit-box i {
    font-size: 3rem; /* or 48px */
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
}

.spirit-box .text-card-foreground {
    flex: 1;
}

.leftcol {
    opacity: 0;
    x: -50px;
    transform: none;
}

.rightcol {
    opacity: 0;
    x: 50px;
    transform: none;
}

.card-cone-container {
    opacity: 0;
    /* scale: 0.8; */
}

.card-cone {
    opacity: 0;
    scale: 1;
    y: 0;
}

.featured {
    opacity: 0;
    scale: 1;
}

.featured:hover {
    scale: 1.1;
    y: -8px;
}

.card-cone.top-left {
    transform: translateY(-8px);
}

.card-cone.top-left:hover {
    scale: 1.05;
    transform: translateY(-12px);
}

.card-cone.top-right {
    transform: translateY(12px);
}

.card-cone.top-right:hover {
    scale: 1.05;
    transform: translateY(8px);
}

.card-cone.bottom-left {
    transform: translateY(8px);
}

.card-cone.bottom-left:hover {
    scale: 1.05;
    transform: translateY(4px);
}

.card-cone.bottom-right {
    transform: translateY(-12px);
}

.card-cone.bottom-right:hover {
    scale: 1.05;
    transform: translateY(-16px);
}

.text-raffle {
    color: #d946ef;
}

.text-oldschool {
    color: #fc9a00;
}

.text-premodern {
    color: var(--primary);
}

.text-closed {
    color: #ef4444;
}

.bg-raffle {
    background-color: #d946ef;
}

.bg-raffle\/5 {
    background-color: oklab(66.6764% .204559 -.158959 / .05);
}

.bg-raffle\/10 {
    background-color: oklab(66.6764% .204559 -.158959 / .1);
}

.bg-raffle\/20 {
    background-color: oklab(66.6764% .204559 -.158959 / .2);
}

.bg-raffle\/30 {
    background-color: oklab(66.6764% .204559 -.158959 / .3);
}

.border-raffle {
    border-color: #d946ef;
}

.border-raffle\/30 {
    border-color: oklab(66.6764% .204559 -.158959 / .3);
}

.border-raffle\/20 {
    border-color: oklab(66.6764% .204559 -.158959 / .2);
}

.bg-closed\/10 {
    background-color: oklab(67.5516% .221501 .13137 / .1);
}

.border-closed\/30 {
    border-color: oklab(67.5516% .221501 .13137 / .3);
}

.border-oldschool {
    border-color: #fc9a00;
}

.border-oldschool\/20 {
    border-color: oklab(76.9935% .0697004 .156593 / .2);
}

.border-oldschool\/30 {
    border-color: oklab(76.9935% .0697004 .156593 / .3);
}

.border-oldschool\/50 {
    border-color: oklab(76.9935% .0697004 .156593 / .5);
}

.border-oldschool\/60 {
    border-color: oklab(76.9935% .0697004 .156593 / .6);
}

.border-oldschool\/80 {
    border-color: oklab(76.9935% .0697004 .156593 / .8);
}

.bg-oldschool {
    background-color: #fc9a00;
}

.bg-oldschool\/5 {
    background-color: oklab(76.9935% .0697004 .156593 / .05);
}

.bg-oldschool\/10 {
    background-color: oklab(76.9935% .0697004 .156593 / .1);
}

.bg-premodern {
    background-color: var(--primary);
}

.bg-premodern\/5 {
    background-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
    .bg-premodern\/5 {
        background-color: color-mix(in oklab, var(--primary) 5%, transparent);
    }
}

.bg-premodern\/10 {
    background-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
    .bg-premodern\/10 {
        background-color: color-mix(in oklab, var(--primary) 10%, transparent);
    }
}

.border-premodern {
    border-color: var(--primary);
}

.border-premodern\/20 {
    border-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
    .border-premodern\/20 {
        border-color: color-mix(in oklab, var(--primary) 20%, transparent);
    }
}

.border-premodern\/30 {
    border-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
    .border-premodern\/30 {
        border-color: color-mix(in oklab, var(--primary) 30%, transparent);
    }
}

.border-premodern\/50 {
    border-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
    .border-premodern\/50 {
        border-color: color-mix(in oklab, var(--primary) 50%, transparent);
    }
}

.border-premodern\/60 {
    border-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
    .border-premodern\/60 {
        border-color: color-mix(in oklab, var(--primary) 60%, transparent);
    }
}

/*
==================================================
HOVER
==================================================
*/
@media (hover: hover) {
    .hover\:border-oldschool\/80:hover {
        border-color: oklab(76.9935% .0697004 .156593 / .8);
    }
}

@media (hover: hover) {
    .hover\:border-premodern\/40:hover {
        border-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
        .hover\:border-premodern\/40:hover {
            border-color: color-mix(in oklab, var(--primary) 40%, transparent);
        }
    }
}

@media (hover: hover) {
    .hover\:border-premodern\/80:hover {
        border-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
        .hover\:border-premodern\/80:hover {
            border-color: color-mix(in oklab, var(--primary) 80%, transparent);
        }
    }
}

@media (hover: hover) {
    .hover\:bg-oldschool\/10:hover {
        background-color: oklab(76.9935% .0697004 .156593 / .1);
    }
}

@media (hover: hover) {
    .hover\:bg-oldschool\/90:hover {
        background-color: oklab(76.9935% .0697004 .156593 / .9);
    }
}

@media (hover: hover) {
    .hover\:bg-premodern\/10:hover {
        background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
        .hover\:bg-premodern\/10:hover {
            background-color: color-mix(in oklab, var(--primary) 10%, transparent);
        }
    }
}

@media (hover: hover) {
    .hover\:bg-premodern\/90:hover {
        background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
        .hover\:bg-premodern\/90:hover {
            background-color: color-mix(in oklab, var(--primary) 90%, transparent);
        }
    }
}

@media (hover: hover) {
    .hover\:shadow-oldschool\/10:hover {
        --tw-shadow-color: #fc9a001a;
    }

    @supports (color: color-mix(in lab, red, red)) {
        .hover\:shadow-oldschool\/10:hover {
            --tw-shadow-color: color-mix(in oklab, oklab(76.9935% .0697004 .156593 / .1) var(--tw-shadow-alpha), transparent);
        }
    }
}

@media (hover: hover) {
    .hover\:shadow-premodern\/10:hover {
        --tw-shadow-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
        .hover\:shadow-premodern\/10:hover {
            --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--primary) 10%, transparent) var(--tw-shadow-alpha), transparent);
        }
    }
}

/* Oldschool gradient classes */
.from-oldschool-950\/95 {
    --tw-gradient-from: color-mix(in srgb, oklch(.266 .079 36.259) 95%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

@supports (color: color-mix(in lab, red, red)) {
    .from-oldschool-950\/95 {
        --tw-gradient-from: color-mix(in oklab, oklch(.266 .079 36.259) 95%, transparent);
    }
}

.via-oldschool-950\/90 {
    --tw-gradient-via: color-mix(in srgb, oklch(.279 .077 45.635) 90%, transparent);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
}

@supports (color: color-mix(in lab, red, red)) {
    .via-oldschool-950\/90 {
        --tw-gradient-via: color-mix(in oklab, oklch(.279 .077 45.635) 90%, transparent);
    }
}

.to-oldschool-900\/95 {
    --tw-gradient-to: color-mix(in srgb, oklch(.408 .123 38.172) 95%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

@supports (color: color-mix(in lab, red, red)) {
    .to-oldschool-900\/95 {
        --tw-gradient-to: color-mix(in oklab, oklch(.408 .123 38.172) 95%, transparent);
    }
}

/* Premodern gradient classes */
.from-premodern-900\/85 {
    --tw-gradient-from: color-mix(in srgb, oklch(.208 .042 265.755) 85%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

@supports (color: color-mix(in lab, red, red)) {
    .from-premodern-900\/85 {
        --tw-gradient-from: color-mix(in oklab, oklch(.208 .042 265.755) 85%, transparent);
    }
}

.from-premodern-950\/95 {
    --tw-gradient-from: color-mix(in srgb, oklch(.129 .042 264.695) 95%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

@supports (color: color-mix(in lab, red, red)) {
    .from-premodern-950\/95 {
        --tw-gradient-from: color-mix(in oklab, oklch(.129 .042 264.695) 95%, transparent);
    }
}

.via-premodern-950\/90 {
    --tw-gradient-via: color-mix(in srgb, oklch(.262 .051 172.552) 90%, transparent);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
}

@supports (color: color-mix(in lab, red, red)) {
    .via-premodern-950\/90 {
        --tw-gradient-via: color-mix(in oklab, oklch(.262 .051 172.552) 90%, transparent);
    }
}

.to-premodern-900\/90 {
    --tw-gradient-to: color-mix(in srgb, oklch(.208 .042 265.755) 90%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

@supports (color: color-mix(in lab, red, red)) {
    .to-premodern-900\/90 {
        --tw-gradient-to: color-mix(in oklab, oklch(.208 .042 265.755) 90%, transparent);
    }
}

.to-premodern-900\/95 {
    --tw-gradient-to: color-mix(in srgb, oklch(.208 .042 265.755) 95%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

@supports (color: color-mix(in lab, red, red)) {
    .to-premodern-900\/95 {
        --tw-gradient-to: color-mix(in oklab, oklch(.208 .042 265.755) 95%, transparent);
    }
}

a.form-link {
    color: var(--tourney);
    font-weight: bold;
}

a.form-link:hover {
    text-decoration: underline;
}

a.charity-link {
    color: var(--color-sky-600);
    font-weight: bold;
}

a.charity-link:hover {
    text-decoration: underline;
}