button {
    
    justify-content: center;
    cursor: pointer;
    padding: 8px 20px;
    outline: none;
    text-decoration: none;
    font-size: 15px;
    letter-spacing: 0.5px;
    font-family: 'Inter', sans-serif;

        /* padding: 15px 25px; */
        border: unset;
        border-radius: 15px;
        color: #212121;
        z-index: 1;
        background: #e8e8e8;
        position: relative;
        font-weight: 1000;
        /*font-size: 17px;*/
        -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
        box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
        transition: all 250ms;
        overflow: hidden;
       }
       
       button::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0;
        border-radius: 15px;
        background-color: var(--primarycolor) ;
        z-index: -1;
        -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
        box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
        transition: all 250ms
       }
       
       button:hover {
        color: rgb(51, 45, 17);
       }
       
       button:hover::before {
        width: 100%;
       }
/* image */
ul.icons {
    cursor: default;
    list-style: none;
    padding-left: 0;
}  
/*background effects*/