:root {
    --primaryColor-h: 276;
    --primaryColor-s: 85%;
    --primaryColor-l: 47%;
    --primaryColor: hsl(var(--primaryColor-h),var(--primaryColor-s),var(--primaryColor-l));
    --secondaryColor: hsl(var(--primaryColor-h),var(--primaryColor-s),var(--primaryColor-l));

    --lightnessTransform: 20%;
    --darknessTransform: 7%;
}

::selection {
    background: hsl(var(--primaryColor-h), var(--primaryColor-s), calc(var(--primaryColor-l) - var(--darknessTransform)));
    color: #fff;
}

a, .text-primary, .text-primary:hover {
    color: var(--primaryColor);
}

header {
    min-height: 100vh;
    background-position: top;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .timeline .timeline-heading h4, .form-control {
    color: #000;
}

.timeline > li .timeline-image h4, .intro-text h1, .intro-text h2 {
    color: #fff;
    text-shadow: 0px 1px 6px hsl(var(--primaryColor-h), var(--primaryColor-s), calc(var(--primaryColor-l) - var(--darknessTransform)));;
}

.navbar-default .nav li a:hover, .navbar-default .nav li a:focus, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, ul.social-buttons li a:hover, ul.social-buttons li a:focus, ul.social-buttons li a:active, .timeline > li .timeline-image {
    color: #fff;
    background-color: hsl(var(--primaryColor-h), var(--primaryColor-s), calc(var(--primaryColor-l) - var(--darknessTransform)));
}

.navbar-default .navbar-brand, .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:active, .navbar-default .navbar-brand.active, .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus, a:hover, a:focus, a:active, a.active {
    color: hsl(var(--primaryColor-h), var(--primaryColor-s), calc(var(--primaryColor-l) + var(--lightnessTransform)));
}

.btn-xl, .btn-primary {
    border-color: hsl(var(--primaryColor-h), var(--primaryColor-s), calc(var(--primaryColor-l) + var(--lightnessTransform)));
    background-color: var(--primaryColor);
}

.btn-xl:hover, .btn-xl:focus, .btn-xl:active, .btn-xl.active, .open .dropdown-toggle.btn-xl, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary, .navbar-default .navbar-toggle, .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    border-color: hsl(var(--primaryColor-h), var(--primaryColor-s), calc(var(--primaryColor-l) + var(--lightnessTransform)));
    background-color: hsl(var(--primaryColor-h), var(--primaryColor-s), calc(var(--primaryColor-l) - var(--darknessTransform)));
}

section#contact .form-control:focus {
    border-color: hsl(var(--primaryColor-h), var(--primaryColor-s), calc(var(--primaryColor-l) + var(--lightnessTransform)));
}

.copyright, .list-inline.quicklinks > li > a {
    color: hsl(var(--primaryColor-h), var(--primaryColor-s), calc(var(--primaryColor-l) + var(--lightnessTransform)))
}

.team-member img {
    height: 200px;
}

.fa.fa-discord::before {
    content: url(../img/discord.svg);
}

.fa.fa-tiktok::before {
    content: url(../img/tiktok.svg);
}

.fa.fa-discord::before, .fa.fa-tiktok::before {
    display: block;
    filter: invert(100%) sepia(0%) saturate(6012%) hue-rotate(251deg) brightness(97%) contrast(109%);
    position: relative;
    top: 0.15rem;
    width: 1.7rem;
}

caption {
    font-size: large;
    font-weight: bold;
    margin-bottom: 2rem;
}

.list-inline.social-buttons > li {
    padding-left: 3px;
    padding-right: 3px;
}

.bratable {
    justify-self: center;
    margin-bottom: 2rem
}

.bratable thead th {
    text-align: center;
    border-bottom: 1px solid #8c12de;
}

.bratable th:nth-of-type(5),
.bratable td:nth-of-type(5) {
    display: none;
}

.bratable tr td {
    padding: 0.3rem 1.3rem;
}

.bratable tr:nth-child(even) {
    background: #8c12de;
    color: white;
}

.bratable.day {
    height: 2.7rem;
    display: block;
    overflow-y: hidden;
}

.bratable.day caption {
    cursor: pointer;
}

.bratable.day caption::after {
    content: " anzeigen";
}

.legend {
    margin-top: 5rem;
}

.legend > ul {
    margin: 0;
    padding: 0;
}

.legend > ul li {
    list-style-type: none;
}