:root {
	--color-background: white ;
	--color-background-footer: white;
	--color-text-default: black ; 
	--color-text-inverted: white ; 
	--color-text-accent: #057fa5 ;
	--color-text-accent-inverted: black ;
	--color-base: #057fa5 ;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-background: #222 ;
		--color-background-footer: #333;
		--color-text-default: #ddd ; 
		--color-text-inverted: #222 ; 
		--color-text-accent: white ;
		--color-text-accent-inverted: white ;
		--color-base: #057fa544 ;
	}

	.alert a {
		color: var(--color-text-inverted) ;
	}
	
	.alert a:hover {
		color: var(--color-text-inverted) ;	
	}

	a {
		text-decoration: underline;
	}
	
	a:hover {
		text-decoration: none ;
	}
	
	button.navbar-toggler {
		background-color: var(--color-background-footer);
	}

	hr {
		border: 1px dotted white ;
	}

	.navbar-light .navbar-nav .show>.nav-link {
		color: var(--color-text-accent-inverted);
	}

	::-webkit-scrollbar {
		background-color: #1c1e1f;
		color: #c5c1b9;
	}
	::-webkit-scrollbar-corner {
		background-color: #181a1b;
	}
	::-webkit-scrollbar-thumb {
		background-color: #2a2c2e;
	}
	::selection {
		background-color: #005ccc;
		color: #ffffff;
	}
}
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  transition: .6s opacity ease;
}
/* Disable transitions for if reduced motion is enabled: */
@media (prefers-reduced-motion:reduce) {
  .carousel-fade .active.carousel-item-left,
  .carousel-fade .active.carousel-item-right {
    transition: none;
  }
} 

pre {
	color: var(--color-text-accent);
	background-color: var(--color-background-footer:);
}

body, .card-body, .list-group-item, div.card {
	color: var(--color-text-default);
	background-color: var(--color-background);		
}

input.form-control {
	background-color: var(--color-background-footer);
	color: var(--color-text-default);
}

span.input-group-text {
	background-color: var(--color-background-footer);
	color: var(--color-text-default);
}

footer, .card-header, .card-footer {
	background-color: var(--color-background-footer);
}
	
div.dropdown-menu.show {
	background-color: var(--color-background);		
}

.navbar-light .navbar-nav .nav-link:hover, a:hover, .navbar-light .navbar-nav .nav-link.active{
	color: var(--color-text-accent-inverted);
}

a, a.dropdown-item, a.nav-item:focus, .navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link:focus {
    color: var(--color-text-accent);
}

a.btn.btn-primary, button.btn.btn-primary {
    background-color: var(--color-text-accent);
    border-color: var(--color-text-inverted);
	color: var(--color-text-inverted);
}

a.btn.btn-primary:hover, button.btn.btn-primary:hover, a.dropdown-item:hover {
    background-color: var(--color-text-inverted);
    border-color: var(--color-text-inverted);
    color: var(--color-text-accent);
}

.btn-secondary {
    background-color: var(--color-text-inverted);
    border-color: var(--color-text-accent);
	color: var(--color-text-accent);
}

.btn-secondary:hover {
    background-color: var(--color-text-accent);
    border-color: var(--color-text-inverted);
	color: var(--color-text-inverted);
}

.jumbotron {
    background-color: var(--color-base);
}

@media (min-width: 768px) {
    .jumbotron {
        padding-top: 0;
        padding-bottom: 0;

    }

    .jumbotron .container {
        padding-top: 4rem;
        padding-bottom: 4rem;
        background-image: url(../images/cr.svg);
        background-position: right center;
        background-repeat: no-repeat;
        background-size: 400px 230px ;
    }
}

ol > li > ol > li {
	list-style-type: lower-alpha ;
}

dl > dd > ol > li {
	list-style-type: lower-alpha ;
}

ol > li > ol > li > ol > li {
	list-style-type: lower-roman ;
}