/* Defaults */
body {
    background: url("/assets/images/tapety/background-gry.jpg") no-repeat center center fixed;
    background-size: cover;
    font-size: 15px;
    /* 14px * 1.1 */
    font-family: Nunito, sans-serif;
    margin: 0;

    /* 100vh * 1.1 */
}

/* Banner */
.home-banner {
    margin-top: 13.2px;
    /* 12px * 1.1 */
}

.home-banner img {
    border: 1.1px solid #485cb1;
    /* 1px * 1.1 */
    box-shadow: 1.1px 1.1px 4.4px rgba(0, 0, 0, 0.253);
    /* 1,1,4 px * 1.1 */
    width: 99.4%;
}

@font-face {
    font-family: "Nunito";
    src: url("/assets/fonts/Nunito-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}



:where(audio, canvas, iframe, img, svg, video) {
    vertical-align: middle;
}

:where(iframe) {
    border-style: none;
}

#websiteContainer {
    max-width: 1078px;
    /* 980px * 1.1 */
    width: 100%;
    display: flex;
    align-items: stretch;
    margin: 0 auto;
}

#leftSiteContent {
    background-color: #355984;
    width: 140px;
    flex-shrink: 0;

    /* --- POPRAWKI DLA STICKY MENU --- */
    position: -webkit-sticky;
    /* Dla kompatybilności z Safari */
    position: sticky;
    /* Kluczowa właściwość "przyklejająca" menu */
    top: 0;
    /* Określa, że menu ma się trzymać górnej krawędzi */
    height: 100vh;
    /* Menu zajmuje całą wysokość ekranu */
    overflow-y: auto;
    /* Dodaje przewijanie, jeśli menu jest wyższe niż ekran */
}

/* Left Navigation */
#leftNav {
    display: flex;
    flex-direction: column;
}

#leftNav a {
    font-size: 12.5px;
    /* 12px * 1.1 */
}

#leftNav a:hover {
    text-decoration-line: underline;
}

#leftNav hr {
    border: none;
    border-bottom: 1.1px solid #40668e;
    margin: 0px;
}

.nav-categories {
    display: flex;
    flex-direction: column;
    margin-bottom: 11px;
    /* 10px * 1.1 */
}

.nav-categories span {
    background: linear-gradient(to bottom, #4b8ce3 0%, #3870b1 100%);
    border: 1.1px solid #2b3f54;
    /* 1px * 1.1 */
    color: #f2f2f2;
    text-align: center;
    display: block;
    font-size: 14.3px;
    /* 13px * 1.1 */
    text-shadow: #1c2b50 2.2px 2.2px 4.4px;
}

.nav-items {
    display: flex;
    align-items: center;
    padding: 2.04px;
    /* 1.85px * 1.1 */
}

.nav-icons {
    width: 35.2px;
    /* 32px * 1.1 */
    margin: 0px 5.5px 0px 3.3px;
    /* 5,3 px * 1.1 */
}

.nav-links,
.nav-links-active {
    color: #e5e5f5;
    text-shadow: #2a2969 2.2px 2.2px 4.4px;
    text-decoration: none;
}

.nav-links-active {
    text-decoration: underline;
    color: #f0c987;
    font-weight: bold;
}

@keyframes marquee {
    0% {
        transform: translateX(121%);
        /* 110% * 1.1? */
    }

    100% {
        transform: translateX(-473%);
        /* -430% * 1.1 */
    }
}

#middleContent {
    background-color: #ccd4de;
    background-size: 11px 110%;
    /* 10px * 1.1, 100% * 1.1? */
    color: black;
    scrollbar-color: #2e4d6e #1c1c1a;
    padding: 16.5px;
    /* 15px * 1.1 */
    font-size: 16.5px;
    /* 15px * 1.1 */
    overflow: auto;
    overflow-y: auto;
    flex-grow: 1;
    width: 100%;
}

/* Responsiveness */
@media screen and (max-width: 768px) {
    #leftSiteContent {
        grid-area: left-menu;
        width: 91.3px;
        /* 83px * 1.1 */
        overflow-y: auto;
        position: sticky;
        top: 0;
        height: 110vh;
        /* 100vh * 1.1 */
        background-color: #355984;
        padding-top: 11px;
        /* 10px * 1.1 */
        box-shadow: 2.2px 0 5.5px rgba(0, 0, 0, 0.2);
    }

    .nav-links,
    .nav-links-active {
        font-size: 0.825em;
        /* 0.75em * 1.1 */
        padding: 4.4px 0;
        /* 4px * 1.1 */
        display: flex;
        align-items: center;
        width: 100%;
        color: #eee;
    }

    .nav-links-active {
        font-weight: bold;
        color: #ffcc00;
    }

    .nav-icons {
        width: 17.6px;
        /* 16px * 1.1 */
        height: 17.6px;
        /* 16px * 1.1 */
        margin-right: 5.5px;
        /* 5px * 1.1 */
        vertical-align: middle;
        flex-shrink: 0;
    }

    hr {
        border: none;
        border-top: 1.1px solid rgba(255, 255, 255, 0.1);
        margin: 5.5px 0;
        /* 5px * 1.1 */
    }

    #middleContent {
        grid-area: main-content;
        width: auto;
        padding: 16.5px;
        /* 15px * 1.1 */
        overflow-x: hidden;
    }

    #homeSection h1 {
        font-size: 1.76em;
        /* 1.6em * 1.1 */
        text-align: center;
    }

    .home-banner img {
        max-width: 100%;
        height: auto;
    }

    #homeSection h2 {
        font-size: 1.43em;
        /* 1.3em * 1.1 */
        text-align: center;
    }

    #slowem-wstepu {
        font-size: 0.99em;
        /* 0.9em * 1.1 */
        text-align: justify;
    }
}

.my-header {
    background: linear-gradient(to bottom, #4785d8 0%, #336095 70%, #3b5a7a 100%);
    border: 1.1px solid #2b3f54;
    text-shadow: #1c2b50 2.2px 2.2px 4.4px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3.3px 11px;
    margin: 2.2px 0;
    margin-bottom: 8.8px;
    gap: 4.4px;
    /* 4px * 1.1 */
}

.spacer {
    margin: 77px 0;
    /* 70px * 1.1 */
}

hr {
    border: none;
    border-top: 1.1px solid #aaa;
    margin: 33px auto;
    /* 30px * 1.1 */
    width: 80%;
}

.nav-links.active {
    font-weight: bold;
    color: #FFD700;
    text-decoration: underline;
}