.more-button{
    display: block;
    padding: 0.5rem 1rem;
    margin: 0.5rem;
    width: fit-content;
    background-color: var(--action);
    border: var(--action) solid 1px;
    text-align: center;
    text-decoration: none;
    color: white;
    border-radius: .25rem;
}

.more-button:hover{
    cursor: pointer;
    background-color: var(--action);
    border: solid var(--action) 1px;
    color: white;
}

.pinn-button{
    height: 2rem;
    width: 2rem; 
    background-color: black;
    border-radius: 100%;
}

.call-to-action-button{
    display: block;
    padding: 0.5rem 1rem;
    width: fit-content;
    background-color: white;
    color: black;
    border: gray solid 1px;
    text-align: center;
    border-radius: 10rem;
    margin: 1rem;
    text-decoration: none;
}
.call-to-action-button:hover{

    cursor: pointer;
    background-color: black;
    color: white;
}













/* CHIPS  Filter Chips, selection Chips*/

.chips{
    display: block;
    padding: 0.5rem 1rem;
    width: fit-content;
    background-color: transparent;
    color: black;
    text-align: center;
    border-radius: 10rem;
    margin: .5rem 0.5rem;
    text-decoration: none;
    border: solid var(--background-gray) 1px;

    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1.25px;
}
.chips-active{
    color: white;
    border: solid var(--action) 1px;
    background-color: var(--action);
}

.chips:hover,
.chips-active:hover{
    cursor: pointer;
}


















.header-nav-button{
    margin: .5rem;
    padding: 0.5rem 1rem;
    width: fit-content;
    background-color: transparent;
    color: black;
    text-align: center;
    text-decoration: none;
    background-color: transparent;
    border: solid 1px lightgray;
    border-radius: .25rem;
}


.header-nav-button:hover{
    cursor: pointer;
    background-color: var(--action);
    border: solid 1px var(--action);
    color: white;
}



.dashboard-nav-button{
    margin: .5rem;
    padding: 0.5rem 1rem;
    width: calc(100% - 3rem - 2px);
    background-color: transparent;
    color: black;
    text-align: left;
    text-decoration: none;
    background-color: var(--background-black);
    border-radius: .25rem;
    border: solid var(--background-gray) 1px;

}

.dashboard-nav-button:hover{
    cursor: pointer;
    background-color: var(--action);
    border: solid var(--action) 1px;
    color: white;
}









.dashboardMenuButton{

    margin: .5rem;
    padding: 0.5rem 1rem;
    width: fit-content;
    background-color: transparent;
    color: black;
    text-align: center;
    text-decoration: none;
    background-color: var(--background-black);
    border: solid 1px var(--background-gray);
    border-radius: .25rem;

    cursor: pointer;
    background-color: var(--action);
    border: solid var(--action) 1px;
    color: white;
    
}