.main-button.hovered {
    transform: translateY(-6px);
    filter: drop-shadow(0px 8px 0px #000);
    border: solid 2px white;
    background-color: #c51984;
    color: #fff;
}

.main-button.clicked {
    animation: main-button-click 300ms ease-in-out forwards;
}

@keyframes main-button-click {
    0% {
        transform: translateY(-6px);
        filter: drop-shadow(0px 8px 0px #000);
        background-color: #c51984;
        border: solid 2px white;
    }

    50% {
        transform: translateY(2px);
        filter: drop-shadow(0px 0px 0px #000);

    }

    100% {
        transform: translateY(0px);
        filter: drop-shadow(0px 2px 0px #000);
        background-color: white;
        border: solid 2px #c51984;
    }
}

.main-button-wrapper {
    position: relative;
}

.main-button-decoration-3,
.main-button-decoration-2,
.main-button-decoration-1 {
    position: absolute;
    z-index: -1;
    width: 24px;
}

.main-button-decoration-3 {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-130deg) scale(0);
}

.main-button-wrapper.active .main-button-decoration-3 {
    animation: main-button-decoration-3 3000ms ease-out forwards;
}

@keyframes main-button-decoration-3 {
    0% {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(-130deg) scale(0);
        opacity: 1;
    }

    20% {
        left: -15%;
        top: 110%;
        transform: translate(-50%, -50%) rotate(-130deg) scale(1);
        opacity: 1;
    }

    90% {
        left: -15%;
        top: 110%;
        transform: translate(-50%, -50%) rotate(-130deg) scale(1);
        opacity: 1;
    }

    100% {
        left: -15%;
        top: 110%;
        transform: translate(-50%, -50%) rotate(-130deg) scale(1);
        opacity: 0;
    }
}

.main-button-decoration-2 {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(30deg) scale(0);
}

.main-button-wrapper.active .main-button-decoration-2 {
    animation: main-button-decoration-2 2800ms 200ms ease-out forwards;
}

@keyframes main-button-decoration-2 {
    0% {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(30deg) scale(0);
        opacity: 1;
    }

    20% {
        left: -5%;
        top: -30%;
        transform: translate(-50%, -50%) rotate(30deg) scale(1.3);
    }

    90% {
        left: -5%;
        top: -30%;
        transform: translate(-50%, -50%) rotate(30deg) scale(1.3);
        opacity: 1;
    }

    100% {
        left: -5%;
        top: -30%;
        transform: translate(-50%, -50%) rotate(-130deg) scale(1.3);
        opacity: 0;
    }
}

.main-button-decoration-1 {
    right: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-50deg) scale(0);
}

.main-button-wrapper.active .main-button-decoration-1 {
    animation: main-button-decoration-1 2900ms 100ms ease-out forwards;
}

@keyframes main-button-decoration-1 {
    0% {
        right: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(-50deg) scale(0);
        opacity: 1;
    }

    20% {
        right: -50%;
        top: -10%;
        transform: translate(-50%, -50%) rotate(-50deg) scale(1.6);
    }

    90% {
        right: -50%;
        top: -10%;
        transform: translate(-50%, -50%) rotate(-50deg) scale(1.6);
        opacity: 1;
    }

    100% {
        right: -50%;
        top: -10%;
        transform: translate(-50%, -50%) rotate(130deg) scale(1.6);
        opacity: 0;
    }
}

.main-button-wrapper a {
    text-decoration: none;
    color: #000;
    width: fit-content;
    height: fit-content;
}