/* CSS Document */
body {font-family:Georgia,serif; font-weight:bold; background-color:#d8b880}

@media screen and (max-width: 419px) {
  body {
    font-size: .8rem;
  }
}
@media screen and (min-width: 420px) and (max-width: 699px) {
  body {
    font-size: 1rem;
  }
}
@media screen and (min-width: 700px) {
  body {
    font-size: 1.2rem;
  }
}

/* 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;
}

/* table */
table {
    border-collapse: collapse; margin:0 auto
}
table {background-color:#a77620}
table, th, td {
   border: 2px solid Gainsboro;
  text-align:center;
  vertical-align:center;
  color:Gainsboro
}

/* h */
h1, h2, h3, p {text-align:center}
h1 {font-size:1.6em; color:Black; margin-bottom:19px}
h2 {font-size:1.3em; margin-top: 2.2rem}
h3 {font-size:1.1em; margin-top: 2.2rem}

/* buttons */
strong {background-color:Chocolate; border: 2px solid Black; border-radius:18px; padding:5px}
strong:hover {background-color:Indianred}

iframe {display:block; margin:0 auto }
address {text-align: center; font-style: normal}

/* a */
a, a:visited {text-decoration:none; color:Blue}
a:focus {box-shadow: 0 0 20px 5px #7d4423; border-radius:9px;}
a:hover {box-shadow: 0 0 20px 10px #eac43d; border-radius:9px} 
a:active {box-shadow: 0 0 20px 15px Firebrick; border-radius:9px}

article {display:block; margin:0 auto}

.Centruj {
  text-align: center;
}

img#Proslov, img#Text, img#Portrety {
  max-width: 98%;
}

header, footer {
  background-color: #a77620;
  padding: 1rem;
}

/* Videa */
video {
  display: block;
  margin: .5rem auto 1rem;
  height: auto;
}
@media screen and (max-width: 949px) {
  video {
    width: 80%;
  }
}
@media screen and (min-width: 950px) {
  video, iframe {
    width: 40%;
  }
}

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

  /* 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: 950px) {

  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: bold;
  }
  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 */