body {
   background-color:#666666;
   font-family:oswald;
}

.login {
  	width: 95%;
    max-width:400px;
  	background-color: #cccccc;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin-top: 100px;
    margin-left:auto;
    margin-right:auto;
    font-family:oswald;
}

.login * {
  font-family:oswald;
}


.login h1 {
  	text-align: center;
  	color: #00000;
  	font-size: 30px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: orange;
  	color: #333333;
}
.login form input[type="password"], .login form input[type="text"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
    font-size: 1.05em; 
}
.login form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
 	  margin-top: 20px;
  	background-color: orange;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #333333;
  	transition: background-color 0.2s;
    font-size: 1.3em; 
}

.login form input[type="submit"]:hover {
	background-color: black;
  color:white;
  transition: background-color 0.2s;
}

@media (max-width:1024px){
    .login {
       margin-top:10px!important;
    }
}

#username {
     text-transform: uppercase;
}

::-webkit-input-placeholder {
   text-transform: initial;
}

:-moz-placeholder { 
   text-transform: initial;
}

::-moz-placeholder {  
   text-transform: initial;
}

:-ms-input-placeholder { 
   text-transform: initial;
}