.main{
   padding-top: 12em;
}
.main.nd{
    padding-top: 15em;
}

.form{
    font-family: mySecondFont;
    position: relative;
    top: -150px;
    display: flex;
    flex-direction: column;
    margin: auto;
    margin-top: 4em;
    width: 850px;
}

label[for="parola"]{
    margin-top: 1.6em;
}

label[for="email"]{
    margin-top: 1.6em;
}

label[for="user-email"]{
    margin-top: 1.6em;
}

@font-face {
    font-family: myElevenFont;
    src: url("Josefin_Sans/static/JosefinSans-Regular.ttf");

  }

#user-choice,#parola,
#user-email,
#username,#email{
    font-family: myElevenFont;
    font-size: 1rem;
    height: 20px;
    background-color:hsl(0, 0%, 93%);
    border: 1px solid hsl(0, 0%, 0%);
    padding: 0.5em;
    margin-top: 0.7em;
}


.check,.check2,.check3{
    color: hsl(0, 94%, 44%);
}

#user-choice:focus,
#parola:focus,
#username:focus,
#user-email:focus,
#email:focus{
    outline: 0;
    border: 1px solid hsl(210, 100%, 56%);
}

.forgot_password{
    margin-top: 1em;
    text-decoration: none;
}

#checkbox{
    margin-top: 2.5em;
    width: 20px;
    height: 20px;
    border: 1px solid hsl(0, 0%, 0%);
}

.final_form{
    display: inline;
    word-break: break-all;
    text-align: justify;
}

#submit{
    transition: 150ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    cursor: pointer;
    border: 0;
    border-radius: 5px;
    background-color:hsl(198, 100%, 40%);
    color: hsl(0, 0%, 100%);
    margin-top: 2em;
    display: block;
    width: 120px;
    height: 40px;
}

#submit:hover{
    box-shadow: 0px 0px 3px hsl(0, 0%, 0%);
    background-color:hsl(198, 96%, 37%);
}

@media screen and (max-width:895px) {
    .form{
        width: 95%;
    }
}

@media screen and (max-width:301px) {
    .form{
        width: 85%;
    }
}