@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

.browse-projects-btn {
    display: flex;
    flex-direction: row;
    outline: none;
    align-items: center;
    justify-content: center;
    gap: 12px;

    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    position: relative;
    overflow: hidden;
    isolation: isolate;

    padding: 15px 38px;
    border: 1.5px solid #b88734;
    border-radius: 12px;

    background: linear-gradient(180deg,
            #f9df99 0%,
            #e9bd60 100%);

    color: #492906;
    margin-top: 15px;
    font-size: 18px;
    width: 100%;
    font-weight: 800;
    letter-spacing: -0.4px;

    cursor: pointer;

    box-shadow: 4px 4px 0px rgba(100, 65, 15, 0.8);

    transition: transform 180ms ease, box-shadow 180ms ease;
}

.browse-projects-btn i {
    padding-top: 3px;
    font-size: 20px;
}

/* Subtle moving reflection */
.browse-projects-btn::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 35%;
    height: 200%;

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.55),
            transparent);

    transform: rotate(25deg);
    animation: shine 3.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shine {

    0%,
    20% {
        left: -60%;
    }

    80%,
    100% {
        left: 130%;
    }
}

.browse-projects-btn:hover {
    transform: translateY(-2px);
    box-shadow: 6px 6px 0px rgba(100, 65, 15, 0.8);
}

.browse-projects-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #a66e20;
}

@media (prefers-reduced-motion: reduce) {
    .browse-projects-btn::before {
        animation: none;
    }
}