:root {
    --primary: #ffffff!important;
    --secondary:  #f0efea!important;
    --tertiary: #383838;
    --quartiary: #f0efea;
    --quintiary: #ffffff;

    --text-primary: #000000!important;
    --text-secondary: #ffffff!important;
    --text-tertiary: #00e5ee;

}

/* Body */
body {
    font-family: 'Fraunces', serif;
    /* background-image: url("../img/Melamine-wood-005.png"); */
}

/* Background */
.bg-wood {
    background-image: url("../img/Melamine-wood-005.png");
}

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

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

.bg-tertiary {
    background-color: var(--tertiary)!important;
}

.bg-quartiary {
    background-color: var(--quartiary)!important;
}

.bg-quintiary {
    background-color: var(--quintiary)!important;
}


/* Text */
.text-primary {
    color: white!important;
}


.text-secondary {
    color: white!important;
}

/* Link */
a {
    color: inherit!important
}

/* Navbar */
.navigation-clean {
    background-color: rgba(78, 30, 2, 0.45);
    color: var(--text-secondary);
    font-weight: 800;
}

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

/* Card */
.card {
    box-shadow: 2px 2px 5px 0 black;
}

.card-title {
    font-weight:800;
}

.box-shadow {
    box-shadow: 2px 2px 5px 0 black;
}

.card-header {
    background-color: var(--quartiary)!important;
    font-weight: 800;
}

/* Jumbotron */
.jumbotron {
    background-color: var(--primary)!important;
    font-family: 'Caveat', cursive;
    box-shadow: 2px 2px 20px 0 black;
    
}


.btn-outline-info {
    background: #17a2b8 !important;
    color: white !important;
}
/* Button */
.btn-outline-info:hover {
    background: white !important;
    color:#17a2b8 !important;
}

.list-group-item.active {
    background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
    color: white !important;
}

.form-control:focus {
    border-color: #17a2b8 !important;
    box-shadow: 0 0 0 0.2rem rgba(23,162,184,.25)
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before{
    background-color:#17a2b8 !important;
    border-color: #17a2b8 !important;
}

.custom-checkbox .custom-control-input:focus~.custom-control-label::before{
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(21, 162, 184, 0.25); 
}