/* Globální styl */
body {
    margin: 0;
    font-family: "Dosis", sans-serif;
    background-color: #000000;
    color: white;
    text-align: center;
}

/* Navigační menu */
.navbar {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 15px 50px;
    z-index: 1000;
    margin-right: 180px;
}

/* Logo */
.logo {
    padding-left: 120px;
    /* Přidání prostoru zleva, aby logo bylo dál od rohu */
}

/* Logo */
.logo img {
    max-width: 100px;
    /* Nastav požadovanou maximální šířku */
    height: auto;
    /* Zachová poměr stran */
}

/* Menu */
nav {
    display: flex;
    justify-content: center;
    /* Udržuje menu uprostřed */
    flex-grow: 1;
    /* Umožňuje menu expandovat a posunout logo doprava */
}

/* Odkazy v menu */
nav a {
    margin: 0 30px;
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    transition: color 0.3s ease;
    font-weight: bold;
}

nav a:hover {
    color: #7c0c0c;
}

/* Záhlaví a pozadí */
header {
    position: relative;
    /* Zajištění, že pseudo-element bude správně umístěn */
    background: url("https://media.discordapp.net/attachments/1134748666356318269/1267812208616669234/image-66.png?ex=67c83b21&is=67c6e9a1&hm=df7ad0d000a8ea3443f1b0e8b74da6f14eb7bfaa3fd3e2c0c4f37ac622587006&=&format=webp&quality=lossless&width=550&height=309") no-repeat center center/cover;
    height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
}

header::after {
    content: "";
    /* Pseudo-element pro ztmavení */
    position: absolute;
    bottom: 0;
    /* Umístění na spodní část */
    left: 0;
    right: 0;
    height: 50%;
    /* Výška ztmavení (můžete upravit podle potřeby) */
    background: linear-gradient(to top,
            rgba(16, 13, 13, 1),
            rgba(16, 13, 13, 0));
    /* Plynulý přechod */
    z-index: 1;
    /* Umístění pod text, ale nad pozadím */
}

.background-overlay {
    position: absolute;
    /* Umožňuje překrytí na obrázku */
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    bottom: 0;
    /* Pokrývá celý header */
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0));
    /* Přechod od tmavé k průhledné */
    z-index: 1;
    /* Zajišťuje, že overlay je nad obrázkem */
}

.background-transition {
    height: 100px;
    /* Nastavte výšku podle potřeby */
    background: linear-gradient(to top,
            rgba(44, 44, 44, 1),
            rgba(44, 44, 44, 0));
    /* Přechod od tmavé barvy k průhledné */
}

.overlay .btn {
    display: block;
    /* Zajistí, že tlačítko zabere celou šířku */
    margin-top: 20px;
    /* Vytvoří prostor nad tlačítkem */
    text-align: center;
    /* Zarovná text uvnitř tlačítka */
}


.btn {
    background-color: #D8B4E2;
    color: black;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 8px;
    font-size: 1.2rem;

    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-weight: bold;
    cursor: pointer;
    /* Změňte z-index na 3 */
    max-width: 200px;
    /* Maximální šířka tlačítka */
    margin: 0 auto;
}

.btn:hover {
    background-color: #7c0c0c;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.overlay {
    position: relative;
    /* Zajišťuje, že text je nad overlay */
    z-index: 1;
    /* Zajišťuje, že overlay je pod tlačítkem */
}

/* Tmavý překryv */
.overlay {
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

.content {
    text-align: center; /* Zarovnanie textu horizontálne */
    z-index: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center; /* Zarovná obsah horizontálne do stredu */
    justify-content: center; /* Zarovná obsah vertikálne do stredu */
    max-width: 600px;
}

/* Zarovnanie textu */
.content h1 {
    font-size: 5rem;
    margin: 20px;
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}


.content h1 span {
    color: white;
    /* Žlutá barva */
}

.next-tournament {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    margin: 30px;
    border-radius: 10px; /* Zaoblenie rohov */
    margin-top: 30px;
    box-shadow: 0 2px 10px rgba(218, 218, 218, 0.5);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    background-color: #29E7CD;
    gap: 30px;
}


.odpocet {
    font-size: 2rem;
    margin: 10px;
    display: flex;
    align-items: center;
    font-weight: bold;
    list-style-type: none;
    gap: 30px;
    margin-bottom: 30px;
    margin-left: -20px;
    margin-right: -20px
}

.titleodpocet {
    font-size: 2rem;
    display: box;
    align-items: center;
    font-weight: bold;
}

.tournament-info {
    font-size: 2rem;
    display: flex;
    align-items: center;
    font-weight: bold;
}

.calendar-icon {
    width: 60px;
    /* Nastavte požadovanou šířku ikony */
    height: auto;
    /* Udržujte poměr stran */
    margin-right: 10px;
    /* Zvětšení mezery mezi ikonou a textem */
    fill: #fbbc04;
    /* Pokud chcete změnit barvu SVG, je třeba upravit přímo SVG nebo použít CSS */
}

.tournament-info span {
    font-size: 1.2rem;
    /* Velikost textu vedle ikony */
}

.tournament-info i {
    margin-right: 10px;
}

.btn-signup {
    background-color: #fbbc04;
    padding: 15px 30px;
    color: black;
    text-decoration: none;
    font-size: 1.2rem;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    z-index: 3;
    /* Změňte z-index na 3 */
}

.btn-signup:hover {
    background-color: #f9a602;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.button-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Tři sloupce na řádek */
    gap: 10px;
}

.image-btn img {
    width: 200px;
    /* Přizpůsobit velikost tlačítka */
    height: auto;
    display: block;
    box-shadow: 0 5px 15px #D8B4E2;
    margin: 10px;
}

.spacer {
    grid-column: 1 / 2;
    /* Prázdná buňka pro vycentrování posledního tlačítka */
}

.image-btn.center {
    grid-column: 2 / 3;
    /* Poslední tlačítko bude přesně uprostřed třetí řady */
}

.image-btn {
    flex: 1;
    /* Tlačítka budou mít stejnou šířku */
    margin: 0 15px;
    /* Přidání mezery mezi tlačítky */
}

/* Nový CSS pro zarovnání sedmého tlačítka uprostřed */
.button-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    justify-items: center;
}

.button-section .image-btn:nth-child(7) {
    grid-column: 2 / 3;
    /* Sedmé tlačítko bude uprostřed */
}

/* Stylování obrázků */
.image-btn img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    /* Přidání zaoblení rohů */
    transition: transform 0.3s ease;
    /* Přidání animace na hover */
}

.image-btn img:hover {
    transform: scale(1.02);
    /* Zvětšení obrázku na hover */
}

/* Styl pro mobily */
@media (max-width: 500px) {

    /* Globální styl pro mobily */
    body {
        font-size: 14px;
        /* Měníme velikost písma pro menší obrazovky */
    }

    /* Navigační menu */
    .navbar {
        flex-direction: column;
        /* Přepneme na sloupcové uspořádání pro mobil */
        padding: 10px 10px;
        /* Zmenšíme padding */
        margin-left: 140px;
    }

    .logo {
        padding-left: 1px;
        /* Přidání prostoru zleva, aby logo bylo dál od rohu */
    }

    /* Odkazy v menu */
    nav a {
        margin: 10px 10px;
        /* Změníme margin na vertikální pro lepší uspořádání */
        font-size: 1rem;
        /* Měníme velikost písma */
    }

    /* Záhlaví a pozadí */
    header {
        height: 400px;
        /* Snížíme výšku headeru pro mobil */
    }

    /* Zarovnání textu */
    .content {
        font-size: 2.5rem;
        /* Zmenšíme velikost textu pro mobil */
        margin-top: 50px;
        margin-left: 25px;
    }

    .content h1 {
        font-size: 2.5rem;
        /* Zmenšíme velikost textu pro mobil */
    }

    .next-tournament {
        flex-direction: column;
        /* Přepneme na sloupcové uspořádání */
        padding: 10px;
        /* Zmenšíme padding */
        margin-left: 6px;
    }

    .tournament-info {
        font-size: 1.5rem;
    }
}

.custom-rules-text {
    list-style-type: none;
    /* Odstraní tečky */
    padding-left: 15px;
    /* Odstraní odsazení na začátku seznamu */
    text-align: left;
    /* Zarovná text na levý okraj */
}

.custom-rule-item {
    margin-bottom: 10px;
    /* Prostor mezi položkami */
    font-size: 1.5rem;
    /* Zvětšení textu */
}

.custom-rules-text {
    background-color: #151515; /* Stredne šedá */
    padding: 20px; /* Pridaj padding, aby obsah nebol úplne pri okrajoch */
    font-size: 2rem;
    /* Zvětšení textu */
    text-align: left;
    /* Zarovnání textu na levý okraj */
    line-height: 1.6;
    /* Větší mezery mezi řádky pro lepší čitelnost */
    padding: 50px;
    /* Prostor kolem textu */
    word-wrap: break-word;
    /* Povolit zalomení dlouhých slov */
    white-space: normal;
    font-weight: bold;
    /* Zajistí, že text se bude lámat na konci řádku */
}

.title {
    font-size: 6rem;
    margin-bottom: -90px; /* Zmeňte túto hodnotu podľa potreby */
    /* Zvětšení textu */
    background-color: #151515; /* Stredne šedá */
    padding: 20px; /* Pridaj padding, aby obsah nebol úplne pri okrajoch */
}

.title2 {
    font-size: 4rem;
    /* Zvětšení textu */
}


@media (max-width: 750px) {
    .button-section {
        flex-direction: column;
        /* Přepneme na sloupcové uspořádání pro mobil */
        align-items: center;
        /* Udržujeme všechny prvky na středu */
        gap: 32px;
    }
}

@media (max-width: 1000px) {
    .next-tournament {
        flex-direction: column;
        /* Přepneme na sloupcové uspořádání */
        gap: 0;
    }
}
  