/* Odkazy bez podtržení */
a {
  text-decoration: none;
}

/* Odkazy, které se podtrhnou až po najetí myší */
a:hover {
  text-decoration: underline;
}

/* Odkazy v různých barvách */
a {
  color: #007bff; /* Barva odkazů */
}

a:hover {
  color: #0056b3; /* Barva odkazů po najetí myší */
}

.content .article-container {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    justify-content: center;

}

.content-mobile .article-container {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    justify-content: center;

}

.fab {
  text-decoration: none;
  color: white;
}
.fab:hover {
  text-decoration: none;
  color: blue;
}
.fa-x-twitter:hover {
  color: black;
}
.fa-threads:hover {
  color: black;
}
.fa-youtube:hover {
  color: red;
}
.fa-tiktok:hover {
  color: pink;
}
.fa-instagram:hover {
  color: purple;
}
.fa-flickr:hover {
  color: magenta;
}
.fa-discord:hover {
  color: #5865F2;
}

.article-box {

    display: block;

    width: calc(50% - 20px); /* Adjust based on container width and desired gap */

    text-decoration: none;

    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

    border-radius: 8px;

    overflow: hidden;

    color: #333;

    transition: transform 0.3s ease; /* Smooth transition for the box */

    background-color: #fff; /* Default background color */

}



/* Dark Theme */

.dark-theme .article-box {

    color: #333;

    background-color: #2a2a2a; /* Default background color for dark theme */

    box-shadow: 0 4px 8px rgba(255,255,255,0.1); /* Lighter shadow for dark mode */

}



.dark-theme .article-box:hover {

    background-color: rgba(255,255,255,0.1); /* Slightly lighter background on hover for dark theme */

}



.article-box:hover {

    transform: scale(1.03); /* Slightly enlarge the box on hover */

    z-index: 1; /* Ensure the zoomed-in box is above others */

    background-color: rgba(0,0,0,0.1); /* Darker background on hover */

}



.article-box img {

    width: 100%;

    height: auto;

    aspect-ratio: 16/9;

    object-fit: cover;

    transition: transform 0.3s ease; /* Smooth transition for the image */

}



.article-box:hover img {

    transform: scale(1.1); /* Zoom in the image */

}



.article-info {

    padding: 0px 15px;

}



.article-date {

    font-size: 0.7em;

    color: #666;

    font-family: 'Arial', sans-serif; /* Example: Change to any font you prefer */

    margin-bottom: 5px; /* Adjust space between date and title */

}



.article-title {

    font-size: 1.4em;

    margin-top: 0; /* Reduce any default margin for consistency */

    color: #333;

    font-weight: bold; /* Optional: Adds emphasis to the title */

}



.article-box h3 {

    margin-bottom: 10px; /* Adjusted bottom margin */

}



/* Dark mode adjustments */

.dark-theme .article-title {

    color: #EAEAEA; /* Lighter text for dark mode for better visibility */

}



/* Responsive adjustment */

@media (max-width: 600px) {

    .article-box {

        width: 100%; /* Full width on smaller screens */

    }

}


header {

    position: relative;

    padding: 20px 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    /* Adjusted to space-between */

}



.theme-switcher {

    /* Adjust your theme switcher position like this */

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    z-index: 10;

}



#theme-toggle {

    /* Add styles for the theme toggle if needed */

    background: none;

    border: none;

    font-size: 24px;

    cursor: pointer;

    color: inherit;

    margin-right: 20px;

    /* Or adjust as needed */

}







.theme-switcher {

    position: absolute;

    right: 20px;

    top: 50%;

    transform: translateY(-50%);

    z-index: 10;

}



#theme-toggle {

    background: none;

    border: none;

    font-size: 24px;

    cursor: pointer;

    color: inherit;

    /* Adapts to light/dark theme */

}



/* Global dark theme styles */

.dark-theme {

    background-color: #121212;

    /* Dark background for the whole page */

    color: #e0e0e0;

    /* Lighter text for better readability */

}



.dark-theme header,

.dark-theme footer {

background: linear-gradient(135deg, #8a8a8a 0%, #1a1a1a 100%);


}



.dark-theme nav a,

.dark-theme .hamburger-menu a {

    color: #d0d0d0;

}



.dark-theme nav a:hover,

.dark-theme .hamburger-menu a:hover {

    background-color: #3a3a3a;

    color: #ffffff;

}



.dark-theme .ad-box,

.dark-theme section {

    background-color: #1e1e1e;

    /* Darker shade for content boxes */

    color: #e0e0e0;

}



.dark-theme .ad-box:hover,

.dark-theme section:hover {

    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);

    /* Lighter box-shadow */

}



/* Adjust any other specific elements as necessary */



body {

    font-family: Arial, sans-serif;

    margin: 0;

    padding: 0;

    background-color: #f0f0f0;

    /* Nový odstín pozadí */

    color: #000000;

    text-align: center;

    /* Zarovnání obsahu stránky na střed */

    position: relative;

    min-height: 100vh;

}



header {

    background-color: #ea4a3c;

    padding: 20px 0;

    display: flex;

    align-items: center;

    justify-content: center;

}



header img {

    width: 170px;

    /* Změna velikosti loga */

    margin-right: 10px;

}



header h1 {

    margin: 0;

    color: #000000;

    line-height: 1.2;

    /* Řádkování textu */

}



header,

footer {

/* TEST ENVIRONMENT COMMENT */
/*background: linear-gradient(135deg, #d2b48c 0%, #8b4513 100%);   */


}



nav a:hover,

.hamburger-menu a:hover {

    background-color: #f06d06;

    /* Adjust hover color to match gradient */

}



.ad-box,

section {

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.ad-box:hover,

section:hover {

    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* Zvýraznění stínu pro lepší efekt */
    opacity: 0.9; /* Lehké ztmavení pro vizuální efekt */

}



@keyframes rotate {

    from {

        transform: rotate(0);

    }



    to {

        transform: rotate(360deg);

    }

}



.hamburger-icon:hover {

    animation: rotate 2s linear forwards;

}



body {

    font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1600 - 300)));

}



nav {

    background-color: #5068b0;

    padding: 10px 0;

    margin-top: 60px;

    /* Posunutí menu dolů */

}



nav a {

    color: #ffffff;

    text-decoration: none;

    margin: 0 10px;

    font-size: 18px;

    padding: 5px 10px;

    border-radius: 5px;

    transition: background-color 0.3s ease;

}



nav a:hover {

    background-color: #ffffff;

    color: #5068b0;

}



.container {

    display: flex;

    justify-content: center;

    /* Zarovnání obsahu do středu */

    flex-wrap: wrap;

    padding-bottom: 60px;

}



.ad-box {

    width: 200px;

    /* Změna šířky reklamního boxu */

    height: 350px;

    /* Změna výšky reklamního boxu */

    margin: 20px 10px;

    /* Odsazení mezi boxy */

    background-color: #f9f9f9;

    padding: 10px;

    border-radius: 5px;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    /* Stínování boxu */

}



.content {

    max-width: calc(60% - 220px);

    /* změna pro správné zarovnání obsahu */

    margin: 10px 10px 55px 10px;

}

.content-mobile {

    max-width: calc(60% - 220px);

    /* změna pro správné zarovnání obsahu */

    margin: 10px 10px 55px 10px;

}



section {

    padding: 20px;

    max-width: 1200px;

    /* Změna šířky obsahového boxu */

    margin: 20px auto;

    /* Zarovnání obsahu do středu */

    text-align: left;

    /* Zarovnání obsahu doleva */

    background-color: #ffffff;

    /* Nový odstín obsahového boxu */

    border-radius: 10px;

    /* Zaoblené hrany boxu */

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    /* Stínování boxu */

}



section p {

    font-size: 18px;

    /* Zvětšení velikosti odstavce */

}



footer {

    background-color: #ea4a3c;

    color: #ffffff;

    text-align: center;

    position: absolute;

    width: 100%;

    bottom: 0;

}



.hamburger-menu {

    display: none;

    /* Initially hidden */

    flex-direction: column;

    align-items: center;

    background-color: #ffffff;

    /* Light background for the dropdown */

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    /* Soft shadow for depth */

    border-radius: 10px;

    /* Rounded corners for a modern look */

    padding: 15px 0;

    /* Spacing around menu items */

    position: absolute;

    /* Ensure menu overlays content */

    top: 100px;

    /* Adjust this value so the menu appears below the hamburger icon */

    left: 0;

    right: 0;

    margin-left: auto;

    margin-right: auto;

    text-align: center;

    width: 90%;

    /* Responsive width */

    z-index: 1000;

    /* Ensure it's above other content */

}





.hamburger-menu a {

    color: #5068b0;

    /* Menu item text color */

    text-decoration: none;

    margin: 10px 0;

    /* Spacing between menu items */

    font-size: 18px;

    /* Larger text for easier readability */

    padding: 8px 20px;

    /* Padding for tap targets */

    border-radius: 5px;

    /* Rounded edges for menu items */

    transition: background-color 0.3s ease;

    /* Smooth transition for hover effect */

}



.hamburger-menu a:hover {

    background-color: #f0f0f0;

    /* Light background on hover for contrast */

}



@media (max-width: 768px) {

.content-mobile .article-container {

    display: flex;

    flex-wrap: wrap;

    gap: 0px;

    justify-content: center;

}


.content-mobile {

    max-width: calc(60% - 220px);

    /* změna pro správné zarovnání obsahu */

    margin: 0px;
    padding: 0px;

}

section p {

    font-size: 14px;

    /* Zvětšení velikosti odstavce */

}

    .hamburger-menu {

        display: flex;

        flex-direction: column;

        align-items: center;

    }



    nav {

        display: none;

    }



    .hamburger-icon {

        display: block;

        cursor: pointer;

        font-size: 30px;

        user-select: none;

    }



    .container {

        display: flex;

        flex-direction: column;

        align-items: center;

    }



    .container>div {

        order: 2;

        /* Zajistí, že obalové divy reklamních boxů budou po obsahovém boxu */

    }



    .container>.content {

        order: 1;

        /* Zajistí, že obsahový box bude první */

        max-width: 93%;

        /* Upravit podle potřeby pro lepší vzhled na malých obrazovkách */

        width: 100%;

        /* Zajistí, že obsah bude responzivní a využije dostupnou šířku */
        
        margin: 10px 0px;

    }
    
    .container>.content-mobile {

        order: 1;

        /* Zajistí, že obsahový box bude první */

        max-width: 93%;

        /* Upravit podle potřeby pro lepší vzhled na malých obrazovkách */

        width: 100%;

        /* Zajistí, že obsah bude responzivní a využije dostupnou šířku */
        
        margin: 10px 0px;

    }

    .ad-box.is-empty {

        display: none;

    }

}





/* Zobrazí hamburger ikonu a skryje standardní navigaci pouze na obrazovkách menších než 992px */

@media (max-width: 992px) {

    .hamburger-icon {

        display: block;

        cursor: pointer;

        font-size: 30px;

        user-select: none;

    }



    .hamburger-menu {

        display: none;

    }



    nav {

        display: none;

    }



    /* Zde přidejte další responzivní styly */

}



/* Zobrazí navigaci a skryje hamburger ikonu na větších obrazovkách */

@media (min-width: 993px) {

    .hamburger-icon {

        display: none;

    }



    nav {

        display: flex;

    }



    .hamburger-menu {

        display: none;

    }



    /* Zde můžete přidat další styly pro desktopové zobrazení */

}



.icttf-box {

    background-color: #ffffff;

    /* Black background */

}



.icttf-box:hover {

    background-color: #000000;

    /* White background on hover */

}



.icttf-box a,

.icttf-box a:hover {

    color: inherit;

    /* Ensures link color matches current state for visibility */

}



/* You might also want to adjust the image and link styles for visibility */

.icttf-box img {

    width: 100%;

    /* Make image fill the box, adjust as needed */

    height: auto;

    /* Maintain aspect ratio */

}



.icttf-box a {

    display: block;

    /* Make the link fill the box for easier clicking */

}	

.msk-box img {

    width: 100%;

    /* Make image fill the box, adjust as needed */

    height: auto;

    /* Maintain aspect ratio */
    
    padding-top: 40px;

}

.noviny-box img {

    width: 100%;

    /* Make image fill the box, adjust as needed */

    height: auto;

    /* Maintain aspect ratio */

}

.elevenvr-box img {

    width: 100%;

    /* Make image fill the box, adjust as needed */

    height: auto;

    /* Maintain aspect ratio */

}

.membership-container {
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.benefits-list {
    list-style: none;
    padding: 0;
}

.benefits-list li {
    background-color: #e6f4ec; /* Světle zelené pozadí pro položky seznamu */
    margin: 10px 0;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.benefits-list li strong {
    color: #333;
}

.signup-box {
    display: block;
    padding: 20px;
    margin: 20px 0;
    font-size: 1em;
    color: #000;
    background-color: #fff; /* Bílá barva pozadí */
    border: 2px solid #007BFF; /* Modrý okraj */
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: left;
}

.signup-box:hover {
    background-color: #f2f2f2; /* Světle šedá při přejetí myší */
    color: #000;
    text-decoration: none;
}

.signup-box h3 {
    margin: 0;
    font-size: 1.4em;
    color: #000;
    text-align: center;
}

.signup-box .details {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.signup-box .details div {
    flex: 1;
    padding: 0 10px;
}

.signup-box p {
    margin: 5px 0;
    font-size: 0.9em;
}

.signup-box .price {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.signup-box .price-tag {
    font-weight: bold;
    color: #fff; /* Bílá barva pro text */
    background-color: #007BFF;
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 10px;
}

.signup-box .member-price {
    font-weight: bold;
    color: #fff; /* Bílá barva pro text */
    background-color: #8B8000; 
    padding: 5px 10px;
    border-radius: 5px;
}

.signup-box .player-count {
    display: block;
    font-size: 1em;
    margin-top: 10px;
    text-align: left;
}

.signup-box .player-count .count {
    display: inline-block;
    font-size: 1.2em;
    font-weight: bold;
    color: #fff;
    background-color: #007BFF; /* Modrá barva pozadí */
    padding: 5px 10px;
    border-radius: 5px;
    margin-left: 5px;
}

.signup-box .register {
    display: block;
    margin: 20px auto 0;
    padding: 15px 25px;
    font-size: 1.2em;
    background-color: #007BFF; /* Modrá barva */
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease; /* Přechod pro barvu textu a pozadí */
    text-align: center;
    width: fit-content;
}

.signup-box .register:hover {
    background-color: #FF0000; /* Červená barva při přejetí myší */
    color: #fff;
    text-decoration: underline;
}

.horizontal-ad-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000; /* Světle šedé pozadí */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.horizontal-ad-box a {
    display: block;
    width: 100%;
    height: 100%;
    color: white;
    text-decoration: none;
}

.horizontal-ad-box h3 {
    margin: 8px 0px 0px 0px;
}

.horizontal-ad-box p {
    margin: 5px 0px 0px 0px;
}

.horizontal-ad-box h3.red {
    color: red;
    margin: 5px 0px 0px 0px;
}

.horizontal-ad-box a:hover .red {
    text-decoration: underline;
}

.horizontal-ad-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .horizontal-ad-box h3 {
        margin: 8px 0px 0px 0px;
        font-size: 0.7em;
    }
    .horizontal-ad-box p {
        margin: 5px 0px 0px 0px;
        font-size: 0.6em;
    }
    .horizontal-ad-box h3.red {
        color: red;
        margin: 5px 0px 0px 0px;
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .horizontal-ad-box h3 {
        margin: 8px 0px 0px 0px;
        font-size: 0.9em;
    }
    .horizontal-ad-box p {
        margin: 5px 0px 0px 0px;
        font-size: 0.6em;
    }
    .horizontal-ad-box h3.red {
        color: red;
        margin: 5px 0px 0px 0px;
        font-size: 0.9em;
    }
}