/* lobster-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lobster/lobster-v31-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/lobster/lobster-v31-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

body {
    font-family: sans-serif;
    font-size: 20px;

    margin: 0px;
    
    min-width: 300px;
}

/* Basic layout */

header {
    position: fixed;
    z-index: 300;
    top: 0px;
    left: 0px;
    right: 0px;
}

main {
    margin-top: 3em;
    min-height: 80vh;
}

footer {
    margin-top: 2em;
    min-height: 10vh;
    color: #ddd;

    display: flex;
    flex-direction: column;
}

/* Header elements */

header nav {
    display: grid;

    grid-template-columns: 1fr 0fr 1fr;
    grid-template-rows: 1fr 1fr;

    font-weight: 700;
    margin: 0;

    background: #012;
}

header nav.show-logo {
    grid-template-columns: 1fr auto 1fr;
}

header nav a {
    display: block;
    font-size: 0.9em;
    text-align: center;
    color: #ddd;

    align-self: center;
}

header nav #header-logo {
    grid-column-start: 2;
    grid-row-start: 1;
    grid-row-end: 3;
}
header nav #header-logo img {
    width: 0em;
    padding: 0;
    transition: all 1s ease;
}
header nav.show-logo #header-logo img {
    width: 3.5em;
}

header svg {
    rotate: 180deg;
}
header svg, footer svg {
    height: 2em;
    width: 100%;
}

/* main section */

main h1, main h2 {
    font-family: "Lobster";
    font-size: 2em;
    text-align: center;
    overflow: hidden;
    margin: 1em 0em;
}
main h2 {
    font-size: 1.5em;
    margin-top: 0.5em;
}
main h1::before {
    position: absolute;
    z-index: -1;
    width: 100%;
    max-width: 100%;
    display: block;
    text-align: center;
    margin-top: -0.4em;
    content: attr(title);
    white-space: nowrap;
    overflow: hidden;
    font-size: 2em;
    background: linear-gradient(rgba(136,0,0,0.5), #fff);
    background-clip: text;
    color: transparent;
    
}
main section {
}

#band-logo {
    display: block;
    margin: 0 auto;
    max-width: 90vw;
}
/* img.full-width {
    max-width: 80%;
} */

section > p, .layout-padding  {
    display: block;
    padding: 0em 0.5em;
    text-align: justify;
}

#what img {
    display: block;
    margin: 0 auto;
    max-width: 90%;
}

/* content elements */

.band-foto {
  background-image: url(../images/Pozor_Vlak-Bandfoto_500.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  box-shadow: 0px 0px 5em 2em rgba(0,0,0,0.75) inset;
  -webkit-box-shadow: 0px 0px 5em 2em rgba(0,0,0,0.75) inset;
  -moz-box-shadow: 0px 0px 5em 2em rgba(0,0,0,0.75) inset;
  height: 15em;
  overflow: hidden;
}
.band-foto p {
    border-top: 2em solid white;
    border-bottom: 2em solid white;
    transform: rotate(1deg) scaleX(2) translateY(-0.5em);
    margin: 0;
    box-sizing: border-box;
    height: 16em;
}

.embedded-players {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
}

.bandcamp-player {
    position: relative;
    border: 1px solid #ccc;
}
.bandcamp-player, .bandcamp-player iframe {
    width: 15em;
    height: 25em;
}
.embedded-players .bandcamp-player {
    margin: 1em 0em;
}

.embedded-players .bandcamp-player .consent {
    position: absolute;
    z-index: 100;
    bottom: 0;
    
    font-size: 0.7em;
    padding: 0.5em;
    text-align: center;
    
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(240, 240, 240, 0.75));
    backdrop-filter: blur(0.2em);
    -webkit-backdrop-filter: blur(0.2em);
    box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.1);
}

.bandcamp-player .consent a {
    color: #0687f5;
    text-decoration: none;
    font-weight: 700;
}

.bandcamp-player .consent a:hover {
    text-decoration: underline;
}

.bandcamp-player .btn-accept {
    display: block;
    margin: 1em auto;
    padding: 0.8em 2em;
    font-size: 1em;
    font-weight: 700;
    border: none;
    border-radius: 0.4em;
    background: linear-gradient(135deg, #800000, #600000);
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.1em 0.4em rgba(128, 0, 0, 0.5);
    white-space: nowrap;
    flex-shrink: 0;
    text-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
}

.bandcamp-player .btn-accept:hover {
    background: linear-gradient(135deg, #a00000, #800000);
    transform: translateY(-0.1em);
    box-shadow: 0 0.2em 0.8em rgba(128, 0, 0, 0.6);
}

.bandcamp-player .btn-accept:active {
    transform: translateY(0);
    box-shadow: 0 0.1em 0.4em rgba(128, 0, 0, 0.4);
}

.bandcamp-player img {
    display: block;
    width: 15em;
}

.embedded-players iframe {
    /* width: 15em;
    height: 25em; */
    border: 0;
}

#download-tiki img {
    display: block;
    margin: 0 auto;
    max-width: 70vw;
}

.center {
    text-align: center;
}

footer section {
    padding: 0.5em;
    background: #012;
}
footer section h1 {
    font-size: 1.1em;
    text-align: center;
}
footer section h2 {
    font-size: 0.8em;
    text-align: center;
}
footer a {
    color: #ddd;
}

/* Downloads section layout */
.download-card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  background: #f5f5f5;
  border-radius: 0.5em;
  padding: 1em 1.5em;
  text-decoration: none;
  color: #012;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: background 0.2s, box-shadow 0.2s;
}
.download-card:hover {
    background: #ffe5e5;
  box-shadow: 0 4px 16px rgba(128,0,0,0.10);
}
.download-title {
  font-weight: bold;
}
.download-meta {
  font-size: 0.9em;
  color: #666;
  margin-left: 1em;
}
.downloads-tiki {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tiki-caption {
    display: block;
    margin-top: 0.5em;
    font-size: 1em;
    text-align: center;
  color: #800000;
  font-weight: 600;
}

@media screen and (min-width: 500px) {
    header nav {
        grid-template-columns: 1fr 1fr 0fr 1fr 1fr;
        grid-template-rows: 1fr;
    }

    header nav.show-logo {
        grid-template-columns: 1fr 1fr auto 1fr 1fr;
    }
    header nav #header-logo {
        grid-column-start: 3;
        grid-row-end: 2;
    }


    section > p, .layout-padding {
        padding: 1em 5em;
    }
    /* main section {
        margin: 0 auto;
    } */

    .band-foto {
        background-image: url(../images/Pozor_Vlak-Bandfoto_700.jpg);
        height: 24em
    }
    .band-foto p {
        height: 25em;
    }

    .bandcamp-player, .bandcamp-player iframe {
        width: 20em;
        height: 28em;
    }
    .bandcamp-player img {
        width: 20em;
    }

    .embedded-players .bandcamp-player .consent {
        font-size: 0.9em;
        padding: 2em;
    }
}

@media screen and (min-width: 800px) {
    header {
        font-size: 1.2em;
    }
    header nav {
        padding: 0em 5em;
    }
    .nav-link {
        padding: 1em 0em;
    }
    main {
        margin-top: 5em;
    }
    section > p, .layout-padding  {
        padding: 1em 10em;
    }

    #what img {
        float: left;
        max-width: 45%;
    }
    #what:after {
        clear: both;
        content: "";
        display: table;
    }

    .band-foto {
        background-image: url(../images/Pozor_Vlak-Bandfoto_1000.jpg);
        height: 29em;
    }
    .band-foto p {
        height: 30em;
    }
    
    .bandcamp-player, .bandcamp-player iframe {
        width: 25em;
        height: 34em;
    }
    .bandcamp-player img {
        width: 25em;
    }
    .downloads-list {
      flex: 2;
      padding: 1em 10em;
    }
    .downloads-tiki {
      flex: 1;
      align-items: center;
    }
}

@media screen and (min-width: 1100px) {
    .band-foto {
        background-image: url(../images/Pozor_Vlak-Bandfoto_1300.jpg);
        height: 29em;
    }
    .band-foto p {
        transform: rotate(1deg) scaleX(2) translateY(-1em);
        height: 31em;
    }

    .bandcamp-player, .bandcamp-player iframe {
        width: 30em;
        height: 38em;
    }
    .bandcamp-player img {
        width: 30em;
    }

    .embedded-players .bandcamp-player .consent {
        font-size: 1em;
        padding: 3em;
    }
}

@media screen and (min-width: 2200px) {
    body {
        font-size: 40px;
    }
}