/* === Global variables === */
:root {
    --line-spacing: 1.5;
    --font-family-base: 'JetBrains Mono', monospace;
}

/* === Base styles === */
h1 {
    padding: 2vh 10px;
    text-align: center;
    font-size: 5vh;
    word-break: break-word;
}

body {
    font-family: var(--font-family-base);
    margin: 0;
    background-color: #E1E8EE;
    color: #425390;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 2rem; /* 16px */
    line-height: 1.6;
}

header {
    background-color: #E1E8EE;
    color: #425390;
    padding: 2vh 20px;
    text-align: center;
    font-size: 2.5rem; /* 40px */
    line-height: 1.2;
    font-family: var(--font-family-base); /* Dodano czcionkę do header */
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 300px; /* Przeniesiono wysokość z inline style */
    font-weight: 700; /* Pogrubienie nagłówka */
}

.normal {
    font-style: normal;
    font-weight: bold;
}

.italic {
    font-style: italic;
}

nav {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-grow: 1;
    line-height: var(--line-spacing);
}

nav li {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 4rem; /* 20px */
    cursor: default;
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    font-family: var(--font-family-base); /* Dodano czcionkę do elementów nawigacji */
    font-weight: 700; /* Pogrubienie elementów nawigacji */
    line-height: 1.0; /* Zmniejszono odstęp między liniami */
    text-align: center;
    letter-spacing: -0.018em; /* Zmniejszono odstęp między literami */
}

.plama {
    position: absolute;
    width: auto;
    height: auto;
    max-width: 70%;
    max-height: 70%;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
}

nav li:nth-child(1) { background-color: #DB5C45; }
nav li:nth-child(2) { background-color: #f29989; }
nav li:nth-child(3) { background-color: #d7d46b; }
nav li:nth-child(4) { background-color: #79979C; }
nav li:nth-child(5) { background-color: #34785C; }

/* === Strzałka przed tekstem w linku === */
nav li::before {
    content: '\2192'; /* Unicode dla strzałki w prawo (→) */
    margin-right: 10px; /* Przestrzeń między strzałką a tekstem */
    opacity: 0; /* Ukrywamy strzałkę na początku */
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-size: 2.5rem; /* Rozmiar strzałki */
    color: #425390; /* Kolor strzałki */
    position: absolute;
    left: 10px; /* Strzałka pojawia się z lewej strony */
}

nav li:hover::before {
    opacity: 1; /* Pokaż strzałkę na hover */
    transform: translateX(10px); /* Opcjonalnie, aby strzałka lekko przesunęła się w prawo */
}

/* === Responsive styles === */
@media (max-width: 768px) {
    :root {
        --line-spacing: 1.2;
    }

    body {
        font-size: 0.9rem; /* ~14.4px */
        line-height: 1.4; /* Zmniejszono odstęp między liniami */
        letter-spacing: -0.02em; /* Zmniejszono odstęp między literami (wartość może wymagać dostosowania) */
    }

    header {
        font-size: 1.75rem; /* 28px */
        line-height: 1.1; /* Można również zmniejszyć line-height w header */
        letter-spacing: -0.01em; /* Można również zmniejszyć letter-spacing w header */
    }

    nav li {
        padding: 5%;
        font-size: 3.5rem; /* ~17.6px */
        line-height: 1.0; /* Zmniejszono odstęp między liniami */
        /* word-break: break-word; */
        text-align: center;
        letter-spacing: -0.018em; /* Zmniejszono odstęp między literami */
    }
}

@media (min-width: 769px) {
    :root {
        --line-spacing: 1.4;
    }
}