@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

:root {
    --white-color: transparent; /* Bez zmian */
    --login-color: rgba(110, 115, 120, 0.85); /* Średni chłodny szary */
    --sign-color: rgba(210, 215, 220, 0.85); /* Jasny chłodny szary */
    --header-color: rgba(50, 55, 60, 0.85); /* Ciemny chłodny szary */
    --modern-pink: rgb(241, 173, 156);
    --modern-pink-2: rgba(241, 173, 156, 0.85);

    /*--login-color: rgba(247, 199, 184, 0.9);*/
    /*--sign-color: rgba(247, 220, 211, 0.9);*/
    /*--header-color: rgba(217, 139, 122, 0.9);*/
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Raleway', sans-serif;
}

p {
    font-family: 'Poppins', sans-serif;
}

#logo h1 {
    background: url(../image/logo.png) no-repeat top center;
    color: #fff;
    font-weight: 900;
    font-size: 32px; /* 2rem * 16px = 32px */
    margin-top: 1em;
    padding-top: 80px;
    text-align: center;
    text-shadow: 0 0 4px rgba(5,58,65,.75);
}

#whyHelp { /* 04_01 */
    background: url(../image/bg.png) no-repeat bottom center fixed;
    background-size: contain;
}

#logLanding { /* 04_02 */
    background: url(../image/bg1.png) no-repeat bottom center fixed;
    background-size: contain;
}

#loginLanding { /* 04_03 & 04_04 */
    background: url(../image/bg2.png) no-repeat bottom center;
    background-size: contain;
}

#signupLanding { /* 04_03 */
    background: url(../image/bg3.png) no-repeat bottom center;
    background-size: contain;
}

.wrapper {
    min-height: 100vh;
    overflow: auto;
    height: auto;
}

#logLanding .wrapper {
    background: linear-gradient(0deg, rgba(25,25,25,0.7) 0%, rgba(50,50,50,0.4) 68%);
    /*background: linear-gradient(0deg, rgba(241,173,156,0.7) 0%, rgba(252,231,222,0.4) 68%);*/
    /*background: linear-gradient(0deg, rgba(52,50,48,0.7) 0%, rgba(105,101,98,0.4) 68%);*/
}

#loginLanding .wrapper {
    /*background: linear-gradient(0deg, rgba(8, 136, 191, 0.70) 0%, rgba(7, 226, 240, 0.45) 100%);*/
    /*background: linear-gradient(0deg, rgba(241,173,156,0.7) 0%, rgba(252,231,222,0.4) 68%);*/
    background: linear-gradient(0deg, rgba(25,25,25,0.7) 0%, rgba(50,50,50,0.4) 68%);
}

#signupLanding .wrapper {
    /*background: linear-gradient(0deg, rgba(10, 16, 119, 0.84) 0%, rgba(32,221,226,0.60) 80%, rgba(192, 254, 252, 0.4) 100%);*/
    background: linear-gradient(0deg, rgba(25,25,25,0.7) 0%, rgba(50,50,50,0.4) 68%);
}

#sign {
    width: 90%;
    max-width: 800px;
    margin: 0 auto 48px; /* 3em * 16px = 48px */
    border-radius: 10px;
    /*box-shadow: 0 4px 6px rgba(0,0,0,.6);*/
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1);

}

#sign header {
    background-color: var(--header-color);
    border-radius: 10px 10px 0 0;
    color: #fff;
    padding: 8px 16px; /* .5rem * 16px = 8px, 1rem * 16px = 16px */
    text-align: center;
    grid-column: 1/3;
}

#sign article h2 {
    font-weight: 600;
    font-size: 25.6px; /* 1.6rem * 16px = 25.6px */
}

#sign article {
    display: flex;
    border-radius: 0 0 10px 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    padding: 20px 35px;
    text-align: center;
}

#loginWin {
    background-color: var(--login-color);
    color: #fff;
}

#signupWin {
    background-color: var(--sign-color);
    border-radius: 0 0 10px 10px;
    color: rgba(72,69,67,.9);
}

#loginWin a, #signupWin a {
    border-radius: 15px;
    padding: 8px 16px; /* .5rem * 16px = 8px, 1rem * 16px = 16px */
    margin-top: 15px;
    min-width: 125px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 12px; /* .75rem * 16px = 12px */
    text-decoration: none;
}

#loginWin a {
    background-color: var(--sign-color);
    border: solid 2px #fff;
    transition: all 0.3s ease; /* Płynne przejście dla wszystkich właściwości, 0.3s, z łagodnym efektem */
}

#loginWin a:hover {
    background-color: var(--modern-pink);
    border: solid 2px var(--header-color);
}

#signupWin a {
    background-color: var(--login-color);
    border: solid 2px var(--login-color);
    transition: all 0.3s ease; /* Płynne przejście dla wszystkich właściwości, 0.3s, z łagodnym efektem */
}

#signupWin a:hover {
    background-color: var(--modern-pink);
    border: solid 2px #fff;
}

#loginBtn .fas {
    color: white;
}

#loginBtn {
    transition: all 0.3s ease;
}

#loginBtn:hover {
    background-color: var(--modern-pink) !important;
    border: solid 2px #fff !important;
}

#signupBtn {
    transition: all 0.3s ease;
}

#signupBtn:hover {
    background-color: var(--modern-pink) !important;
    border: solid 2px #fff !important;
}

#signupBtn .fas {
    color: white;
}

span.separator7681 {
    /*background: #f1ad9c; !* Tło separatora *!*/
    font-weight: 100; /* Lekka waga czcionki */
    color: #f1ad9c; /* Kolor tekstu separatora */
    padding: 0 10px; /* Odstęp wewnętrzny dla lepszego wyglądu */
    font-size: 16px; /* Rozmiar czcionki */
    line-height: 1.5; /* Wysokość linii dla wyrównania */
}

@media screen and (min-width: 580px) {
    h1 { font-size: 25.6px; /* 1.6rem * 16px = 25.6px */ }
    h2 { font-size: 19.2px; /* 1.2rem * 16px = 19.2px */ }

    #logLanding #sign, #whyHelp #sign {
        display: grid;
        grid-template-columns: 50% 50%; /* three columns */
        grid-template-rows: auto 350px; /* Zamiast 75px użyj auto */
    }

    #sign a { margin-top: 35px; }
    #loginWin, #signupWin { padding: 50px 60px; }
    #signupWin { border-radius: 0 0 10px 0; }
    #loginWin { border-radius: 0 0 0 10px; }
    #sign { margin-top: 35px; }
}