* {/* general properties*/
        box-sizing: border-box;
        font-family:  cantarell;
        
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}
body {
  background-color: #435165;

}

.header { /* box displaying login or register */
  width: 40%;
  height: 10%;
  font-size: 30px;
  
  margin: 50px auto 0px;
  color: white;
  background: #3274d6;
  text-align: center;
  border: 1px solid #B0C4DE;
  border-bottom: 1px solid #dee0e4;
  padding: 0px;
}
form, .content { /* box with inputs and buttons */
  width: 40%;
 
  margin: 0px auto;
  padding: 20px;
  border: 1px solid #B0C4DE;
  background: white;
  border-radius: 0px 0px 0px 0px;
}
.input-group {
        display: flex;
        
        justify-content: left;
        padding-top: 20px;

}
.input-group label { /* label before input*/
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        background-color: #3274d6;
        color: #ffffff;
	margin-left : 0%;
}
.input-group input { /* forms to enter infos */
  margin-right : 2%;
  height: 30px;
  width: 100%;
  padding: 5px 10px;
  font-size: 16px;
  border-radius: 0px;
  border: 1px solid gray;
}
.btn { /* parameters of button */
  height: 50px;
  width: 100%;
  border: none;
  font-size: 15px;
  color: white;
  background: #3274D6;
  cursor: pointer;
}
.error { /* Error displayed */
  width: 75%; 
  margin: 0px auto; 
  padding: 10px; 
  border: 1px solid #a94442; 
  color: #a94442; 
  background: #f2dede; 
  border-radius: 5px; 
  text-align: left;
}
.success {
  color: #3c763d; 
  background: #dff0d8; 
  border: 1px solid #3c763d;
  margin-bottom: 20px;
}