.color-palette {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 50%;
    margin-top: 2.5rem;
}

.color {
    display: flex;
    width: 80%;
    height: 3rem;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
}

.primary {
    background: var(--primary-color);
}

.accent {
    background: var(--accent-color);
    color: var(--bg-color);
}

.secondary {
    background: var(--secondary-color);
}

.bground {
    background: var(--bg-color);
}

.font {
    background: var(--font-color);
    color: var(--bg-color);
}

.success {
    background-color: var(--success-color);
}

.danger {
    background: var(--danger-color);
}

.warning {
    background-color: var(--warning-color);
}