@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Oswald:wght@200..700&display=swap');



body {
    margin: 0;
    font-family: Arial, sans-serif;
    display: flex; /* Use flexbox to arrange divs horizontally */
    height: 100vh; /* Full height of the viewport */
}

.top-text h2 {
    font-size: 2rem; /* Velikost textu nahoře */
    color: #333;
}

.video-container {
    height: 100vh;
    width: 100vw;
    position: relative;
    transition: width 0.5s ease;
    display: flex; /* Flexbox pro vertikální a horizontální zarovnání */
    justify-content: center; /* Horizontální středění */
    align-items: center;
}
.video-container:hover {
    width: 200vw;
}

.video-container video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
}
    
/* Just styling the content of the div, the *magic* in the previous rules */
.video-container .caption {
  text-align: center;
  color: #dc0000;
  padding: 10px;
  position: absolute; /* Absolutní pozicování v rámci rodičovského divu */
  bottom: 3rem;
}

.caption a {
    text-decoration: none;
}

h1{
    font-family: "Kanit", sans-serif;
    color: aliceblue;
    font-size: 3rem;
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.9);
    transition: font-size 0.5s ease-in-out;
    transition: 0.5s;
}

.video-container:hover h1 {
    font-size: 3.6rem; /* Zvětšení textu při najetí */
    color: rgb(255, 0, 0);
}

.header-text {
    position: absolute;
    top: 20px; /* Vzdálenost od horní části obrazovky */
    left: 50%;
    transform: translateX(-50%); /* Horizontální středění */
    z-index: 2; /* Tento text bude nad ostatními divy */
    font-family: "Kanit", sans-serif;
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.9);
}

.header-text h1{
    color: aliceblue;
    font-size: 5rem;
}