@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;400;600;700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,300;0,400;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --bac_top: #2c2f31;
    --bac_gray:#dddbdc;
    --bg-main: #0b1020;
    --bg-surface: #121833;
    --bg-accent: #1f2a5c;
    --text-primary: #e5e7eb;
    --text-secondary: #f0c13d;
    --text-muted: #9ca3af;
    --brand: #f1b200;
    --brand-soft: rgba(99,102,241,0.15);
    --header-bg: rgba(15, 23, 42, 0.9); /* Ciemny granat z lekką przezroczystością */
    --accent: #0062ff; /* Kolor marki */
    --text-light: #ffffff;
    --brand-red: #ff2222;
    --brand-dark: #001e57;
    --focus-color: #ffcc00;

    
    --nav-height: 80px;
    --fot-famili-1:"Inter", sans-serif;
    --fot-famili-2:"Ubuntu", sans-serif;
    --fot-famili-3:"Work Sans", sans-serif;
}
*{
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh; /* Zmieniono z height: 100%, aby tło pokrywało całą stronę */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    
    /* Warstwy tła: gradienty na górze, zdjęcie na samym dole */
    background-image: 
        radial-gradient(1000px 400px at 20% -10%, rgba(99, 102, 241, 0.25), transparent 60%), 
        radial-gradient(800px 300px at 90% 10%, rgba(34, 211, 238, 0.25), transparent 60%),
        linear-gradient(rgba(11, 16, 32, 0.85), rgba(11, 16, 32, 0.85)), /* "Przykrycie" kolorem o 85% przezroczystości */
        url('../images/tlo.png'); /* Ścieżka do Twojego zdjęcia */

    background-size: auto, auto, cover, cover;
    background-position: center;
    background-attachment: fixed; /* Zdjęcie stoi w miejscu podczas przewijania */
    background-repeat: no-repeat;
    background-color: #0b1020; /* Kolor zapasowy */
}
.home{
    width: 100%;
    height: 1000px;
}
.error-404{
    height: 300px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}