::selection {
    color: #FFFFFF;
    background: var(--wp--preset--color--accent);
}



.wp-block-group.is-style-group-hero-container {
    position: relative;
    overflow: visible;
    pointer-events: none;

    & figure:nth-child(1) {
        position: relative;
        z-index: 1;
    }

    & figure:nth-child(2),
    & figure:nth-child(3),
    & figure:nth-child(4),
    & figure:nth-child(5),
    & figure:nth-child(6) {
        position: absolute;
        z-index: 2;
        top: 0;
        right: 30%;
        scale: 1.4;
    }

    & figure:nth-child(2) {
        animation: fall1 17s ease-in-out infinite;
    }

    & figure:nth-child(3) {
        animation: fall2 26s ease-in-out infinite;
    }

    & figure:nth-child(4) {
        animation: fall3 21s ease-in-out infinite;
    }

    & figure:nth-child(5) {
        animation: fall4 19s ease-in-out infinite;
        top: 10%;
    }

    & figure:nth-child(6) {
        animation: fall5 24s ease-in-out infinite;
    }
    
}

@keyframes fall1 {
    0%,
    100% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }

    20% {
        transform: translateX(10px) translateY(10px) rotate(0.5deg);
    }

    50% {
        transform: translateX(30px) translateY(-5px) rotate(-0.5deg);
    }

    80% {
        transform: translateX(15px) translateY(8px) rotate(-1deg);
    }
}

@keyframes fall2 {
    0%,
    100% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }

    15% {
        transform: translateX(-20px) translateY(8px) rotate(-0.5deg);
    }

    50% {
        transform: translateX(-40px) translateY(15px) rotate(0.5deg);
    }

    85% {
        transform: translateX(-10px) translateY(10px) rotate(0deg);
    }
}

@keyframes fall3 {
    0%,
    100% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }

    15% {
        transform: translateX(-10px) translateY(10px) rotate(-0.5deg);
    }

    50% {
        transform: translateX(-30px) translateY(15px) rotate(0.5deg);
    }

    85% {
        transform: translateX(-15px) translateY(8px) rotate(0deg);
    }
}

@keyframes fall4 {
    0%,
    100% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }

    20% {
        transform: translateX(-10px) translateY(10px) rotate(0.5deg);
    }

    50% {
        transform: translateX(-30px) translateY(-5px) rotate(-0.5deg);
    }

    80% {
        transform: translateX(-15px) translateY(8px) rotate(-1deg);
    }
}

@keyframes fall5 {
    0%,
    100% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }

    15% {
        transform: translateX(10px) translateY(10px) rotate(0.5deg);
    }

    50% {
        transform: translateX(20px) translateY(20px) rotate(-0.5deg);
    }

    85% {
        transform: translateX(10px) translateY(15px) rotate(0.5deg);
    }
}



.wp-block-navigation .wp-block-navigation-item {
    &.is-style-navigation-link-button {
        & .wp-block-navigation-item__content {
            background: none !important;
            background-color: var(--wp--preset--color--accent) !important;
            clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
            font-family: var(--wp--preset--font-family--heading);
            line-height: 1;
            padding-bottom: 0.4rem;
            padding-left: 0.6rem;
            padding-right: 2rem;
            padding-top: 0.3rem;
            text-transform: uppercase;

            &:hover {
                background-color: var(--wp--preset--color--contrast-2) !important;
                color: var(--wp--preset--color--accent);
            }
        }

        &.current-menu-item .wp-block-navigation-item__content {
            background-color: var(--wp--preset--color--contrast-2) !important;
            color: var(--wp--preset--color--accent);
        }
    }
}