.radius {
    border-radius: var(--border-radius); 
}

.circle {
    border-radius: 50%;
}

/* main font color */ 

.border-thin {
    border: 1px solid var(--color);
}

.border-medium {
    border: 3px solid var(--color);
}

.border-large {
    border: 5px solid var(--color);
}

/* second font color */ 

.border-thin-sec {
    border: 1px solid var(--sec-color);
}

.border-medium-sec {
    border: 3px solid var(--sec-color);
}

.border-large-sec {
    border: 5px solid var(--sec-color);
}

/* main background color */ 

.border-thin-alt {
    border: 1px solid var(--bg-color);
}

.border-medium-alt {
    border: 3px solid var(--bg-color);
}

.border-large-alt {
    border: 5px solid var(--bg-color);
}

/* main background color */ 

.border-thin-alt-bg {
    border: 1px solid var(--sec-bg-color);
}

.border-medium-alt-bg {
    border: 3px solid var(--sec-bg-color);
}

.border-large-alt-bg {
    border: 5px solid var(--sec-bg-color);
}

/* action color */ 

.border-thin-action {
    border: 1px solid var(--action-color);
}

.border-medium-action {
    border: 3px solid var(--action-color);
}

.border-large-action {
    border: 5px solid var(--action-color);
}

.divider {
    border-bottom: 3px solid var(--color);
}

.divider-alt {
    border-bottom: 3px solid var(--sec-color);
}

@media (min-width: 768px) {
    .radius {
        border-radius: var(--border-radius-desktop); 
    }
}