/*color palettes https://colorhunt.co/palette/f6f1e9ffd93dff84004f200d (https://colorhunt.co/palettes/warm)*/
:root {
    --c1: #f1f3f8;
    --c2: #dd61e0;
    --c3: #a984fd;
    --c4: #4f1482;
    --c4-50: rgba(178, 161, 255, 0.5);
    --bs-border-radius: 1rem;
    --bs-border-color: var(--c4-50);
    --bs-body-color: var(--c4);
}

.c1 {
    color: var(--c1)
}

.c2 {
    color: var(--c2)
}

.c3 {
    color: var(--c3)
}

.c4 {
    color: var(--c4)
}

html {
    height: 100%;
}

main > .container {
    padding: 45px 15px;
}

body {
    background-color: var(--c1);
    height: 100%;
    color: var(--c4);
    font-family: Montserrat, sans-serif;
}

/* link https://www.w3schools.com/html/html_links_colors.asp*/
a:link {
    color: var(--c3);
    text-decoration: none;
}

a:hover {
    color: var(--c4);
    text-decoration: none;
}

.link-warning {
    color: var(--c3) !important;
}

.link-warning:hover, .link-warning:focus {
    color: var(--c4) !important;
}

.nav-link {
    font-size: 20px;
}

/* footer */
footer {
    background-color: var(--c3);
}

footer a:link {
    color: var(--c4);
    text-decoration: none;
}

footer a:visited {
    color: var(--c1);
}

footer a:hover {
    color: var(--c1);
    text-decoration: none;
}

a.link-dark:link {
    color: var(--c4) !important;
}

a.link-dark:hover {
    color: var(--c3) !important;
}

a.link-dark:active {
    color: var(--c4) !important;
}

/* button */
.btn-outline-warning {
    --bs-btn-color: var(--c4);
    --bs-btn-border-color: var(--c4);
    --bs-btn-hover-bg: var(--c1);
    --bs-btn-hover-border-color: var(--c4);
    --bs-btn-active-bg: var(--c2);
    --bs-btn-active-border-color: var(--c4);
}

.btn-outline-dark, .btn-secondary {
    --bs-btn-bg: var(--c1);
    --bs-btn-color: var(--c4);
    --bs-btn-border-color: var(--c4);
    --bs-btn-hover-color: var(--c4);
    --bs-btn-hover-bg: var(--c4-50);
    --bs-btn-hover-border-color: var(--c4);
    --bs-btn-active-color: 0;
    --bs-btn-active-bg: var(--c2);
    --bs-btn-active-border-color: var(--c4);
}

/* card */
.card {
    --bs-card-border-color: var(--c4-50);
}

.fit {
    height: auto;
    max-width: min(100%, 866);
}

input:read-only {
    background-color: var(--bs-secondary-bg);
}
.li2 li{
    margin-top: 0.5rem;
}