styles.css

/* Styl pro vyhledávací pole */
.search-box {
    display: flex;
    align-items: center;
    background-color: rgba(4, 4, 4, 0.85); /* Hex barva #040404 s 85% průsvitností */
    border-radius: 20px; /* Zaoblené rohy */
    padding: 0 0.520833333333333vw; /* Menší padding uvnitř boxu */
    width: 20.833333333333336vw;
    height: 3.703703703703703vh; /* Nastavení výšky */
    position: absolute; /* Umístění podle souřadnic */
    top: 30.555555555555557vh; /* Pozice y */
    left: 1.041666666666667vw; /* Pozice x */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 10; /* Zajistí, že vyhledávací box bude nad ostatními prvky */
}

/* Styl pro vyhledávací pole - ikona lupy */
.search-icon {
    width: 1.5625vw; /* Velikost ikony 30x30px */
    height: 2.777777777777778vh;
    margin-right: 0.520833333333333vw; /* Mezera mezi ikonou a inputem */
}

/* Styl pro textové pole */
.search-box input {
    background: transparent;
    border: none;
    outline: none;
    color: white;
    font-family: 'Hanalei Fill', cursive; /* Font Hanalei Fill */
    font-size: 1.9646365422396856vh;
    width: 100%;
}

/* Skrýt standardní obrys a rámeček na zaměření inputu */
.search-box input:focus {
    outline: none;
}

/* Placeholder text barva */
.search-box input::placeholder {
    color: white;
}

/* Styl pro logo, filmy a další prvky */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-image: url('images/background-4k.png'); /* Cesta k obrázku v rozlišení 4K */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Logo umístěné co nejvíce nahoře a 27px od levého kraje, které se zmenšuje s oknem */
#logo {
    position: absolute;
    top: 0;
    left: 1.40625vw;
    width: 30vw; /* Logo zabere 30% šířky okna */
    height: auto; /* Zachová proporce loga */
    z-index: 1; /* Umožní překrytí ostatních prvků */
}

/* Kontejner pro filmy s průhledným obdélníkem */
.container {
    position: relative;
    width: 100%; /* Šířka na 100% */
    height: calc(100vh - 38.88888888888889vh); /* Zbývající výška okna po odečtení 420px */
    background-color: rgba(4, 4, 4, 0.85); /* Průhledný obdélník */
    border-radius: 20px 20px 0 0; /* Zaoblené horní rohy */
    margin-top: 38.88888888888889vh; /* Umístění obdélníku na správné místo */
    padding-top: 2.777777777777778vh; /* Padding nahoře */
    box-sizing: border-box; /* Zahrnuje padding do šířky a výšky */
    overflow: hidden; /* Skryje vše, co je mimo hranice kontejneru */
}

/* Kontejner pro scrollování filmů */
.movieScrollContainer {
    width: 100%; /* Šířka stejná jako .container */
    height: calc(100% - 2.778vh); /* Výška menší o 30px než .container */
    overflow: auto; /* Povolit scrollování */
    position: relative; /* Umožní obrázkům překročit hranice */
}

/* Wrapper pro filmové kontejner */
.movieWrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.375vw, 1fr)); /* Flexibilní sloupce */
    gap: 1.563vw; /* Mezery mezi obrázky filmů */
    padding: 0 1.563vw; /* Padding uvnitř wrapperu */
    box-sizing: border-box; /* Zahrnuje padding do šířky a výšky */
}

/* Každý film - základní styl */
.movie {
    flex-basis: calc(100% / 9 - 2vw); /* Responsivní šířka filmu */
    aspect-ratio: 180 / 250; /* Zachová poměr stran */
    background-size: cover; /* Zajistí, že obrázek pokrývá celý div */
    background-position: center; /* Udrží obrázek na středě divu */
    border-radius: 0.521vw;
    position: relative; /* Umožní překrytí */
    text-align: center;
    color: white;
    transition: transform 0.3s ease;
    overflow: visible; /* Zajistí, že se zvětšení projeví */
    transform-origin: center; /* Zvětšení z centra */
    display: grid; /* Umožní centrování textu */
    align-items: center; /* Vertikální centrování textu */
    justify-content: center; /* Horizontální centrování textu */
}

/* Zvětšení při najetí myší */
.movie:hover {
    transform: scale(1.1); /* Zvětšení při najetí myší */
    z-index: 2; /* Umožní překrytí ostatních prvků */
}

/* Customizace scrollbarů pro celou stránku */
* {
    scrollbar-width: thin; /* Nastaví šířku scrollbar pro Firefox */
    scrollbar-color: white transparent; /* Nastaví barvu scrollbar pro Firefox (bílá pro tlačítko, průhledná pro pozadí) */
}

/* Customizace scrollbarů pro webkit prohlížeče (Chrome, Safari) */
.movieScrollContainer::-webkit-scrollbar {
    width: 0.625vw; /* Šířka scrollbar */
    background: transparent; /* Průhledné pozadí scrollbar */
}

.movieScrollContainer::-webkit-scrollbar-thumb {
    background-color: white; /* Barva scrollbar tlačítka */
    border-radius: 0.3125vw; /* Zaoblené rohy */
}

.movieScrollContainer::-webkit-scrollbar-track {
    background-color: transparent; /* Průhledné pozadí scrollbar */
}

/* Styl pro rozšíření Smooth Scrollbar */
.scrollbar-track {
    background: transparent !important; /* Průhledné pozadí scrollbar tracku */
}

.scrollbar-thumb {
    background: white !important; /* Bílé tlačítko scrollbar */
    border-radius: 0.3125vw !important; /* Zaoblené rohy */
}