@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@1,200;1,700&family=Yanone+Kaffeesatz:wght@200;600&display=swap');

:root {
    --blue: #006699;/*036596;*/
    --lblue: #06a9b3;/*3ab3b4;*/
    --black: #24201f;

    --site1:#24201f;
    --site2:#006699;

    --navbar-height: 8rem;
    --footer-height: 16rem;
}

body {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-weight: 200;
    background-image: url('bg.png?v=2');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: white;
}
main {margin-top: 0}
h1 {font-size: 2.5rem;text-transform: uppercase;color:white}
hr {border-color: var(--lblue)}

/* font */
.font-weight-bold {font-weight: 600;}
.fs-1 {font-size: .75rem}
.fs-2 {font-size: 1rem}
.fs-3 {font-size: 1.25rem}
.fs-4 {font-size: 1.5rem}
.fs-5 {font-size: 2rem}
.fs-6 {font-size: 3rem}
.fs-7 {font-size: 4rem}

/* color */
a, a:link, a:visited, button[name=filter-btn] {color:var(--lblue)}
a:hover {color:var(--blue)}
.bg-black {background-color: var(--black)}
.bg-blue {background-color: var(--blue)}
.bg-lblue {background-color: var(--lblue)}

.text-white {color:white!important}
.text-black {color:var(--black)}
.text-lblue {color:var(--lblue)}

a.btn-outline-light {color:white}
a.btn-outline-light:hover {color:var(--lblue)!important}

.btn-black {
    color: var(--lblue)!important;
    background-color: var(--black);
    border-color: var(--black)
}
.btn-black path {fill: var(--lblue)}
.btn-black:hover, .btn-black.active {
    color: white!important;
    background-color: var(--black);
    border-color: var(--black)
}
.btn-black:hover path {fill: white}
#event-list .badge-light {background:transparent}
#event-list .badge-light:hover, #event-list .col-sm-3 a:hover {color:var(--lblue)}
#event-list .col-sm-3 a {color:white!important}

.btn-pager {background:var(--black);border-color:var(--black)}
.btn-pager.active {color:white!important;font-weight:bold}
.btn-site1 {color:white!important;border-radius:.25rem}
.btn-site2 {background:var(--site2);color:white}
.btn-site2:hover {color:white;opacity:.9}

/* navbar */
.navbar-brand svg {
    width: auto;
    height: 7rem;
    padding: .5rem;
}
.navbar-nav {margin-right:3rem}

/* ware */
#ware-tickets > div:nth-child(1) .btn {border-top-right-radius:0;border-bottom-right-radius:0}
#ware-tickets > div:nth-child(2) {background:var(--site1);text-align:center;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}
.ticket-rule {padding:1rem}

/* event nav */
#event-nav {background:transparent}
#event-nav .dates button {border-radius: .25rem}
#event-nav .dates button.active {background-color: white;border: 1px solid white}
#event-nav .dates button.active .text-white {color: var(--black)!important}
#event-nav .dates button:hover {border-bottom: 1px solid white}
#event-nav-title .event-institute, #event-nav-title .event-date, #event-nav-title .event-tags {position: relative}
#event-nav-title .ajax-remove {position: absolute;top: 0;left: 0;background-color: white;text-align: center;width: 100%;height: 100%;border-radius: .25rem;line-height: 1.75;color: var(--danger);cursor: pointer;display: none}
#event-nav-title [class*=event-]:hover .ajax-remove {display: block;}

/* pager */
.pager .btn-primary {font-weight:600;background-color: transparent;color: var(--black);border-color: transparent}
.pager .btn-primary.active, .pager .btn-primary:hover {background-color: white!important;color: var(--black)!important;border-color: white!important}

/* footer */
footer section {min-height: 16rem}
footer .logo svg path {fill:rgba(255,255,255,.3)!important}

/* article page */
body.article .navbar-brand.d-lg-none {display: block!important}
body.article main article {background:var(--black);border-radius: .25rem;}

/* event page */
body.event .navbar-brand.d-lg-none {display: block!important}
body.event main article {background:var(--black);border-radius: .25rem;}

/* tag page */
body.tag .navbar-brand.d-lg-none {display: block!important}
body.tag main section {min-height:calc(100vh - var(--navbar-height) - var(--footer-height))}

/* search page */
body.search .navbar-brand.d-lg-none {display: block!important}
body.search main section {min-height:calc(100vh - var(--navbar-height) - var(--footer-height))}

/* institute page */
body.institute .navbar-brand.d-lg-none {display: block!important}
body.institute main section {min-height:calc(100vh - var(--navbar-height) - var(--footer-height))}

@media screen and (max-width:768px){
    .rounded-left {
        border-top-right-radius: .25rem !important;
        border-bottom-left-radius: 0 !important;
    }
    .rounded-right {
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: .25rem !important;
    }
}

@media screen and (max-width:480px){
    #event-nav ul {width:100%;-ms-flex-direction: column !important;flex-direction: column !important;}
    .fs-6 {font-size:2.5rem}
    #event-list .badge {white-space:normal}
}
