:root {
    --jumbotron-padding-y: 3rem;
    --color-background: #f0f2f3;
    --color-admin: #f44336;
    --color-supporter: #e91e63;
    --color-moderator: #2196f3;
    --color-developer: #00bcd4;
    --color-eventmanager: #ffd32a;
    --color-text: #293238;
    --color-border: rgba(86, 176, 78, 0.42);
    --color-accent: #56B04E;
    --color-light-accent: #52cc47;
}

@media (prefers-color-scheme: dark) {
    :root {
        --jumbotron-padding-y: 3rem;
        --color-background: #38444c;
        --color-admin: rgba(244, 67, 54, 0.65);
        --color-supporter: rgba(233, 30, 99, 0.65);
        --color-moderator: rgba(33, 150, 243, 0.65);
        --color-developer: rgba(0, 188, 212, 0.65);
        --color-eventmanager: rgba(255, 211, 42, 0.90);
        --color-text: #f0f2f3;
        --color-border: #697278;
        --color-accent: rgb(77, 150, 71);
        --color-light-accent: #52cc47;
    }

    ::selection {
        background: var(--color-light-accent);
        /* WebKit/Blink Browsers */
    }

    ::-moz-selection {
        background: var(--color-light-accent);
        /* Gecko Browsers */
    }

    img {
        -webkit-filter: brightness(85%);
        filter: brightness(85%);
    }

    .dropdown-menu,
    .show {
        background-color: var(--color-accent);
        color: var(--color-text);
    }

    .dropdown-item {
        color: white !important;
    }

    .dropdown-item:hover,
    .dropdown-item {
        background-color: var(--color-accent);
    }
}

.veryslow {
    animation-duration: 6s;
}

body {
    background-color: var(--color-background);
    color: var(--color-text);
}

.card {
    background-color: var(--color-background);
}

.card-footer {
    border: none;
}

.list-group,
.list-group-item {
    background-color: var(--color-background);
    border-color: var(--color-border);
}


.team {
    background-color: var(--color-accent);
}

.team-admin {
    background-color: var(--color-admin);
}

.team-supporter {
    background-color: var(--color-supporter)
}

.team-moderator {
    background-color: var(--color-moderator);
}

.team-developer {
    background-color: var(--color-developer);
}

.team-eventmanager {
    background-color: var(--color-eventmanager);
}

.icon-white {
    color: #ffffff;
}


.jumbotron {
    padding-top: var(--jumbotron-padding-y);
    padding-bottom: var(--jumbotron-padding-y);
    margin-bottom: 0;
    background-color: var(--color-background);
}

@media (min-width: 768px) {
    .jumbotron {
        padding-top: calc(var(--jumbotron-padding-y) * 2);
        padding-bottom: calc(var(--jumbotron-padding-y) * 2);
    }
}

.jumbotron p:last-child {
    margin-bottom: 0;
}

.jumbotron-heading {
    font-weight: 300;
}

.jumbotron .container {
    max-width: 40rem;
}

footer {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

footer p {
    margin-bottom: .25rem;
}

a:link,
a:visited,
a:hover,
a:active {
    color: var(--color-accent);
    text-decoration: none;
}


@font-face {
    font-family: "cubano-regular";
    src: url("./fonts/cubano-regular-webfont.eot");
    src:
        url("./fonts/cubano-regular-webfont.woff") format("woff"),
        url("./fonts/cubano-regular-webfont.otf") format("opentype"),
        url("./fonts/cubano-regular-webfont.svg#filename") format("svg");
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
    font-family: 'cubano-regular', Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
}

.navbar,
.navbar .navbar-brand,
.navbar .navbar-text,
.navbar .navbar-text a,
.navbar .navbar-toggle,
.navbar .navbar-nav .nav-link,
.navbar .navbar-link:hover,
.navbar .navbar-link,
.navbar .navbar-text a:hover,
.navbar .navbar-text a:focus,
.navbar .navbar-brand:hover,
.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus,
.navbar .navbar-brand:focus,
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
    color: #f0f2f3;
    background-color: var(--color-accent);
}