/* ---------------------------- */
/*      FORM WITH BORDER        */
/* ---------------------------- */
form {
    border: 3px solid #f1f1f1;
    width: 50%;
}
/* Avatar image inside form */
.imgcontainer {
    text-align: center;
    margin: 1.5em 0em 0.5em 0em;
}
img.avatar {
    width: 40%;
    border-radius: 50%;
    border: 3px solid #f1f1f1;
}
.container {
    padding: 1em;
}

/* ---------------------------- */
/*         INPUT FIELDS         */
/* ---------------------------- */
input[type=text], input[type=password], input[type=email] {
    font-family: 'PT Mono';
    font-size:   100%;
    font-weight: 400;
    color:       #3465a4;
    width:       65%;
    padding:     0.5em 1.5em;
    margin:      0.5em 0em;
    display:     inline-block;
    border:      1px solid #ccc;
    box-sizing:  border-box;
}

label {
    font-size:   100%;
}

/* The "Forgot password" text */
span.psw {
  float: right;
  padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
}