.primary-button{
    padding: 30px;

    background-color: var(--primary);
    filter: drop-shadow(10px 10px var(--primary-dark)) drop-shadow(0px 0px 0px var(--primary-light));

    text-transform: uppercase;
    font-size: 32px;
    font-family: "Smooch Sans", sans-serif;
    font-weight: 600;
    color: var(--gray-100);

    outline: none;
    border: none;
    transition: all 150ms ease-out;
}

.primary-button:hover{
    filter: drop-shadow(0 0 var(--primary-dark)) drop-shadow(0px 0px 2px var(--primary));
    background-color: var(--primary-light);
}

.primary-button:active{
    filter: drop-shadow(0 0 var(--primary-dark));
    background-color: var(--primary-dark);
}

.card-button{
    outline: none;

    cursor: pointer;
    
    padding: 15px 20px;
    
    background-color: rgba(255, 255, 255, 0);
    border: solid 3px var(--gray-100);

    font-size: 30px;
    font-family: "Smooch Sans", sans-serif;
    font-weight: 600;
    color: var(--gray-100);
    line-height: 1;
    text-align: center;

    transition: all 150ms ease-out;
}

.card-button:hover{
    color: var(--gray-400);
    background-color: var(--gray-100);
}

.card-button:active{
    background-color: var(--gray-200);
}

@media (max-width: 800px) {
    .primary-button{
        padding: 30px;
        filter: drop-shadow(10px 10px var(--primary-dark)) drop-shadow(0px 0px 0px var(--primary-light));
        font-size: 28px;
    }
}