/* Ogólne */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Space Grotesque', sans-serif;
}

/* Nawigacja językowa */
.language-switcher {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 14px;
    color: white;
    z-index: 10; /* Przenosi przełącznik języka na najwyższą warstwę */
}

.language-switcher a {
    color: white;
    text-decoration: none;
    margin: 0 5px;
}

.language-switcher a:hover {
    text-decoration: underline;
}

/* Tło wideo */
#background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1; /* Umieszcza wideo w tle */
}

/* Struktura strony */
.homepage {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 5; /* Treść znajduje się nad wideo, ale pod nawigacją */
}

/* Przesunięcie przycisków w dół o 3 cm */
.content nav {
    display: flex;
    justify-content: center;
    margin-top: 7cm; /* Przesunięcie przycisków o dokładnie 3 cm w dół */
}

h1 {
    font-family: 'VCR OSD Mono', monospace;
    font-size: 48px;
    margin-bottom: 20px;
}

/* Nawigacja (symbole) */
nav a {
    font-family: 'Space Grotesque', sans-serif; /* Czcionka */
    font-size: 20px; /* Rozmiar symboli */
    color: white; /* Kolor tekstu/symboli */
    text-decoration: none; /* Brak podkreślenia */
    margin: 0 30px; /* Odstępy między symbolami */
    padding: 5px 10px; /* Dodanie przestrzeni wewnątrz linków */
    position: relative; /* Potrzebne do ::before */
    transition: all 0.3s ease; /* Płynne przejście efektu */
}

nav a:hover::before {
    content: ''; /* Tworzy pusty element */
    position: absolute;
    bottom: 0; /* Prostokąt pod symbolem */
    left: 0;
    right: 0;
    height: 100%; /* Wysokość prostokąta */
    background-color: black; /* Kolor prostokąta */
    z-index: -1; /* Prostokąt pod symbolem */
    border-radius: 5px; /* Opcjonalnie: zaokrąglenie krawędzi */
}

nav a:hover {
    color: white; /* Kolor tekstu pozostaje biały */
    text-decoration: none; /* Brak podkreślenia */
}

/* Styl tylko dla podstron */
body.subpage .text-section {
    margin: 40px 100px; /* Duże marginesy: góra/dół 40px, lewa/prawa 100px */
    font-size: 16px; /* Rozmiar tekstu */
    line-height: 1.8; /* Wysokość linii */
    text-align: justify; /* Wyrównanie tekstu do lewej i prawej */
    color: black; /* Kolor tekstu */
}

body.subpage h2 {
    text-align: center; /* Wyśrodkowanie nagłówka */
    margin-top: 20px; /* Odstęp od góry */
    color: black; /* Kolor nagłówka */
}

/* Styl dla logo na podstronach - przeniesione na lewą stronę */
body.subpage .logo-container {
    margin-top: 40px;
    text-align: left;
    padding-left: 50px; /* Dodano odstęp od lewej krawędzi */
}

body.subpage .kpo-logo {
    max-width: 300px;
    height: auto;
    opacity: 0.9;
    transition: opacity 0.3s ease-in-out;
}

body.subpage .kpo-logo:hover {
    opacity: 1;
}

/* Kolor tła tylko dla podstron */
body.subpage {
    background-color: #ED002F; /* Różowe tło tylko na podstronach */
    color: white; /* Dla lepszej czytelności tekstu */
}

/* Styl dla wideo na podstronach */
.video-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

.video-section video {
    max-width: 80%; /* Dopasowanie wideo do szerokości ekranu */
    height: auto;
    border-radius: 10px; /* Zaokrąglenie rogów dla estetyki */
    box-shadow: 0 0 20px rgba(0,0,0,0.5); /* Delikatny cień */
}