/* Home button */
.homeBtn {
    display: flex;
}

.homeBtn img {
    height: 40px;
    width: 100%;
}

.btn {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    border-radius: var(--low-radius);
}

/* Colored button */
.coloredBtn {
    background-color: var(--blue);
    color: var(--primary-color);
    border: 1px solid var(--blue);
}

.coloredBtn:hover {
    background-color: color-mix(in srgb, var(--blue) 85%, var(--opposite-color));
}


/* Secondary button */
.secondaryBtn {
    position: relative;
    overflow: hidden;
    color: var(--opposite-color);
    border: 1px solid color-mix(in srgb, var(--opposite-color) 30%, var(--primary-color) 30%);
    background: var(--primary-color);
}

.secondaryBtn:after {
    background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
    content: "";
    height: 155px;
    left: -75px;
    opacity: .5;
    position: absolute;
    top: -50px;
    transform: rotate(20deg);
    width: 75px;
    z-index: 1;
    animation: animateBtn 4s linear infinite;
}

.secondaryBtn:hover {
    background-color: var(--secondary-color);
    backdrop-filter: blur(50px);
}

.secondaryBtn:hover:after {
    animation-play-state: paused;
}


/* Arrow button */
.arrowBtn {
    display: flex;
    gap: 5px;
    align-items: center;
}


    /* Pad Version */
    @media screen and (min-width: 768px) {
        /* Home button */
        .homeBtn img {
            height: 45px;
        }
    }


        /* Desktop Version */
        @media screen and (min-width: 992px) {
            /* Home button */
            .homeBtn img {
                height: 50px;
            }
        }