:root {
    --color-main: #6C00AF;
    --color-main-rgb: 108, 0, 175;
    --color-main-bright: #AE2BFF;
    --color-main-dark: #540089;
    --color-link-headline: #540089;
    --color-link-secondary: #4c378b;
    --color-black: #050404;
    --color-white: #F1F1F1;
    --color-white-light: #FFF;
    --color-yellow: #fac81b;
    --color-yellow-dark: #b4840c;
    --color-green: #519872;
    --color-green-bright: #8EC2A7;
    --color-green-dark: #41785B;
    --color-red: #DD7373;
    --color-red-dark: #CF3B3B;
    --color-blue: #3C91E6;
    --color-blue-dark: #1867B7;
    --color-gray: #6c757d;
    --color-gray-light: #e3e0e4;
    --color-gray-dark: #47475d;
}

body.dark-theme {
    --color-main: #7B2CBF;
    --color-main-rgb: 123, 44, 191;
    --color-main-bright: #9D4EDD;
    --color-main-dark: #6A1B9A;
    --color-link-headline: #C77DFF;
    --color-link-secondary: #A78BFA;
    --color-black: #E0E0E0;
    --color-white: #1E1E1E;
    --color-white-light: #0D0D0D;
    --color-yellow: #FBBF24;
    --color-yellow-dark: #F59E0B;
    --color-green: #4ADE80;
    --color-green-bright: #6EE7B7;
    --color-green-dark: #34D399;
    --color-red: #F87171;
    --color-red-dark: #FB923C;
    --color-blue: #60A5FA;
    --color-blue-dark: #3B82F6;
    --color-gray: #A1A1AA;
    --color-gray-light: #2A2A2A;
    --color-gray-dark: #D4D4D8;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-main: #7B2CBF;
        --color-main-rgb: 123, 44, 191;
        --color-main-bright: #9D4EDD;
        --color-main-dark: #6A1B9A;
        --color-link-headline: #C77DFF;
        --color-link-secondary: #A78BFA;
        --color-black: #E0E0E0;
        --color-white: #1E1E1E;
        --color-white-light: #0D0D0D;
        --color-yellow: #FBBF24;
        --color-yellow-dark: #F59E0B;
        --color-green: #4ADE80;
        --color-green-bright: #6EE7B7;
        --color-green-dark: #34D399;
        --color-red: #F87171;
        --color-red-dark: #FB923C;
        --color-blue: #60A5FA;
        --color-blue-dark: #3B82F6;
        --color-gray: #A1A1AA;
        --color-gray-light: #2A2A2A;
        --color-gray-dark: #D4D4D8;
    }

    body.light-theme {
        --color-main: #6C00AF;
        --color-main-rgb: 108, 0, 175;
        --color-main-bright: #AE2BFF;
        --color-main-dark: #540089;
        --color-link-headline: #540089;
        --color-link-secondary: #4c378b;
        --color-black: #050404;
        --color-white: #F1F1F1;
        --color-white-light: #FFF;
        --color-yellow: #fac81b;
        --color-yellow-dark: #b4840c;
        --color-green: #519872;
        --color-green-bright: #8EC2A7;
        --color-green-dark: #41785B;
        --color-red: #DD7373;
        --color-red-dark: #CF3B3B;
        --color-blue: #3C91E6;
        --color-blue-dark: #1867B7;
        --color-gray: #6c757d;
        --color-gray-light: #e3e0e4;
        --color-gray-dark: #47475d;
    }
}


body {
    font-family: Helvetica, Arial, sans-serif;
    background-color: var(--color-white);
    color: var(--color-black);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'open sans', sans-serif;
    letter-spacing: -0.04em;
}


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

.navbar-light .navbar-brand {
    color: var(--color-black);
}

.navbar-toggler-icon {
    filter: invert(0%);
    transition: filter .15s ease-in-out;
}

body.dark-theme .navbar-toggler-icon {
    filter: invert(100%);
}

@media (prefers-color-scheme: dark) {
    .navbar-toggler-icon {
        filter: invert(100%);
    }

    body.light-theme .navbar-toggler-icon {
        filter: invert(0%);
    }
}

.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover {
    color: var(--color-gray-dark);
}

.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show > .nav-link {
    color: var(--color-black);
    border-bottom: 5px solid var(--color-main);
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: var(--color-gray-dark);
    border-bottom-color: var(--color-link-headline);
}

.navbar-light .navbar-nav .nav-link {
    color: var(--color-gray);
    border-bottom: 5px solid transparent;
    transition: border-bottom-color .15s ease-in-out, color .15s ease-in-out;
    padding-bottom: 3px;
}

.navbar-light .navbar-text {
    color: var(--color-gray);
}

.navbar-light .navbar-text a {
    color: var(--color-black);
}

.navbar-light .navbar-text a:focus, .navbar-light .navbar-text a:hover {
    color: var(--color-black);
}

.dropdown-menu {
    background-color: var(--color-white-light);
}

.dropdown-item {
    color: var(--color-black);
}

.card {
    background-color: var(--color-white);
    border-color: var(--color-gray-light);
}

.card .list-group-item {
    background-color: var(--color-white);
    border: 1px solid var(--color-white);
    border-top-width: 0;
    border-right-width: 0;
    border-left-width: 0;
}

.card .list-group-item:last-child {
    border-bottom-width: 0;
}

.custom-control-label::before {
    background-color: var(--color-white);
    color: var(--color-black);
}

.form-control {
    color: var(--color-gray);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-light);
}

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

a:hover {
    color: var(--color-main);
}

.mark, mark {
    padding: .2em;
    background: linear-gradient(0deg, rgba(var(--color-main-rgb), 0.4) 43%, transparent 43%);
    color: var(--color-black);
}

.jumbotron {
    background-color: var(--color-main);
    color: #F5F5F5;
}

.jumbotron:has(.hello-europacity), .jumbotron:has(.hello-music) {
    background-size: cover;
    background-position: center;
    min-height: 400px;
    display: flex;
    align-items: center;
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
}

.jumbotron:has(.hello-europacity) {
    background-image: url('../img/europacity-wide-night.jpeg');
}

.jumbotron:has(.hello-music) {
    background-image: url('../img/hello-music.jpeg');
}

.jumbotron:has(.hello-europacity)::before, .jumbotron:has(.hello-music)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.jumbotron:has(.hello-europacity) > *, .jumbotron:has(.hello-music) > * {
    position: relative;
    z-index: 2;
}

.jumbotron:has(.hello-europacity) .row, .jumbotron:has(.hello-music) .row {
    width: 100%;
}

@media (max-width: 640px) {
    .jumbotron {
        border-radius: 0;
    }
}

.jumbotron h1 {
    color: #FFFFFF;
    text-shadow: 0 2px 1px rgba(0, 0, 0, 0.3);
}

.jumbotron a {
    color: var(--color-red);
}

.jumbotron a.btn {
    color: #F1F1F1;
    margin: 0.5rem 0.25rem;
}

.btn {
    -webkit-appearance: none;
    appearance: none;
}

.btn-success {
    color: #F1F1F1;
    background-color: var(--color-green);
    border-color: var(--color-green);
}

.btn-success:hover {
    background-color: var(--color-green-dark);
    border-color: var(--color-green-dark);
}

.btn-primary {
    color: #F1F1F1;
    background-color: var(--color-main);
    border-color: var(--color-main);
}

.btn-primary:hover {
    color: #F1F1F1;
    background-color: var(--color-main-dark);
    border-color: var(--color-main-dark);
}

.btn-warning {
    color: #F1F1F1;
    background-color: var(--color-yellow);
    border-color: var(--color-yellow);
}

.btn-warning:hover {
    color: #F1F1F1;
    background-color: var(--color-yellow-dark);
    border-color: var(--color-yellow-dark);
}

.btn-info {
    color: #F1F1F1;
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}

.btn-info:hover {
    background-color: var(--color-blue-dark);
    border-color: var(--color-blue-dark);
}

.badge-primary {
    color: #F1F1F1;
    background-color: var(--color-main);
}

.badge-info {
    color: var(--color-white);
    background-color: var(--color-main);
    border-color: var(--color-main);
}

.badge-info:hover, a.badge-info:hover {
    background-color: var(--color-main-dark);
    border-color: var(--color-main-dark);
}

.badge-light {
    color: var(--color-black);
    background-color: var(--color-white);
}

.badge-large {
    font-size: 100%;
}

.cursive {
    font-family: 'Lobster', cursive;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

.xxl-number {
    font-size: 207px;
    color: var(--color-main-dark);
}

.container {
    max-width: 1024px
}

.centered-content {
    text-align: center;
    margin: 20px;
}

.navbar.affix {
    -webkit-box-shadow: 0 8px 12px -10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 8px 12px -10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 8px 12px -10px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.25s;
}

.navbar-wrapper {
    min-height: 50px;
    margin-bottom: 20px;
}

nav.affix .navbar-brand {
    color: var(--color-main);
    transition: color 1s;
}

.navbar-brand {
    font-size: 1.2em;
    padding: 13px 13px;
}

.navbar-text {
    margin: 11px 15px;
}

.nav-item i.bi-rss::before {
    font-size: 1.5em;
}

.theme-switch i {
    top: -3px;
    position: relative;
}

.col-centered {
    float: none;
    margin: 0 auto;
}

.header {
    -moz-box-shadow: inset 0 -6px 15px -11px #000000;
    -webkit-box-shadow: inset 0 -6px 15px -11px #000000;
    box-shadow: inset 0 -6px 15px -11px #000000;
    overflow: auto;
}

.header:after {
    content: "";
    background-image: url('/static/core/img/header-background.jpg');
    position: absolute;
    width: 100%;
    height: 100px;
    left: 0;
    top: 0;
    z-index: -1;
}

body.dark-theme .header:after {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}

body.dark-theme .dev-badge {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

@media (prefers-color-scheme: dark) {
    .header:after {
        filter: invert(100%);
        -webkit-filter: invert(100%);
    }

    .dev-badge {
        -webkit-filter: invert(100%);
        filter: invert(100%);
    }

    body.light-theme .header:after {
        filter: none;
        -webkit-filter: none;
    }

    body.light-theme .dev-badge {
        -webkit-filter: none;
        filter: none;
    }

}

.footer {
    border-bottom-color: transparent;
    -moz-box-shadow: inset 0 6px 9px -8px #000000;
    -webkit-box-shadow: inset 0 6px 9px -8px #000000;
    box-shadow: inset 0 6px 9px -8px #000000;
    border-radius: 0;
    margin-top: 40px;
}

.footer li:not(:first-child):before {
    padding-left: 5px;
    content: " | ";
}

@media (max-width: 640px) {
    .footer li:not(:first-child):before {
        content: "";
        padding-left: 0;
    }

    .footer li {
        margin: 0;
    }
}

.footer li:first-child {
    margin-right: 0;
}

.footer li + li {
    margin-left: 0;
    margin-right: 0;
}

.half-rule {
    width: 100px;
    margin: 40px auto;
}

.rc-badge {
    min-width: 200px;
}

@media (max-width: 640px) {
    .rc-badge {
        padding: 10px;
    }
}

.sidebar .img {
    margin-bottom: 0;
}

.section-heading {
    text-transform: uppercase;
}

.text-spaced {
    font-weight: 400;
    letter-spacing: 5px;
}

.text-secondary {
    color: var(--color-gray)!important;
}

.python-powered-logo {
    width: 200px;
}