@import 'couleurs.css';

:root {
    --primary-color-modal: hsl(175deg 100% 34%);
    --secondary-color-modal: hsl(233deg 36% 38%);
}


* {
    font-family: "Poppins";
}
.logo {
    width: 90px;
    margin: 130px auto;
    border-radius: 50%;
    overflow: hidden;
    background-color: white;
    text-align: center;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.logoin{
    background-color:white;
}

.screen {
    background: var(--primary-color-modal);
    padding: 2em;
    display: flex;
    flex-direction: column;
    border-radius: 30px;
    box-shadow: 0 0 2em hsl(231deg 62% 94%);
}

.modal-login {
    user-select: none;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: hsl(218deg 50% 91%);
    height: 100vh;
}

.screen-1 {
    background: var(--primary-color-modal);
    padding: 2em;
    display: flex;
    flex-direction: column;
    border-radius: 30px;
    box-shadow: 0 0 2em hsl(231deg 62% 94%);
    gap: 10px;
}

    .screen-1 .logo {
        margin-top: -3em;
    }

    .screen-1 .email {
        background: hsl(0deg 0% 100%);
        box-shadow: 0 0 2em hsl(231deg 62% 94%);
        padding: 1em;
        display: flex;
        flex-direction: column;
        border-radius: 20px;
        color: var(--tertiary-color);
        margin-top: -3em;
    }

        .screen-1 .email input {
            outline: none;
            border: none;
        }

            .screen-1 .email input::placeholder {
                color: hsl(0deg 0% 0%);
                font-size: 0.9em;
            }

        .screen-1 .email ion-icon {
            color: var(--tertiary-color);
            margin-bottom: -0.2em;
        }

    .screen-1 .password {
        background: hsl(0deg 0% 100%);
        box-shadow: 0 0 2em hsl(231deg 62% 94%);
        padding: 1em;
        display: flex;
        flex-direction: column;
        border-radius: 20px;
        color: var(--tertiary-color);
    }

        .screen-1 .password input {
            outline: none;
            border: none;
        }

            .screen-1 .password input::placeholder {
                color: hsl(0deg 0% 0%);
                font-size: 0.9em;
            }

        .screen-1 .password ion-icon {
            color: var(--tertiary-color);
            margin-bottom: -0.2em;
        }

        .screen-1 .password .show-hide {
            margin-right: -5em;
        }

    .screen-1 .login {
        padding: 1em;
        background: var(--primary-color);
        color: hsl(0 0 100%);
        border: none;
        border-radius: 30px;
        font-weight: 600;
    }

    .screen-1 .footer {
        display: flex;
        font-size: 0.7em;
        color: var(--tertiary-color);
        gap: 14em;
        padding-bottom: 10em;
        justify-content:center;
    }

        .screen-1 .footer span {
            cursor: pointer;
        }

button {
    cursor: pointer;
}
.remember{
    vertical-align:middle;
    margin-right:5px !important;
}

.toggle-password {
    cursor: pointer;
}