body{
    font-family: var(--text-font);
    color: var(--text-color);
}

main{
    padding-top: 50px;
    padding-bottom: 50px;
}

nav {
    background-color: var(--dark-bg);
}

nav .nav-item a.nav-link{
    color: var(--khaki);
}

nav .nav-item a.nav-link.active{
    color: var(--khaki);
    opacity: 0.6;
}

nav .nav-item a.nav-link:hover{
    color: var(--khaki);
    text-shadow: 0 3px 10px var(--khaki);
}

.navbar-brand:hover {
    color: var(--title-color);
}

h1, h2, h3, h4, h5, h6, .navbar-brand{
    color: var(--title-color);
    font-family: var(--title-font);

}

a{
    color: var(--link-color);
}

footer{
    background: var(--dark-bg);
}

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

footer a:hover{
    text-decoration: underline;

}

hr{
    border-color: var(--khaki);
}

i{
    font-size: var(--icon-size);
    margin: 3px;
}

.export-area .btn:hover{
    color: var(--khaki);
    text-decoration: underline;
}

.settings-list li{
    padding: 1rem;
}

.settings-list li:hover{
    padding: 1rem;
    background: rgba(200, 200, 200, 0.2);
    cursor: pointer;
}

.settings-btn{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: start;
}

.settings-btn i{
    position: absolute;
    right: 0;
    color: var(--khaki);
}

.btn.danger:hover{
    text-decoration: underline;
}

button.navbar-toggler span.navbar-toggler-icon{
    color: var(--khaki);
}

.card .card-header, .card .card-footer{
    background: var(--dark-bg);
    color: var(--khaki);
}

.card .card-header h2 button{
    color: var(--khaki);
}

.card.success .card-header, .card.success .card-footer{
    color: var(--almond);
    background: var(--success-bg)
}

.card.success .card-header h4, .card.danger .card-header h4{
    color : var(--almond);
}

.card.danger .card-header, .card.success .card-footer{
    color: var(--almond);
    background: var(--danger-bg)
}

#artifacts-container > *{
    transform: translateX(0px) translateY(0px);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    transition: all linear 100ms;
    padding: 10px;
    border-radius: 5px;
}

#artifacts-container > *:hover{
    transform: translateX(-3px) translateY(-3px);
    box-shadow: 3px 3px 5px rgba(100, 100, 100, 0.2);
}

.project-settings .collapse{
    max-height: 400px;
    overflow-y: auto;
}