/* Podstawowy wygląd strony */
body {
    font-family: Arial, sans-serif;
    background-color: #0f3d3e; /* ciemny morski kolor */
    margin: 0;
    padding: 0;
    color: white; /* tekst domyślnie biały */
}
 
/* Główny nagłówek */
header {
    background-color: #145c5e; /* trochę jaśniejszy morski */
    text-align: center;
    padding: 25px;
}
 
/* Menu */
nav {
    background-color: #1b6f72;
    padding: 12px;
    text-align: center;
}
 
/* Linki w menu */
nav a {
    margin: 20px;
    text-decoration: none;
    color: white;
    font-weight: bold;
}
 
/* Mały efekt po najechaniu */
nav a:hover {
    text-decoration: underline;
}
 
/* Treść */
section {
    margin: 40px;
}
 
/* Stopka */
footer {
    background-color: #145c5e;
    text-align: center;
    padding: 15px;
    margin-top: 400px;
}
 
button {
    background-color: #1b6f72;
    color: white;
    border: none;
    padding: 8px 15px;
    margin: 10px;
    cursor: pointer;
    font-size: 14px;
}
 
/* Prosty efekt po najechaniu */
button:hover {
    background-color: #24999e;
}
 
/* Efekt jak się kliknie */
button:active {
    transform: scale(0.95);
}
 
.galeria {
    text-align: center;
}
 
/* Ramka na zdjęcie */
.slider {
    width: 400px;
    height: 300px;
    margin: 20px auto;
    overflow: hidden;
    border: 2px solid white;
}
 
/* Animacja zmiany zdjęcia */
.slider img {
    width: 100%;
    transition: transform 0.4s;
}
 
/* Kolor poprawnej odpowiedzi */
.poprawna {
    background-color: green !important;
}
 
/* Kolor błędnej odpowiedzi */
.bledna {
    background-color: red !important;
}

#boxCiekawostka {
    background-color: #1b6f72; /* morski ale trochę jaśniejszy niż tło */
    padding: 15px;
    margin-top: 20px;
    width: 60%;
    border-left: 4px solid white; /* taki prosty pasek dla klimatu */
}
 
/* żeby tekst w środku miał trochę luzu */
#boxCiekawostka p {
    margin: 0;
}