/* Selektor gwiazdki (*) oznacza "wszystkie elementy" */ 
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; /* Ważne! Ułatwia liczenie szerokości elementów */ 
}   
body { 
    font-family: Verdana, sans-serif; 
    background-color: #f4f4f4; 
    color: #333; 
    line-height: 1.6; 
} 
.source-box {
    margin-top: 20px;
    text-align: right;
}

.source-box a {
    text-decoration: none;
    color: #555;
    font-size: 14px;
    font-style: italic;
}

.source-box a:hover {
    color: #000;
    text-decoration: underline;
}

/* Selektor Klasy - dla nagłówka strony */ 
.hero-box { 
    background-image: url("./tło.jpg");
    text-shadow: 20px 20px 15px rgba(0,0,0,255);
    color: white;              
/* Kolor tekstu */ 
    text-align: center;        
/* Wyrównanie tekstu */ 
    padding: 40px 20px;
    margin-top: 60px;        
/* Dopełnienie (wewnątrz) */ 
}  
/* Selektor Tagu - tylko dla h1 wewnątrz klasy hero-box */ 
.hero-box h1 { 
    font-size: 48px; 
    margin-bottom: 10px; 
    text-transform: uppercase; /* Zamiana na wielkie litery */ 
}
main { 
    max-width: 800px; /* Maksymalna szerokość kontenera */ 
    margin: 30px auto; /* 30px góra/dół, auto boki (wyśrodkowanie) */ 
} 
.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
.content-box { 
    background: white; 
    border: 2px solid #ddd; /* Ramka: grubość styl kolor */ 
    text-align: justify;
    padding: 20px;       
    box-shadow: 0px 5px 15px rgba(0,0,0,0.1);   
/* Odstęp treści od ramki */ 
    margin-bottom: 20px;    
/* Odstęp tego pudełka od następnego */ 
    border-radius: 8px;     
/* Zaokrąglone rogi (Inne elementy CSS) */ 
}
.special {
    background-color: lightyellow;
    border: 2px solid red; 
}
#main-nav { 
    background-color: #333; 
    color: white; 
    position: fixed;
    width: 100%;
    height: 60px;
    top: 0;
} 
#main-nav a:hover {
    border-bottom: 3px;
    color: orange;
}
   
 /* Lista ul */ 
#main-nav ul { 
    list-style: none; /* Usuwa kropki z listy */ 
    text-align: center; /* Wyśrodkowuje przyciski */ 
} 
   
 /* Elementy listy li */ 
#main-nav li { 
    display: inline-block; /* Ustawia elementy w rzędzie, nie w kolumnie */ 
 } 
   
 /* Linki wewnątrz menu */ 
#main-nav a { 
    text-decoration: none; /* Usuwa podkreślenie linku */ 
    color: white; 
    padding: 15px 20px;    /* Powiększa obszar kliknięcia */ 
    display: block;        /* Sprawia, że padding działa poprawnie na linku */ 
    transition: 0.3s;      /* Płynne przejście koloru (Inne elementy) */ 
 } 
   
 /* Pseudoklasa :hover - stan po najechaniu myszką */ 
#main-nav a:hover { 
    background-color: #555; 
    color: #ffcc00; 
} 

.btn {      
    display: inline-block;       
    background: #e74c3c;       
    color: white; 
    padding: 10px 20px; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer; /* Zmienia kursor na "łapkę" */ 
    margin-top: 10px;      
    font-size: 16px; 
    border: 2px solid transparent;
}     
.btn:hover {       
    background: #c0392b; 
    border: 2px solid black;
}
footer { 
    text-align: center; 
    padding: 20px; 
    background: #222; 
    color: #888; 
    margin-top: 40px; 
    border-top: 4px solid #e74c3c; 
} 
footer:hover {
    color: white;
}