.elementor-kit-8{--e-global-color-primary:#8C23A0;--e-global-color-secondary:#1BB7A8;--e-global-color-text:#494848;--e-global-color-accent:#F0454E;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:#342241;color:#F5F5F5;font-family:"Nunito", Sans-serif;font-size:20px;font-weight:500;line-height:23px;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 a{color:#F0454E;}.elementor-kit-8 a:hover{color:#B9D20C;font-family:"Nunito", Sans-serif;}.elementor-kit-8 h1{color:#0AABBA;font-family:"Bangers", Sans-serif;font-size:60px;letter-spacing:4px;}.elementor-kit-8 h2{color:#0AABBA;font-family:"Fredoka One", Sans-serif;font-size:55px;}.elementor-kit-8 h3{color:#F4A040;font-family:"Fredoka One", Sans-serif;font-size:45px;}.elementor-kit-8 h4{color:#F4A040;font-family:"Fredoka One", Sans-serif;font-size:35px;}.elementor-kit-8 h5{color:#F4A040;font-family:"Fredoka One", Sans-serif;font-size:30px;}.elementor-kit-8 h6{color:#F4A040;font-family:"Fredoka One", Sans-serif;font-size:25px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:400px;}.e-con{--container-max-width:400px;--container-default-padding-top:0%;--container-default-padding-right:0%;--container-default-padding-bottom:0%;--container-default-padding-left:0%;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */.e-con {
  --container-max-width: 800px !important;
}
.pmpro {
  & .pmpro_card {
    max-width: 80% !important;
    margin: auto;
    background-color: #202020;
    color: #ffffff !important;
  }
}
.pmpro {
    color: #ffffff !important;
}
.pmpro {
  & .pmpro_level .pmpro_btn {
    display: block;
    text-decoration: none;
    color: #fff !important;
  }
}
#pmpro_submit_span {
    margin: auto !important;
}
.pmpro_btn {
    color: #ffffff !important;
}
input#pmpro_btn-submit.pmpro_btn.pmpro_btn-submit-checkout {
    color: #ffffff !important;
}
.entry-title {
    margin: 20px auto !important;
    text-align: center !important;
}
input#wp-submit.button.button-primary {
    color: #ffffff !important;
}
.page-content {
    padding: 0 5% 2% 5% !important;
}
.text-button {
  /* Essential: Makes the border wrap tightly around the text */
  display: inline-block; 
  
  /* The Border */
  border: 2px solid #ffffff !important; 
  
  /* Creates space between text and the border (Top/Bottom Left/Right) */
  padding: 10px 20px; 
  
  /* Softens the sharp corners for a button shape */
  border-radius: 15px; 
  
  /* Colors and Typography */
  background-color: transparent;
  color: #0066cc;
  text-decoration: none; /* Removes underline if using an <a> tag */
  font-family: sans-serif;
  font-weight: bold;
  
  /* Interaction: Changes cursor to a clicking hand */
  cursor: pointer; 
  
  /* Smoothly animates the colors when hovered */
  transition: all 0.3s ease; 
}

/* Hover Effect: Inverts the colors when the mouse moves over it */
.text-button:hover {
  background-color: #0066cc;
  color: #ffffff;
}
.artsy-underline {
  background: linear-gradient(-45deg, transparent 50%, #ff5722 50%) bottom left / 100% 6px;
  background-repeat: no-repeat;
  padding-bottom: 6px;
  display: inline-block;
}
.oddplay-wiggle .elementor-button, .oddplay-play-button {
    transition: transform 0.2s ease;
    transform-origin: center bottom;
}

.oddplay-wiggle .elementor-button:hover, .oddplay-play-button:hover {
    animation: oddplay-button-boing 0.5s ease;
}

@keyframes oddplay-button-boing {

    0% {
        transform: rotate(0deg) scale(1);
    }

    20% {
        transform: rotate(-3deg) scale(1.04);
    }

    40% {
        transform: rotate(3deg) scale(1.06);
    }

    60% {
        transform: rotate(-2deg) scale(1.04);
    }

    80% {
        transform: rotate(1deg) scale(1.02);
    }

    100% {
        transform: rotate(0deg) scale(1);
    }
}
/* =========================================================
   ODDPLAY RANDOM FOOTER CREATURES
   ========================================================= */

#oddplay-creature-footer {
    position: relative !important;
    overflow: hidden !important;
}


/* The creature lane is created automatically by JavaScript */

#oddplay-creature-lane {
    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 110px !important;

    overflow: hidden !important;

    pointer-events: none !important;

    z-index: 999 !important;
}


/* =========================================================
   CREATURE
   ========================================================= */

.oddplay-footer-creature {
    position: absolute !important;

    bottom: 5px !important;

    width: auto !important;
    height: 85px;

    max-width: none !important;

    object-fit: contain;

    pointer-events: none !important;

    --creature-flip: 1;

    transform: scaleX(var(--creature-flip));

    transform-origin: center center;

    filter: drop-shadow(
        0 5px 5px rgba(0, 0, 0, 0.3)
    );

    will-change: left, right, margin-bottom;
}


/* =========================================================
   STARTING POSITIONS
   ========================================================= */

.oddplay-footer-creature.from-left {
    left: -180px;
}

.oddplay-footer-creature.from-right {
    right: -180px;
}


/* =========================================================
   RUNNING LEFT → RIGHT
   ========================================================= */

.oddplay-footer-creature.from-left.running {
    animation:
        oddplay-run-right
        var(--travel-time)
        linear
        forwards,

        oddplay-creature-bob
        0.28s
        ease-in-out
        infinite
        alternate;
}


/* =========================================================
   RUNNING RIGHT → LEFT
   ========================================================= */

.oddplay-footer-creature.from-right.running {
    animation:
        oddplay-run-left
        var(--travel-time)
        linear
        forwards,

        oddplay-creature-bob
        0.28s
        ease-in-out
        infinite
        alternate;
}


/* =========================================================
   MOVEMENT
   ========================================================= */

@keyframes oddplay-run-right {

    from {
        left: -180px;
    }

    to {
        left: calc(100% + 180px);
    }

}


@keyframes oddplay-run-left {

    from {
        right: -180px;
    }

    to {
        right: calc(100% + 180px);
    }

}


/* =========================================================
   EXTRA LITTLE BOUNCE
   ========================================================= */

@keyframes oddplay-creature-bob {

    from {
        margin-bottom: 0;
    }

    to {
        margin-bottom: 5px;
    }

}
/* =========================================================
   ODDPLAY — AMBIENT BACKGROUND OBJECTS
   ========================================================= */

body {
    position: relative;
    isolation: isolate;
}


/* Floating artwork layer */
#oddplay-floating-background {
    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    overflow: hidden !important;

    pointer-events: none !important;
    user-select: none !important;

    z-index: 0 !important;
}


/*
 * Dark atmospheric veil over the floating artwork.
 *
 * This is what makes the images feel like part of
 * the background rather than graphics floating
 * in front of the website.
 */
body::before {
    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 1;

    background:
        rgba(10, 10, 16, 0.38);
}


/* =========================================================
   ACTUAL WEBSITE CONTENT
   ========================================================= */

/*
 * Keep Elementor/site content above both background layers.
 */

header,
footer,
main,
#content,
#page,
.site,
.site-content,
.elementor,
.elementor-location-header,
.elementor-location-footer {
    position: relative;
    z-index: 2;
}


/* =========================================================
   INDIVIDUAL BACKGROUND GRAPHICS
   ========================================================= */

.oddplay-floater {
    position: absolute !important;

    top: 0;
    left: 0;

    width: var(--odd-size);
    height: auto;

    max-width: none !important;

    display: block !important;

    opacity: 0;

    pointer-events: none !important;
    user-select: none !important;

    will-change: transform, opacity;

    filter:
        var(--odd-filter)
        blur(0.3px);

    animation:
        oddplayFloat
        var(--odd-duration)
        linear
        forwards;
}


/* =========================================================
   FLOATING MOTION
   ========================================================= */

@keyframes oddplayFloat {

    0% {
        transform:
            translate3d(
                var(--odd-start-x),
                var(--odd-start-y),
                0
            )
            rotate(var(--odd-rotate-start));

        opacity: 0;
    }


    10% {
        opacity: var(--odd-opacity);
    }


    50% {
        transform:
            translate3d(
                var(--odd-mid-x),
                var(--odd-mid-y),
                0
            )
            rotate(var(--odd-rotate-mid));

        opacity: var(--odd-opacity);
    }


    90% {
        opacity: var(--odd-opacity);
    }


    100% {
        transform:
            translate3d(
                var(--odd-end-x),
                var(--odd-end-y),
                0
            )
            rotate(var(--odd-rotate-end));

        opacity: 0;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #oddplay-floating-background {
        display: none !important;
    }

}
/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    #oddplay-creature-lane {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .oddplay-wiggle .elementor-button:hover {
        animation: none;
    }
}
@media screen and (max-width: 840px) {
.elementor-14 .elementor-element.elementor-element-90d41e9 {
  --container-widget-width: 90% !important;
  --container-widget-flex-grow: 0;
}
.pmpro {
  & .pmpro_card {
    max-width: 100% !important;
    margin: auto;
    background-color: #202020;
    color: #ffffff !important;
  }
}
}/* End custom CSS */