:root {
    --primary:#253b2f;

    --primary-button-bg-color:#253b2f;
    --primary-button-bg-color-hover:#335A2B;
    --primary-button-bg-color-focus:#1b2f17;

    --primary-button-text-color:#fff;
    --primary-button-text-color-hover:#fff;
    --primary-button-text-color-focus:#fff;

    --primary-button-border-color:#253b2f;
    --primary-button-border-color-hover:#335A2B;
    --primary-button-border-color-focus:#1b2f17;

   
    --secondary-button-bg-color:#fff;
    --secondary-button-bg-color-hover:#fff;
    --secondary-button-bg-color-focus:#fff;

    --secondary-button-text-color:#253b2f;
    --secondary-button-text-color-hover:#335A2B;
    --secondary-button-text-color-focus:#1b2f17;

    --secondary-button-border-color:#253b2f;
    --secondary-button-border-color-hover:#335A2B;
    --secondary-button-border-color-focus:#1b2f17;

    --tertiary-button-bg-color:#fff;
    --tertiary-button-bg-color-hover:#fff;
    --tertiary-button-bg-color-focus:#fff;

    --tertiary-button-text-color:#253b2f;
    --tertiary-button-text-color-hover:#335A2B;
    --tertiary-button-text-color-focus:#1b2f17;

    --tertiary-button-border-color:#fff;
    --tertiary-button-border-color-hover:#fff;
    --tertiary-button-border-color-focus:#fff;

    --button-shadow: 1px 3px 6px 0px rgba(0, 0, 0, 0.15);

    --button-font-size: 15px;

    --dark-text:#58595B;
    --light-text:#CACCD7;

    --white: #fff;
    --red: #DB2340;
    --yellow: #FFCB31;
    --blue: #00A0B0;
    --light-gray: #f4f4f4;
    --dark-gray: #7B7B7B;

    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}

/* PRIMARY*/

.button-primary {
    padding: 4px 10px;
    background-color: var(--primary-button-bg-color);
    border: var(--primary-button-border-color);
    border-radius: 4px;
    color: var(--primary-button-text-color);
    font-size: var(--button-font-size);
    font-weight: normal;
    line-height: 30px;
    transition: 0.3s;
    text-align: center;
    text-decoration: none;
}

.button-primary:hover {
    padding: 4px 10px;
    background-color: var(--primary-button-bg-color-hover);
    border: var(--primary-button-border-color-hover);
    border-radius: 4px;
    color: var(--primary-button-text-color-hover);
    font-size: var(--button-font-size);
    font-weight: normal;
    line-height: 30px;
    transition: 0.3s;
    text-align: center;
    text-decoration: none;
}

.button-primary:focus {
    padding: 4px 10px;
    background-color: var(--primary-button-bg-color-focus);
    border: var(--primary-button-border-color-focus);
    border-radius: 4px;
    color: var(--primary-button-text-color-focus);
    font-size: var(--button-font-size);
    font-weight: normal;
    line-height: 30px;
    transition: 0.3s;
    text-align: center;
    text-decoration: none;
}

/* SECONDARY*/

.button-secondary {
    padding: 4px 10px;
    background-color: var(--secondary-button-bg-color);
    border: 1px solid var(--secondary-button-border-color);
    border-radius: 4px;
    color: var(--secondary-button-text-color);
    font-size: var(--button-font-size);
    font-weight: normal;
    line-height: 30px;
    transition: 0.3s;
    text-align: center;
    text-decoration: none;
}

.button-secondary:hover {
    padding: 4px 10px;
    background-color: var(--secondary-button-bg-color-hover);
    border: 1px solid var(--secondary-button-border-color-hover);
    border-radius: 4px;
    color: var(--secondary-button-text-color-hover);
    font-size: var(--button-font-size);
    font-weight: normal;
    line-height: 30px;
    transition: 0.3s;
    text-align: center;
    text-decoration: none;
}

.button-secondary:focus {
    padding: 4px 10px;
    background-color: var(--secondary-button-bg-color-focus);
    border: 1px solid var(--secondary-button-border-color-focus);
    border-radius: 4px;
    color: var(--secondary-button-text-color-focus);
    font-size: var(--button-font-size);
    font-weight: normal;
    line-height: 30px;
    transition: 0.3s;
    text-align: center;
    text-decoration: none;
}

/* TERTIARY */

.button-tertiary {
    padding: 4px 10px;
    background-color: var(--tertiary-button-bg-color);
    border: var(--tertiary-button-border-color);
    border-radius: 4px;
    color: var(--tertiary-button-text-color);
    font-size: var(--button-font-size);
    font-weight: normal;
    line-height: 30px;
    transition: 0.3s;
    text-align: center;
    text-decoration: none;
}

.button-tertiary:hover {
    padding: 4px 10px;
    background-color: var(--tertiary-button-bg-color-hover);
    border: var(--tertiary-button-border-color-hover);
    border-radius: 4px;
    color: var(--tertiary-button-text-color-hover);
    font-size: var(--button-font-size);
    font-weight: normal;
    line-height: 30px;
    transition: 0.3s;
    text-align: center;
    text-decoration: none;
}

.button-tertiary:focus {
    padding: 4px 10px;
    background-color: var(--tertiary-button-bg-color-focus);
    border: var(--tertiary-button-border-color-focus);
    border-radius: 4px;
    color: var(--tertiary-button-text-color-focus);
    font-size: var(--button-font-size);
    font-weight: normal;
    line-height: 30px;
    transition: 0.3s;
    text-align: center;
    text-decoration: none;
}