:root{
  --bgcolor:#d3d9f4;
  --headingcolor:#2b027c;
  --btncolor:#a5adf5;
  --btnshdcolor:#7b86e2;
  --pozncolor:#009;
  --warningcolor:red;
  --updatecolor:#047b84;
  --update_bck_color:rgb(197, 203, 227);
  --obsah_bck_color:#d6e5f8;
  --podcaroucolor:#313757;
  --podcaroubgcolor:#bdc9db;
  --podcarouh2color:rgb(6, 2, 112);
  --podcarouh4color:rgb(6, 2, 112);
  --nawebucolor:rgb(6, 2, 112);
  --markercolor:#0365b6;
  --pocitadlobckcolor:#bdc9db;
  --zpet_bg_color:var(--btncolor);
  --highlight:#d5be2a; 
}

html{
  background-color: #1b2f27;
}

body{
  background-color: var(--bgcolor);
  margin: auto;
  padding-left: 1.5rem;
  padding-top: 0.2rem;
  padding-right: 1rem;
  max-width: 800px;
  border-radius: 5px 5px 1px 1px;
}

h1{
  font-size: 200%;
  color:var(--headingcolor);
  text-shadow: 1px 1px 2px #0b3730;

  font-family: 'Tilt Neon', sans-serif;
/*  
  margin-right: 1.5rem;
  margin-bottom: 0px;
  height:276px;
  background-image: url("head_800.jpg");
  background-repeat: no-repeat, no-repeat;
  padding: 0px 0px 0px 20px;
  border-radius: 20px 20px 1px 1px;
  */
}

@media screen and (max-width: 600px) {
  h1{
    /*height:119px;
    background-image: url("head_600.jpg");
    */
    border-radius: 5px 5px 1px 1px;
  }
}

h2{
  font-size: 200%;
  border-top: 1px solid var(--headingcolor);
  font-family: Arial, Helvetica, sans-serif;
  color:var(--headingcolor);
  text-shadow: 2px 1px 1px #a9effd;
}

h3{
  font-size: 120%;
  font-weight: bold;
  color:var(--headingcolor);
  
  text-shadow: 1px 1px 1px #c4f0e9;
}

h4{
  font-size: 100%;
  color:var(--headingcolor);
  color:#020281;
  font-weight: bold;
  padding-left: 1.5rem;
  border-radius: 2px 15px 15px 2px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 5px 8px 5px 8px;
  margin-right: 2rem;
  font-style: italic;
}

h5{
  font-size: 80%;
  margin-left: 1.5rem;
  color:var(--headingcolor);
  font-style: italic;
}

a{
  font-weight: bold;
}

.literatura a{
  font-weight: normal;
}

.updated a{
  color:var(--updatecolor);
}

.nav{
  display:flex;
  margin-left: 1rem;
}

.nav a{
  display: block;
  width:12rem;
  margin: 1px 10px 10px 1.1rem;
  border: 2px solid var(--btncolor);
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  background-color: var(--btncolor);
  color:var(--headingcolor);
  box-shadow: 2px 2px 5px var(--btnshdcolor);
  font-family: Arial, Helvetica, sans-serif;
  font-size: smaller;
  padding: 4px 2px;

  transition-property: background-color;
	transition-duration: 0.8s;
	transition-timing-function: linear;  

}

.nav a:hover{
  color:var(--bgcolor);
  font-weight:bold;
  background-color: var(--btnshdcolor);
  box-shadow: 2px 4px 5px var(--btnshdcolor);
}

.DesignBy{
  color:#909090;
  border-top: 1px solid rgb(128, 0, 0);
  text-align:center;
  font-size: small;
  width:auto;
  padding:1px;
  margin-top: 1rem;
}
.DesignBy p{
  margin: 0.1rem 0.1rem;
}

.poznamka {
  /*font-size: small;*/
  font-style: oblique;
  color: var(--pozncolor);
  padding-left: 3rem;;
}
.mapka img{
  max-width: 98%;
  border-radius: 5px;
  box-shadow: 2px 4px 5px #48759f;
}

.mapa{
  display: flex;
  width:96%;
}
.mapa img{
  width: 150px;
  border-radius: 2px;
  box-shadow: 2px 2px 5px #7a9e86;
  transition-property: border-radius;
	transition-duration: 0.8s;
	transition-timing-function: linear;  
}
/*
.mapa img:hover{
  border-radius: 40px;
  Transform:rotate(2deg);
  box-shadow: 2px 2px 5px #7a9e86;
}
*/
.but{
  display:flex;
  width:10rem;
  margin: 2px 10px 10px 10px;
  color:var(--headingcolor);
  background-color: var(--btncolor);
  box-shadow: 2px 2px 5px var(--btnshdcolor);
  border: 1px solid var(--btncolor);
  border-radius: 12px;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: smaller;
  padding: 2px 5px;
  margin-left:1.1rem;
  justify-content: flex-start;
  align-items: center;
  column-gap: 1rem;

  transition-property: background-color;
	transition-duration: 0.8s;
	transition-timing-function: linear;  
}
.but img{
  padding-left:10px;
}

.but:hover{
  color:var(--bgcolor);
  font-weight:bold;
  background-color: var(--btnshdcolor);
  box-shadow: 2px 4px 5px var(--btnshdcolor);
}

.ilustrace-l{
  max-width:80%;
  margin-right: 5px;
  box-shadow: 2px -2px 10px var(--btnshdcolor);
}

.ilustrace-r{
  max-width:80%;
  margin-left: 5px;
  box-shadow: -2px -2px 10px var(--btnshdcolor);
}
.qr{
  width:40%;
  max-width:400px;
}


@media screen and (min-width:600px) {
  .ilustrace-l{
    float: left;
    max-width:30%;
    margin-right: 15px;
  }
  
  .ilustrace-r{
    float: right;
    max-width:30%;
    margin-left: 15px;
  }
  .qr{
    max-width:50%;
  }
}

.malyobrazekvlevo{
  float: left;
  max-width:30%;
  margin-right: 15px;
}

video{
  max-width:98%;
  margin-top: 20px;
  border-radius: 5px;
  box-shadow: 2px 2px 5px gray;
}

.clr{
  clear:both;
}

.warning{
  color:var(--warningcolor);
  font-style: italic;
}

.updated{
  color:var(--updatecolor);
  font-size: smaller;
  background-color: var(--update_bck_color);
  padding: 2px 0.5rem; 
  border-radius: 10px;
}
.aktualizace{
  color:var(--updatecolor);
  font-style: italic;
}

.podcarou{
  color:var(--podcaroucolor);
  background-color:var(--podcaroubgcolor);
  padding:0.1rem 1rem;
  border-radius: 10px;
  box-shadow: 2px 2px 5px gray;
  font-size: smaller;
}

.podcarou h2{
  color:var(--podcarouh2color);
  text-shadow: 0px -1px 1px #0b3730;
  font-size: small;
  border:0px;
}
.podcarou h4{
  color:var(--podcarouh4color);
  text-shadow: 0px 0px 1px #0b3730;
  font-size: smaller;
  border-top: 1px darkblue solid;
  border-radius: 4px;
}

.pocitadlo {
  background-color: var(--pocitadlobckcolor);
  width: 2.8rem;
  margin:0px auto;
  padding:0.2rem 0.5rem;
  border-radius: 15px;
}
.pocitadlo a{
  font-size: small;
  color:white;
}
.pocitadlo img{
  height: 10px;
}  
/*
.pocitadlo::before{
  font-size: small;
  content: "visitors";
}
*/
.nawebu{
  font-style: italic; 
  color:var(--nawebucolor);
}

.nawebu li{
  margin-bottom: 0.8rem;
}

/*********************/
/*https://css-tricks.com/using-styling-the-details-element/*/
summary::marker {
  color: var(--markercolor);
  font-size: 1.2rem;
  font-weight: bold;
  font-style: normal;
  /*font-family: webdings;*/
  /*content: "6 ";sipka dolu*/
  content: "\21E9\0020";  
  ;
}
/*https://www.alanwood.net/unicode/arrows.html*/


details {
  border-block-end: 1px dotted #000;
  margin-block: 0.5rem;
  padding-block: 0.5rem;
  padding:0.5rem;
  background-color: var(--update_bck_color);
  border-radius: 5px;
}


summary {
  /* Pin the custom marker to the container */
  position: relative;
  padding-right: 1rem;
  /* Register summary as an anchor element */
  anchor-name: --summary;
  &::before,
  &::after {
    /* Custom marker dimensions */
    content: "";
    border-block-start: 4px solid var(--markercolor);
    height: 0;
    width: 0.8rem;
    
    /* Positions the lines */
    inset-block-start: 50%;
    inset-block-start: 20%;
    inset-inline-end: 0;
    
    /* Anchor the shape to the summary */
    position: absolute;
    position-anchor: --summary;
    position-area: top end;
  }
  
  /* Rotate just the ::after line to create a "+"" shape */
  &::after {
    transform: rotate(90deg);
    transform-origin: 50%;
  }
}

/* Rotate the line when open */
details[open] summary::after {
  transform: rotate(0deg);
}
details[open] {
  background: var(--podcaroubgcolor);
}

audio {
  filter: invert(90%) drop-shadow(1px 1px 2px blue);
  
  width: 90%;
  height: 55px;
}

.pohadka{
 font-style: italic; 
 padding-left: 1em;
}

.zpet{
  display: block;
  background-color: var(--zpet_bg_color);
  color:var(--headingcolor);
  width:8rem;
  margin: 1px 10px 10px 1.1rem;
  border: 2px solid var(--btncolor);
  padding: 4px 2px;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  box-shadow: 2px 2px 5px var(--btnshdcolor);
  font-family: Arial, Helvetica, sans-serif;
  font-size: smaller;
}

table{
  border-collapse:collapse;
  border:darkblue 3px solid;
}
td,th{
  border: blue 1px solid;
  padding: 0.2rem 0.8rem;
  text-align: center;
}
th{
  color:darkblue;
}

.highlight{
  background-color: var(--highlight);
  padding-left:0.3rem;
  padding-right:0.3rem;
}

.obsah{
  background-color: var(--obsah_bck_color);
  color:var(--updatecolor);
  border-radius: 10px;
}
.obsah {
  list-style: none; 
}
.obsah li {
  color:blue;
}
.obsah li a {
  text-decoration: none;
}
.obsah li:before {
  content: '\2192'; 
  padding-right:10px;
}

.obsah ul.li.a{
  text-decoration: none;
}