/* css pro index */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
}

body {
  background-image: url(../grafika/saten.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* ========== blok - piano - levý =====================================*/

#blok-piano-levy {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: auto;
  display: block;
  z-index: 10;
  overflow: hidden;
}

.piano-tlacitko {
  display: block;
  width: min(40vw, 440px);
  height: 100vh;
  overflow: hidden;
  cursor: pointer;
}

.piano-tlacitko img {
  width: 200%;
  height: 100%;
  display: block;
}

.piano-tlacitko:hover img {
  transform: translateX(-50%);
}

/* ========== BLOK - HLAVNÍ - PRAVÝ =====================================*/

#blok-hlavni-pravy {
  position: absolute;
  top: 0;
  left: 25vw; /* levý blok má cca 1/4 plochy = 25% , */
  width: 75vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ========== DIV - HORNÍ a DOLNÍ =====================================*/

.div-horni, .div-dolni {
  display: flex;
  flex: 1;
  width: 100%;
  justify-content: center;  /* vycentrování horizontálně */
  align-items: center;      /* vycentrování vertikálně */
  position: relative;
  height: 100%;
  bor der: 1px solid red; 
}

/* ========== DIV - TLAČÍTKO MYSTICS =====================================*/

.div-tlacitko-mystics {
  width: 900px;       /* polovina šířky obrázku */
  height: 172px;      /* plná výška obrázku */
  overflow: hidden;   /* skryje pravou polovinu */
  display: block;
  justify-content: center;
  align-items: center;
  bor der: 1px solid yellow;
}

.mystics-tlacitko {
  display: block;
  width: 1800px;     /* plná šířka obrázku */
  height: 172px;
  overflow: hidden;
  cursor: pointer;
}

/* Jemný posun v rámci vycentrování */
.div-horni .div-tlacitko-mystics {
  transform: translateY(20%); /* procentem + určuji posunutí dolů, - pak nahoru */
}

.mystics-tlacitko img {
  display: block;
  width: 1800px;
  height: 172px;
  object-fit: cover;
}

.mystics-tlacitko:hover {
  transform: translateX(-50%); /* posune obrázek o šířku skryté části */
}

/* ========== DIV - TEXT =====================================*/
.div-tlacitko-text {
  width: 800px;     /* polovina šířky obrázku */
  height: 164px;    /* plná výška obrázku */
  overflow: hidden;   /* skryje pravou polovinu */
  display: block;
  justify-content: center;
  align-items: center;
  bor der: 1px solid yellow;
}

.text-tlacitko {
  display: block;
  width: 1600px;     /* plná šířka obrázku */
  height: 164px;
  overflow: hidden;
  cursor: pointer;
}

.div-dolni .div-tlacitko-text {
  transform: translateY(-20%); /* procentem + určuji posunutí dolů, - pak nahoru */
}

.text-tlacitko img {
  display: block;
  width: 1600px;
  height: 164px;
  object-fit: cover;
}

.text-tlacitko:hover {
  transform: translateX(-50%); /* posune obrázek o šířku skryté části */
}

/*-------------------------------Boční Menu-----------------------------------*/
/*-------------------------------Boční Menu-----------------------------------*/

#mySidenav a {
  position: fixed; /* Fixuje na okno, nezávislé na kontejnerech */
  box-sizing: border-box; /* započítává padding do šířky */
  
  /*------------umístění MENU VLEVO nebo VPRAVO - --------------------------------*/
  right: -80px; /* right: záložka trčí z pravé hrany monitoru */
                 /* číslo určuje, jak moc bude záložka trčet: -70 méně, -10 hodně */

  top: 400px; /* umístění vysouvací záložky od vrchu */

  transition: 0.5s; /* rychlost vysunutí */
  padding: 15px; /* výška záložky */
  width: 117px; /* celková šířka záložky */

  text-decoration: none; /* bez podtržení */
  font-size: 22px; /* velikost písma */

  color: black; /* výchozí barva textu */
  background-color: #555; /* tmavě šedá výplň */

  border-radius: 10px 0 0 10px; /* zaoblení pravé strany */
  z-index: 9999; /* zajistí, že je záložka vždy nad ostatním obsahem */
}

/* Hover efekt – záložka se vysune */
#mySidenav a:hover {
  right: 0; /* záložka se vysune plně na obrazovku */
  background: white; /* pozadí se změní */
}