/* Na vrchu pridaj: */

html, body {

  margin: 0;

  padding: 0;

  width: 100%;

  height: 100%;

}



/* Celý slider natiahne okno */

.slider {

  position: relative;

  width: 100vw;

  height: 100vh;

  overflow: hidden;

  margin: 0;

  padding: 0;

}



/* Každý slide natiahni fullscreen */

.slide {

  width: 100vw;

  height: 100vh;

  background-size: cover;

  background-position: center;

  position: absolute;

  top: 0;

  left: 0;

  opacity: 0;

  transition: opacity 1s ease-in-out;

  z-index: 1;

}



.slide.active {

  opacity: 1;

  z-index: 2;

}



/* Stredová overlay vrstva */

.overlay {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  color: white;

  text-align: center;

  z-index: 3;

  padding: 1rem;

}



.overlay h1 {

  font-size: 4rem;

  font-weight: 700;

  margin: 0;

}



.overlay p {

  font-size: 1.5rem;

  margin-top: 1rem;

}



/* Tlačidlá */

.prev, .next {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background-color: rgba(255, 255, 255, 0);

  color: rgb(255, 255, 255);

  font-size: 2rem;

  border: none;

  cursor: pointer;

  padding: 0.5rem 1rem;

  z-index: 10;

}



.prev { left: 20px; }

.next { right: 20px; }