/* Resetowanie marginesów */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Główne ustawienia strony */
body {
    font-family: 'Montserrat', sans-serif;
    background-color: #0a0a0a;
    color: #ffffff;
    line-height: 1.6;
}

/* Typografia */
h1 { font-size: 4.5rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }
h2 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1.5rem; text-transform: uppercase; }
p { color: #b3b3b3; font-size: 1.1rem; font-weight: 300; max-width: 800px; }

/* Menu nawigacyjne - płynne i animowane */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 30px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(10, 10, 10, 0.3);
    z-index: 1000;
    transition: all 0.4s ease;
}

/* Klasa dla menu po przewinięciu w dół (dodawana przez JavaScript) */
nav.scrolled {
    padding: 15px 50px;
    background: rgba(10, 10, 10, 0.95);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

nav .logo { font-size: 1.8rem; font-weight: 900; letter-spacing: 2px; }
nav ul { list-style: none; display: flex; gap: 30px; }
nav a { color: #fff; text-decoration: none; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px; transition: color 0.3s; }
nav a:hover { color: #ffffff; }

/* Sekcja Hero z tłem */
#hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), url('https://via.placeholder.com/1920x1080/222222/555555?text=Miejsce+na+Twoje+profesjonalne+zdjecie') center/cover;
}

#hero h2 { color: #6200ff; font-size: 1.5rem; font-weight: 300; letter-spacing: 8px; margin-top: 10px; }

/* Pojemniki na treść */
.container { max-width: 1200px; margin: 0 auto; padding: 120px 20px; }

/* Siatka portfolio */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

/* Karta projektu - ulepszona */
.project-card {
    background-color: #151515;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s ease;
    cursor: pointer;
}

.project-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 40px rgba(255, 51, 102, 0.15);
    border-color: rgba(255, 51, 102, 0.5);
}

/* Miniatury graficzne */
.thumbnail { height: 220px; background-color: #2a2a2a; background-size: cover; background-position: center; }
.placeholder-1 { background-image: url('https://via.placeholder.com/600x400/111/ff3366?text=Audio'); }
.placeholder-2 { background-image: url('https://via.placeholder.com/600x400/111/fff?text=Code'); }
.placeholder-3 { background-image: url('https://via.placeholder.com/600x400/111/555?text=Video'); }

.project-card h3 { padding: 25px 20px; font-size: 1.2rem; font-weight: 700; letter-spacing: 1px; }

/* Stopka */
footer { text-align: center; padding: 40px; background-color: #050505; color: #444; font-size: 0.9rem; }

/* Wygląd linków w sekcji O mnie */
#about p a {
    color: #ff3366; /* Nasz różowo-czerwony kolor akcentu */
    text-decoration: none; /* Usuwa domyślne podkreślenie */
    font-weight: 700; /* Pogrubia tekst linku */
    transition: color 0.3s ease;
}

/* Wygląd linku po najechaniu myszką */
#about p a:hover {
    color: #ffffff; /* Zmienia kolor na biały dla ładnego efektu */
    text-decoration: underline; /* Dodaje podkreślenie przy najechaniu */
}

/* Styl ogólny dla wszystkich miniaturek */
.thumbnail {
    width: 100%;       /* Szerokość na całą kartę */
    height: 200px;     /* Ustaw taką wysokość, jaką miały Twoje placeholdery */
    background-size: cover;    /* Zdjęcie wypełni cały obszar, nie zostawiając pustych miejsc */
    background-position: center; /* Środek zdjęcia będzie zawsze widoczny */
    border-radius: 8px; /* Opcjonalnie: zaokrąglone rogi, aby pasowały do nowoczesnego stylu */
}

/* Zdjęcie dla Produkcji Muzycznej */
.placeholder-1 {
    background-image: url('produkcjamuzyczna.jpeg'); /* Tutaj wpisz nazwę swojego pliku */
}

/* Zdjęcie dla Projektu Wideo */
.placeholder-3 {
    background-image: url('programowanie.png');  /* Tutaj wpisz nazwę swojego pliku */
}