* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

.mcWRN * {
    outline: 1px solid red;
}

/* width */
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #5b5b5c;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #7d2128;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #32402c;
}

body {
    background-image: url(./imgs/background.png);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    font-family: Arial, sans-serif
}


/* Stylování content kontejnerů */
.container-main,
.container {
    /* background-color:#32402ccc; */
    margin: 140px auto 20px;
    padding: 0 8px;
    padding-bottom: 40px;
    text-align: center;
    width: 100%;
}

.container p,
.container-main p {
    font-size: 14pt
}

.page-title {
    background-color: rgba(4, 5, 5, 0.82);
    border: 1px solid rgba(125, 33, 40, 0.45);
    border-radius: 16px;
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.35);
    padding: 24px 32px;
    margin: 0 auto 32px;
    max-width: 820px;
    width: 100%;
    text-align: center;
}

.contact-chip {
    display: inline-block;
    background-color: rgba(4, 5, 5, 0.82);
    border: 1px solid rgba(125, 33, 40, 0.45);
    border-radius: 12px;
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.35);
    padding: 8px 26px;
    margin: 0 auto 16px;
    text-align: center;
}

.contact-chip--wide {
    padding: 10px 36px;
    margin: 28px auto 18px;
    font-size: 24px;
    letter-spacing: 0.5px;
    font-weight: 700;
}

/* ------- */

.site-footer {
    background-color: rgba(8, 8, 8, 0.85);
    color: #ddd;
    padding: 20px 12px;
    text-align: center;
    font-size: 12pt;
    border-top: 1px solid rgba(125, 33, 40, 0.25);
}

.site-footer a {
    color: #fff;
    text-decoration: underline;
}

.site-footer a:focus,
.site-footer a:hover {
    color: #f1f1f1;
    outline: none;
}

.site-footer .footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.site-footer .legal {
    opacity: 0.9;
}

.site-footer .privacy-link {
    font-weight: 700;
}

/* Stylování CTA tlačítka */
.CTA:hover,
.gallery-item :hover {
    cursor: pointer
}

.CTA {
    align-items: center;
    background-color: #7d2128;
    border: #7d2128 solid 4px;
    display: flex;
    font-size: 14pt;
    font-weight: 700;
    margin: 20px auto;
    padding: 10px 20px;
    position: relative
}

.CTA a {
    color: #fff;
    text-decoration: none
}

.CTA:active {
    background-color: #5b5b5c
}

/* -------- */

/* Ukotvení stropu stránky a tlačítko pro přejezd na vršek stránky */
#top {
    border: 0;
    height: 60px;
    margin: 0;
    padding: 0;
    top: 0
}

.ToTop {
    background-color: #000;
    border-radius: 75px;
    bottom: 15px;
    display: flex;
    height: 50px;
    padding: 0 10px;
    position: fixed;
    right: 15px;
    width: 50px;
    z-index: 999;
}

.line1,
.line2 {
    background-color: #fff;
    border-radius: 40px;
    height: 50%;
    margin: 15%;
    margin-top: 30%;
    padding: 0;
    width: 100%
}

.line1 {
    transform: rotate(40deg)
}

.line2 {
    transform: rotate(-40deg)
}

/* ---------- */

/* Tlačítko pro otevření mobilního nav menu */

.hamburger-menu {
    cursor: pointer;
    display: block;
    height: 20px;
    position: absolute;
    right: 15px;
    top: 15px;
    width: 60px;
    z-index: 900
}

.hamburger-menu.open {
    position: fixed;
}

.bar {
    background-color: #fff;
    border-radius: 3px;
    height: 6px;
    margin: 10px 0;
    transition: all .3s ease;
    width: 100%
}

.hamburger-menu.open .bar:nth-child(1) {
    transform: rotate(-45deg) translate(-9px, 6px)
}

.hamburger-menu.open .bar:nth-child(2) {
    opacity: 0
}

.hamburger-menu.open .bar:nth-child(3) {
    transform: rotate(45deg) translate(-15px, -15px)
}

/* ------------ */

/* schování desktopového menu */

.desktop-nav {
    display: none;
}

/* ------------ */
/* Mobilní nav menu */

.mobile-nav {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    height: max-content;
    background-color: #333333;
    left: -100%;
    top: 0;
    position: fixed;
    z-index: 20;
    transition: 0.5s;
    overflow-y: auto;
    /* Allow scrolling */
    height: 100%;
}

.mobile-nav.open {
    left: 0;
}

.mobile-nav ul {
    width: 100%;
    padding: 0;
    border-right: #333333 solid 100px;
    background: #333333;
}

.mobile-nav ul li {
    display: flex;
    flex-direction: column;
    left: 0;

}

.mobile-nav ul li button {
    width: 100%;
    font-size: 18pt;
    height: 14vh;
    background-color: #5b5b5c;
    color: white;
    font-weight: bolder;
    border: #7d2128 solid 10px;

}

.mobile-nav ul li ul {
    display: none;

}

.mobile-nav ul li ul.open {
    display: block;
    flex-direction: column;
    left: 0;
    padding: 0;
    width: 100%;
    border: 0;
}

.mobile-nav ul li ul li button {
    background-color: #333333;
    width: 100%;
}

/* ---------- */
/* Logo */
.logo {
    left: 2%;
    max-height: 120px;
    position: absolute;
    top: 70px;
    transform: translateY(-50%);
    z-index: 15
}

/* ---------- */
/* Nadpisy */
h1 {
    font-size: 25pt;
    line-height: 1;
    margin-bottom: 20px;
    margin-top: 20px;
    padding-top: 20px;
    text-align: center
}

h2 {
    padding-bottom: 20px;
    padding-top: 40px;
    font-size: 16pt;
}

/* -------- */
/* Karty hráčů */
/* Uspořádání a zarovnání jednotlivých karet */
#supcom-container,
#com-container,
#nco-container,
#recruiter-container,
#spe-container,
#reg-container,
#fng-container,
#recruits-container,
#zav-container,
#advmed-container,
#cqb-container,
#velitel-container,
#rto-container,
#mortar-container,
#fw-container,
#heli-container,
#ss-container,
#mm-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

/* Obarvení rámečků */
#supcom-container .member-card {
    border: 1px solid #8e7cc3;
}

#com-container .member-card {
    border: 1px solid #d6544e;
}

#nco-container .member-card {
    border: 1px solid #4a83d2;
}

#spe-container .member-card {
    border: 1px solid #e2850b;
}

#reg-container .member-card {
    border: 1px solid #f3d766;
}

#fng-container .member-card {
    border: 1px solid #93c47d;
}

#recruits-container .member-card {
    border: 1px solid #93c47d;
}

/* Stylování obsahu karet členů */
.member-card {
    background-color: rgba(4, 5, 5, 0.82);
    border: 1px solid rgba(125, 33, 40, 0.45);
    border-radius: 16px;
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.35);
    padding: 10px 5px;
    width: 130px;
    text-align: center;
}

.member-card h3 {
    font-size: 12pt;
    margin-bottom: 5px;
    overflow: hidden;
}

.member-card p {
    font-size: 8pt;
}

.member-card img {
    border-radius: 50%;
    width: 75px;
    height: 75px;
}

/* ----------- */
/* Stylování formulářů na stránkách */
.form {
    height: 100vh;
    left: 50%;
    padding: 0;
    background-color: rgba(4, 5, 5, 0.82);
    border: 1px solid rgba(125, 33, 40, 0.45);
    border-radius: 16px;
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.35);
    width: auto;
    max-width: 100%;
    overflow: hidden;
}

/* -------------------------------- */

.socials {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    overflow: none;
    align-items: center;
}

.socials img {
    display: flex;
    width: 80px;
    margin: 30px;
    border-radius: 50%;
}

@media screen and (min-width: 768px) {

    .container-main {
        padding: 0 20px;
        width: 90%
    }

    .container p,
    .container-main p {
        font-size: 16pt
    }

    .CTA {
        font-size: 16pt;
    }

    .CTA:hover,
    .gallery-item :hover {
        cursor: pointer
    }

    .mobile-nav {
        height: 200vh;
        /* Limit height to viewport height */
        background-color: #333333;
    }

    h1 {
        font-size: 32pt;
    }

    h2 {
        padding-bottom: 30px;
        padding-top: 5px;
    }

    .socials img {
        width: 100px;
    }

}


@media screen and (min-width: 1200px) {
    .container {
        width: 70%
    }


    /* Desktop nav */
    /* Zobrazení aktivní stránky */
    .active {
        background-color: #7d2128;
    }

    .desktop-nav {
        display: flex;
        width: 100%;
        top: 35px;
        left: 0;
        position: fixed;
        z-index: 10;
    }

    .desktop-nav .nav-container-left {
        background: linear-gradient(to left, #040505ff 0%, #04050500 100%);
        justify-content: flex-end;
        padding-right: 80px;
    }

    .desktop-nav .nav-container-right {
        background: linear-gradient(to right, #040505ff 0%, #04050500 100%);
        justify-content: flex-start;
        padding-left: 80px;
    }

    .desktop-nav .nav-container-left,
    .desktop-nav .nav-container-right {
        list-style-type: none;
        display: flex;
        width: 50%;
    }

    .desktop-nav .nav-container-left a,
    .desktop-nav .nav-container-right a {
        text-decoration: none;
    }


    .desktop-nav .nav-container-left a button,
    .desktop-nav .nav-container-right a button {
        display: inline;
        color: white;

        border: 0;
        height: 100%;
        padding: 20px 10px;
        border-radius: 40px;
        width: fit-content;
        font-weight: bold;
        font-size: 12pt;
    }

    .desktop-nav .nav-container-left a button:hover,
    .desktop-nav .nav-container-right a button:hover {
        color: white;
        background-color: #5b5b5c;
        border: 0;
        height: 100%;
        font-weight: bold;
        font-size: 12pt;
        cursor: pointer;
    }

    .desktop-nav .nav-container-left li ul,
    .desktop-nav .nav-container-right li ul {
        display: none;
        border-radius: 40px;
    }

    .desktop-nav .nav-container-left li ul li a button,
    .desktop-nav .nav-container-right li ul li a button {
        width: 100%;
        display: flex;

    }

    .desktop-nav .nav-container-left li:hover>ul,
    .desktop-nav .nav-container-right li:hover>ul {
        display: flex;
        flex-direction: column;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.5);
        list-style-type: none;
        padding: 0;
        width: fit-content;
    }

    button {
        background: #04050500;
    }

    /* -------- */
    /* Ukrytí mobilního menu */
    .hamburger-menu,
    .mobile-nav,
    .ToTop {
        display: none;
    }

    /* --------------------- */
    /* Logo */
    .logo {
        transform: translateX(-50%);
        left: 50%;
        max-height: 160px;
        position: fixed;
        top: 10px;
        z-index: 15;
    }

    /* ---- */
    /* Stylování hráčských karet */
    #zav-container .member-card,
    #advmed-container .member-card,
    #cqb-container .member-card,
    #velitel-container .member-card,
    #rto-container .member-card,
    #mortar-container .member-card,
    #fw-container .member-card,
    #heli-container .member-card,
    #ss-container .member-card,
    #mm-container .member-card {
        padding: 10px;
        width: 300px;
    }

    .member-card h3 {
        font-size: 20pt;
    }

    .member-card p {
        font-size: 14pt;
    }

    .member-card {
        width: 300px;
        height: fit-content;
    }

    .member-card img {
        width: 100px;
        height: 100px;
    }
}