#authentification {
    padding: 15px;
    text-decoration: none;
    margin: 5px;
    color: #ffffff;
    background: rgb(70,0,75, 0.5);
    border:solid 1px #ffffff;
    -moz-border-radius-topleft: 50px;
    -moz-border-radius-topright:50px;
    -moz-border-radius-bottomleft:50px;
    -moz-border-radius-bottomright:50px;
    -webkit-border-top-left-radius:50px;
    -webkit-border-top-right-radius:50px;
    -webkit-border-bottom-left-radius:50px;
    -webkit-border-bottom-right-radius:50px;
    border-top-left-radius:50px;
    border-top-right-radius:50px;
    border-bottom-left-radius:50px;
    border-bottom-right-radius:50px;
}

#accueil, #films, #series {
    color: #ffffff;
    padding: 15px;
    text-decoration: none;
    background-color: #151515;
    margin: 5px;

    -moz-border-radius-topleft: 50px;
    -moz-border-radius-topright:50px;
    -moz-border-radius-bottomleft:50px;
    -moz-border-radius-bottomright:50px;
    -webkit-border-top-left-radius:50px;
    -webkit-border-top-right-radius:50px;
    -webkit-border-bottom-left-radius:50px;
    -webkit-border-bottom-right-radius:50px;
    border-top-left-radius:50px;
    border-top-right-radius:50px;
    border-bottom-left-radius:50px;
    border-bottom-right-radius:50px;
}

#connexion, label {
    color: #DD31FF;
}

#label, #input {
    margin-top: 5px;
}

#mot-de-passe, #nom-utilisateur, #image-profil {
    display: flex;
    margin: 0;
}

input:active {
    border: none;
}

#inscription {
    background-color: black;
    border: none;
    color: #DD31FF;
    margin-top: 5%;
}

#inscription:hover {
    cursor: pointer;
}

@media screen and (max-width: 680px) { /* Si affichage téléphone*/
    #jsp {
        display: none;
    }

    main {
        display: flex;
        flex-direction: column;
        margin: 0;
        padding-top: 30%;
    }

    #div-inscription, #div-connexion, #formulaire {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-top: 10%;
    }

    #div-inscription {
        display: none;
    }

}

@media screen and (min-width: 681px) { /* Si affichage pc*/
    
    #jsp {
        position: absolute;
        width: 50%;
        background: linear-gradient(119deg, rgba(70,0,75,1) 0%, rgba(133,21,160,1) 41%, rgba(85,0,255,1) 100%);
        height: 100vh;
        left: 50%;
        transition: left 1s;
    }
    
    main {
        display: flex;
        margin: 0;
    }

    #div-inscription, #div-connexion, #formulaire {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 50%;
        margin-top: 10%;
    }
}