/*
    CSS for YHOF Campaign Icewind Dale
    Author: Stephan Betke
    Date: 29.11.2023
    Last change: 07.01.2024
*/
    body {
      background: url('/assets/images/bg_icewind.webp');
      background-attachment: fixed;
      margin:0;
      padding:0;
      display: flex;
      justify-content: center;
      font-family: 'Recursive', sans-serif;
    }
/* Navigation */
    nav {
        background-color: rgba(255, 255, 255, 0.1);
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
    @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
      nav {
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
      }
    }
    nav a {
        align-items: center;
        display: flex;
        color: #fff;
        justify-content: center;
        letter-spacing: 2px;
        text-decoration: none;
        text-transform: uppercase;
        padding: 10px 0;
        transition: all .5s linear;
        width: 25%;
    }
    nav a:hover {
        background-color: rgba(255, 255, 255, 0.5);
    }
    nav a span.nav_text {
        margin-left: 5px;
    }
/* Pages */
    main {
        background: url('/assets/images/bg_paper.jpg') no-repeat;
        background-repeat: repeat-y;
        box-shadow: 0 -1px 11px 2px rgba(0,0,0,.28);
        max-width: 600px;
        padding-bottom: 10px;
    }
    header {
        color: #fff;
        height: 400px;
    }
    header.page_home {
        background: url('/assets/images/bg_home.png');
        background-size: cover;
    }
    header.page_sessions {
        background: url('/assets/images/bg_sessions.webp');
        background-size: cover;
    }
    header.page_locations {
        background: url('/assets/images/bg_locations.png');
        background-size: cover;
    }
    header.page_persons {
        background: url('/assets/images/bg_persons.webp');
        background-size: cover;
    }
    header.page_groups {
        background: url('/assets/images/bg_groups.webp');
        background-size: cover;
    }
    h1 {
        font-family: 'Libre Baskerville', serif;
        font-weight: normal;
        margin: 0;
        position: relative;
        top: 250px;
        left: 20px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }
    header.page_home h1 {
        top: 220px;
    }
    h2 {
        font-family: 'Libre Baskerville', serif;
        border-bottom: 2px solid;
        color: #5C3A31;
        clear: both;
    }
    h3 {
        color: #5C3A31;
    }
    section {
        padding: 0 20px 20px 20px;
    }
    blockquote {
        background-color: #e0e5c1;
        border-style: solid;
        border-width: 11px;
        border-image: url('/assets/images/bg_block.webp') 11;
        border-image-outset: 9px 0;
        box-shadow: 1px 4px 14px #888;
        clear: both;
        font-family: 'Libre Baskerville', serif;
        font-style: italic;
        margin: 40px 0;
        padding: 20px;
    }
    blockquote span {
        display: block;
        text-align: right;
        margin: 30px 10px 0 0;
    }
    blockquote span::before {
        content: '—';
        margin: 0 5px 0 0;
    }
    div.tags {
        display: flex;
        flex-wrap: wrap;
    }
    div.tags a {
        align-items: center;
        background: transparent;
        border-radius: 4px;
        color: #5C3A31;
        display: flex;
        font-size: 13px;
        text-decoration: none;
        transition: all .5s linear;
        padding: 0 5px;
    }
    div.tags a:hover, div.tags a:active {
        background: #5C3A31;
        color: #e0e5c1;
    }
    img.image_text {
        height: auto;
        transition: all 400ms cubic-bezier(.47,1.64,.41,.8);
        width: 25%;
    }
    img.large {
        margin: 5px 0;
        width: 100%;
    }
    .left {
        float: left;
        margin-top: 18px;
        margin-right: 10px;
    }
    .right {
        float: right;
        margin-left: 10px;
    }
    .top-margin {
        margin-top: 18px;        
    }
    small.date {
        align-items: center;
        color: #5C3A31;
        display: flex;
        margin-top: -10px;
    }
    small.date a {
        align-items: center;
        color: #5C3A31;
        display: inline-flex;
        text-decoration: none;
    }
/* Teaser */
    div.teaser {
        display: inline-flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 20px;
        width: 100%;
    }
    div.teaser a {
        background-color: #e0e5c1;
        border: 2px solid #5C3A31;
        color: #5C3A31;
        display: inline-flex;
        text-decoration: none;
        width: calc(50% - 10px);
        transition: background-color .5s linear, color .5s linear;
        margin-bottom: 10px;
    }
    div.teaser a:hover {
        background-color: #5C3A31;
        color: #e0e5c1;
    }
    div.teaser img {
        width: 70px;
        height: 70px;
    }
    div.teaser span {
        font-size: 13px;
        padding: 5px;
    }
    div.teaser span strong {
        font-size: 15px;
    }
    div.teaser span.material-symbols-outlined {
        display: flex;
        font-size: 73px;
        height: 70px;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        width: 70px;
    }
/* Table */
    table {
        border-collapse: collapse;
    }
    th {
        background-color: #5c3a3114;
        color: #5C3A31;
        text-align: left;
    }
    th, td {
        border: 2px solid #5C3A31;
        padding: 5px;
        vertical-align: top;
    }
/* Footer */
    footer {
        clear: both;
        margin-bottom: 20px;
        text-align: center;
    }
    footer a {
        opacity: .8;
        text-decoration: none;
        transition: opacity .5s linear
    }
    footer a:hover {
        opacity: 1;
    }
    footer img {
        width: 90px;
    }
/* Modal Dialog Window */
    #dialog-modal {
        background-color: rgba(255, 255, 255, 0.1);
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }
    @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
      #dialog-modal {
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
      }
    }
    #dialog-modal iframe {
        box-shadow: 0 -1px 11px 2px rgba(0,0,0,.28);
        width: calc(100vw - 20px);
        height: 90vh;
        margin: 0 10px;
    }
    #dialog-modal .dialog-nav {
        color: #fff;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: calc(100vw - 20px);
        margin: 10px;
        text-transform: uppercase;
        letter-spacing: 2px;
    }
    #dialog-modal .dialog-nav a {
        align-items: center;
        display: flex;
        color: #fff;
        justify-content: center;
        letter-spacing: 2px;
        text-decoration: none;
        padding: 10px 0;
        transition: all .5s linear;
    }

/* Media Queries */
    @media (max-width: 600px) {
        #page {
            overflow-x: hidden;
        }
        nav a span.nav_text {
            display: none;
        }
        div.teaser {
            flex-direction: column;
        }
        div.teaser img {
            height: auto;
            min-width: 70px;
            width: 20%;
        }
        div.teaser span.material-symbols-outlined {
            min-width: 70px;
            width: 20%;
        }
        div.teaser a {
            margin-bottom: 10px;
            width: 100%;
            align-items: center;
        }
    }