/**************
|  style.css  |
**************/

body {
	text-align: center;
	margin: auto;
}

.login {
	background-color: rgb(180, 146, 132);
	background-image: url(din_djarin.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.home {
	background-color: rgb(163, 171, 123);
}

.container {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.logger {
	width: 350px;
	height: auto;
	padding: 20px;
	margin-right: 10px;
}

.myImg {
	text-align: center;
	margin: 35px auto;
	width: 50%;
}

.myImg img {
	box-shadow: 5px 5px 17px black;
	border: solid 2px navy;
	border-radius: 4px;
	width: 100%;
}

h1 {
	font-family: sans-serif;
	font-weight: normal;
	text-align: center;
	padding-top: 12px;
	font-size: 36px;
	color: navy;
}

.inputDiv {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

input {
	box-shadow: 2px 2px 7px black;
	border: solid 2px navy;
	background-color: snow;
	font-family: sans-serif;
	margin: 10px 0 5px;
	border-radius: 4px;
	padding: 5px 15px;
	text-align: left;
	font-size: 22px;
	color: navy;
	outline: none;
	width: 80%;
}

#bot {
	width: 25px;
	color: navy;
	cursor: pointer;
}

button {
	background-color: rgb(180, 146, 132);
	box-shadow: 2px 2px 7px black;
	border: solid 2px navy;
	font-family: sans-serif;
	border-radius: 4px;
	padding: 5px 15px;
	font-size: 22px;
	cursor: pointer;
	margin: 25px 0;
	color: navy;
	outline: none;
}

button:hover {
	background-color: snow;
}

button:active {
	box-shadow: 2px 2px 7px transparent;
}

button::-moz-focus-inner {
	border: 0;
}

@media screen and (max-width: 1080px) {

	.container {
		justify-content: center;
	}

	.login {
		background-image: none;
	}

}