:root {

    --bs-border-color: #737373;
}
body.bg {font-size: 1.1rem; background-image: url('img/pole.jpg'); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: 100%}
/* todo zvětšit nadpisy */

header {position: relative; background: white; height: 100vh; overflow: hidden;}
header img {max-height: 70vh; max-width: 150%; height: auto; margin: 3rem -12rem 0;}
header #text {position: absolute; bottom: 15%; left: 0; right: 0; text-shadow: 0 0 16px white; font-family: 'Parisienne', cursive;}
header #text h1 {font-size: 3.4rem; font-weight: bold}
header #text span {font-size: 2.4rem;}

nav {background: white; box-shadow: 0 10px 10px -10px gray;}
.nav-link, .nav-link:hover, .nav-link:active {padding: 0.2rem 0; color: black;}

section {padding: 5rem 0;}
section a {color: inherit;}

section.yellow {background: #fff7d5;}
section.white {background: #fff;}
section.dark {background: #312e2e; color: white;}
section.transparent div.text {display: inline-block; padding: 1rem; text-shadow: 0 0 5px white; background: rgba(255, 255, 255, 0.5)}

#countdown-content {display: inline-flex; justify-content: center; gap: 1rem;}
#countdown-content > div {font-size: 2rem; width: 3.5rem; flex-grow: 1;}
#countdown-content > div >span {font-size: 1.2rem;}

.timeline {max-width: 880px; margin: 0 auto; padding: 0 20px; position: relative;}
.timeline .center-line{position: absolute; height: 100%; width: 4px; background: black; left: 40px; transform: translateX(-50%);}
.timeline .row {display: flex; margin: 30px 0 3px 60px;}
.timeline .row:nth-child(2n){justify-content: flex-start;}
.timeline .row:nth-child(2n+1){justify-content: flex-end;}
.timeline .row > div {background: white/* #fff7d5 */; border-radius: 5px; width: 100%; padding: 20px; position: relative;}
.timeline .row > div .details {background: white;}
.timeline .row > div .icon {background: #fff7d5; position: absolute; height: 80px; width: 80px; text-align: center; padding: 15px;}
.timeline .row:nth-child(2n) > div .icon{top: -5px; left: -80px;}
.timeline .row:nth-child(2n+1) > div .icon{top: -5px; left: -80px;}
.timeline .row > div .details {display: flex; align-items: center; justify-content: space-between;}
.timeline .row > div .details .title{font-weight: 600; flex-grow: 1; text-align: center;}

.free {color: green;}
.full {color: red;}

.gallery {display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 0.5rem; max-height: 500px; overflow: auto; box-shadow: 0px 0px 7px gray}
.gallery a {text-decoration: none; overflow: hidden;}
.gallery img {width: 150px; height: 150px; object-fit: cover;}

.btn {background: #fff7d5; text-align: center; font-size: 1em;}
.btn:hover {background: #312e2e; color: white;}

.video-container { margin: 0 auto; position: relative; padding-bottom: 50%; padding-top: 30px; height: 0; overflow: hidden;}
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#kontakt table td:nth-child(2) {padding: 0.1rem 0.6rem;}

footer {background: white;}

@media only screen and (min-width: 500px) {
    header #text {bottom: 10%;}
    header #text h1 {font-size: 5rem; font-weight: bold}
    header #text span {font-size: 3.5rem;}
}

@media only screen and (min-width: 700px) {
    body {font-size: 1.15rem}
    header #text h1 {font-size: 6rem; font-weight: bold}
    header #text span {font-size: 4.5rem;}
    #countdown-content > div {font-size: 3rem; width: 8rem; flex-grow: 1;}
    #countdown-content > div > span {font-size: 2rem;}

    .timeline .center-line {left: 50%;}
    .timeline .row {margin: 50px 0;}
    .timeline .row > div {width: calc(50% - 60px);}
    .timeline .row:nth-child(2n) > div .icon {right: -100px; left: unset;}
    .timeline .row:nth-child(2n+1) > div .icon {left: -100px;}
    .timeline .row:nth-child(2n) > div .details {flex-direction: row-reverse;}

}

@media only screen and (min-width: 1000px) {
    header #text h1 {font-size: 8rem; font-weight: bold}
    header #text span {font-size: 5rem;}
}