@font-face {
    font-family: 'Gotham'; /* Nazwa czcionki, której będziesz używać */
    src: url('fonts/Gotham-Medium.otf.otf') format('opentype'); /* Ścieżka do pliku */
    font-weight: normal; /* Opcjonalnie: grubość czcionki */
    font-style: normal; /* Opcjonalnie: styl czcionki */
}


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

/* Ustawienie tła strony */
body {
    height: 100vh; /* Wysokość całego widoku przeglądarki */
    background-image: url('images/bg.png'); /* Zmień na ścieżkę swojego obrazka */
    background-size: cover; /* Obrazek obejmuje całe tło */
    background-position: center; /* Centrowanie tła */
    background-repeat: no-repeat; /* Bez powtarzania */
    display: flex;
    justify-content: center; /* Wyśrodkowanie zawartości w poziomie */
    align-items: center; /* Wyśrodkowanie zawartości w pionie */
}

/* Centralny div */
.centralny-div {
    background-image: url('images/kartka-03.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 2rem;
    font-family: 'Gotham', sans-serif;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

    width: auto;
    height: 80vh;
    aspect-ratio: 1267 / 2100;
}
.centralny-div3 {
    background-image: url('images/kartka-03.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 2rem;
    font-family: 'Gotham', sans-serif;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

    width: auto;
    height: 80vh;
    aspect-ratio: 1267 / 2100;
    
    padding-top: 10vh;
}
.centralny-div2 {
    background-image: url('images/kartka-02.png'); /* Tło, które będzie widoczne po "gumkowaniu" */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: auto;
    height: 80vh;
    aspect-ratio: 1267 / 2100;
    position: relative; /* Aby canvas był nałożony na ten div */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Ogranicza obszar canvas */
}
.centralny-div4 {
    background-image: url('images/kartka-04.png'); /* Tło, które będzie widoczne po "gumkowaniu" */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: auto;
    height: 80vh;
    aspect-ratio: 1267 / 2100;
    position: relative; /* Aby canvas był nałożony na ten div */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Ogranicza obszar canvas */
}


input[type="email"] {
    width: 80%; /* Szerokość pola input */
    padding: 10px 15px; /* Wewnętrzny odstęp dla tekstu */
    font-size: 1rem; /* Rozmiar czcionki */
    color: #333; /* Kolor tekstu w input */
    background-color: #fff; /* Białe tło */
    border: 2px solid #ccc; /* Biała ramka */
    border-radius: 25px; /* Zaokrąglenie rogów */
    outline: none; /* Usunięcie domyślnego obramowania */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Delikatny cień */
    transition: all 0.3s ease; /* Płynne przejście dla efektów */
    font-family: 'Gotham', sans-serif;
}


.content{
    border: 0px solid black;
    width: 90%;
}

input[type="submit"] {
    width: 80%; /* Szerokość przycisku */
    max-width: 400px; /* Maksymalna szerokość */
    padding: 10px 15px; /* Wewnętrzny odstęp */
    font-size: 1rem; /* Rozmiar czcionki */
    font-weight: bold; /* Pogrubiona czcionka */
    color: #fff; /* Biały kolor tekstu */
    background-color: #e91e63; /* Różowy kolor tła */
    border: 2px solid #e91e63; /* Obramowanie w tym samym kolorze */
    border-radius: 25px; /* Zaokrąglenie rogów */
    cursor: pointer; /* Zmiana kursora na wskaźnik */
    text-transform: uppercase; /* Duże litery */
    transition: all 0.3s ease; /* Płynne przejścia efektów */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Delikatny cień */
    font-family: 'Gotham', sans-serif;
}

input[type="image"] {
    width: 80%; /* Szerokość obrazka */
    height: auto;
    cursor: pointer;
}

.k {
    color: #000;
    font-size: 0.8em;
}



#eraserCanvas {
    position: absolute; /* Canvas przykrywa cały div */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair; /* Zmienia kursor na krzyżyk */
}



select {
    width: 80%; /* Szerokość pola select */
    padding: 10px 15px; /* Wewnętrzny odstęp dla tekstu */
    font-size: 1rem; /* Rozmiar czcionki */
    color: #333; /* Kolor tekstu w select */
    background-color: #fff; /* Białe tło */
    border: 2px solid #ccc; /* Biała ramka */
    border-radius: 25px; /* Zaokrąglenie rogów */
    outline: none; /* Usunięcie domyślnego obramowania */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Delikatny cień */
    transition: all 0.3s ease; /* Płynne przejście dla efektów */
    font-family: 'Gotham', sans-serif;
    appearance: none; /* Usunięcie domyślnego wyglądu select w niektórych przeglądarkach */
    -webkit-appearance: none; /* Usunięcie domyślnego wyglądu w przeglądarkach WebKit */
    -moz-appearance: none; /* Usunięcie domyślnego wyglądu w przeglądarkach Firefox */
}

/* Stylizacja strzałki (dla WebKit) */
select::-ms-expand {
    display: none; /* Ukrycie domyślnej strzałki w IE */
}

/* Opcjonalny styl dla focus, by zaznaczenie pola wyglądało podobnie */
select:focus {
    border-color: #e91e63; /* Kolor obramowania po zaznaczeniu */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Mocniejszy cień */
}

.centralny-div {
    opacity: 0;
    animation: fadeIn 2s ease-in forwards;
    animation-delay: 1s; /* Opóźnienie animacji o 2 sekundy */
}

/* Definicja animacji fade-in */
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}