@charset "UTF-8";
/* CSS Document */
/* FontFace */
@font-face {
  font-family: ModernAntiqua;
  src: url(../font/ModernAntiqua-Regular.ttf) format("truetype");
  font-weight: normal;
}

body {
  font-family: ModernAntiqua, serif;
  background-image: url("../images/ctvero-rocnich-obdobi.jpg");
  background-repeat: repeat;
  background-attachment: fixed;
  background-color: WhiteSmoke;
  font-size: 100%;
}

/* ScrollBars */
body::-webkit-scrollbar {
  width: 15px;
}
body::-webkit-scrollbar-track {
  background-color: hsl(25,36%,30%);
}
body::-webkit-scrollbar-thumb {
  background-color: hsl(27.6,87.1%,66.7%);
  border-radius: 15px;
}

/* Basic Selectors */
*,
*::before,
*::after {
  box-sizing: border-box;
}

article {
  display:block;
  margin:14px auto;
  border:double 6px black;
  background-image: url("../images/background-flower-texture.jpeg");
  position:relative
}

hr {overflow: visible; width:98%;  border-top: 5px double Black;} 
hr.Last {position:relative; top:.1rem}

h1, h2, h3 {
  font-weight: normal;
  margin:16px 12px 7px 12px;
  text-align: center
}
p {font-weight: normal; margin:0 8px 8px 8px; text-align:center}
p.Stahnout {margin:14px 22px 8px; text-align:right}
.Links {margin:0 8px 8px 22px; text-align:left}
h2.Links {margin-top:14px; margin-bottom:0; position:relative; left:2px}

ul {margin-top:0; margin-bottom:9px}
li {font-size:1.4em; font-weight: normal; list-style-type:none; position:relative; right:15px}

iframe, img {display:block; margin:0 auto}

strong {background-color:LightGray; border: 2px solid Black; border-radius:28px; padding:0; font-weight: normal;}
strong:hover {color:SaddleBrown; background-color:WhiteSmoke}
strong:active {color:WhiteSmoke; background-color:SaddleBrown}
strong img {display:inline}

span {text-decoration:underline}

address {padding-bottom:10px; font-weight: normal; font-style:normal}
address p { text-align:right; }

#Copyright {position:absolute; left:5px; top:9px}

#Jazyk {position:absolute; right:2px; top:5px}
#Jazyk p {color:WhiteSmoke; position:relative; bottom:12px; font-size:1em}
#Jazyk img {display:inline}
#Jazyk a {border-radius:10px; padding-top:30px}
#Jazyk a:link {padding:5px; background-color:transparent}
#Jazyk a:hover {padding:5px; background-color:Chocolate}
#Jazyk a:active {padding:5px; background-color:Purple}

/* Video */
video {
  display: block;
}

@media screen and (max-width: 500px) {
  p.Stahnout {
    font-size: .8em;
  }
}


@media screen and (max-width: 1035px) {

  h1 {font-size:1.8em; margin: 2rem 4rem .5rem 2rem;}
  h2 {font-size:1.6em; margin: 1rem 1rem .5rem;}
  h3 {font-size:1.4em; margin: 8px 12px 3px 12px;}
  p, li {font-size:1.2em;}

  .Leva, .Prava, .XLeva, .XPrava {
    display: block;
  }
  video {
    padding: 1rem .4rem 1rem;
  }
  .Leva video, .XLeva video {
    width: 74%;
    margin: 0 auto;
  }
  p + video {
    width: 74%;
    margin: 0 auto .5rem;
  }
}

@media screen and (min-width: 1036px) {

  article {
    width: 1008px;
  }

  h1 {font-size:2.3em; margin: 1.5rem 1rem 1rem;}
  h2 {font-size:2em; margin: 1rem 1rem .5rem;}
  h3 {font-size:1.7em; margin: 8px 12px 3px 12px;}
  p, li {font-size:1.4em;}

  .Dvojak {width:100%; height:500px}
  .Leva {float:left; width:686px}
  .Prava {float:right; width:308px; padding-right:8px}
  .XLeva {float:right; width:686px}
  .XPrava {float:left; width:308px; padding-left:8px}

  p + video {
    width: 56%;
    margin: 0 auto 1rem;
  }
  .Leva video, .XLeva video {
    width: 94%;
    margin: 0 auto;
  }

}

@media screen and (max-width: 796px) {
  #Titulky {
    display: block;
    padding-right: .8rem;
  }
}
@media screen and (min-width: 797px) {
  #Titulky {
    position: absolute;
    bottom: 30px;
    right: 17px
  }
}

.Hudba {text-align:center}

/* NAV MOBILE */
@media only screen and (max-width: 1079px) {

  /* Style the navigation menu */
  nav.Mobile {
    position: fixed;
    top: 0;
    right: 0;
    text-transform: uppercase;
    width: 60%;
    z-index: 3;
    padding-left: 1rem;
    background-color: transparent;
  }

  /* Hide the links inside the navigation menu (except for logo/home) */
  nav.Mobile #myLinks {
    display: none;
    background-color: #333;
    overflow: hidden;
    width: 100%;
  }

  /* Style navigation menu links */
  nav.Mobile a {
    color: hsl(27.6,87.1%,66.7%);
    padding: .4rem;
    text-decoration: none;
    font-size: 1.4rem;
    display: block;
  }
  nav.Mobile a.Logo {
    background-color: transparent;
  }

  /* Style the hamburger menu */
  nav.Mobile a.icon {
    background: black;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }

  /* Add a grey background color on mouse-over */
  nav.Mobile a:hover {
    background-color: #ddd;
    color: black;
  }

  /* Style the active link (or home/logo) */
  .active {
    background-color: #555;
    color: white;
  }

  /* nav Computer */
  nav.Nav {
    display: none;
  }

}  /* End of max-width: 949px */

/* HORIZONTAL NAV */
@media only screen and (min-width: 1080px) {

  body {
    --nav-height: 40px;
    padding-top: var(--nav-height);
  }

  nav.Nav {
    width: 100%;
    height: var(--nav-height);
    position: fixed;
    top: 0;
    left: 0;
    text-transform: uppercase;
    background-color: hsla(25,36%,30%, 0.0);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    transition: .3s;
    z-index: 3;
  }
  .NavLink, .NavLink:visited {
    color: hsl(27.6,87.1%,66.7%);
    text-decoration: none;
    margin: 0 .6rem;
    background-color: hsl(25,36%,30%);;
    padding: .2rem .5rem .3rem;
    border-radius: .5rem;
    border: 2px hsl(27.6,87.1%,66.7%) solid;
    font-weight: normal;
  }
  a.NavLink:hover {
    border: 2px #ddd solid;
    color: #ddd;
    background-color: #222;

  }
  a.NavLink:active {
    border: 2px #222 solid;
    color: #222;
    background-color: #ddd;
  }

  .NavHidden {
    transform: translateY(calc(-1 * var(--nav-height)));
    box-shadow: none;
  }

  nav.Mobile {
    display: none;
  }

}  /* End of min-width: 950px */

a, a:visited {color:Blue; text-decoration:none}
a:hover {color:Brown}
a:active {color:Purple}