body
{
	background-image: url("https://images.pexels.com/photos/164821/pexels-photo-164821.jpeg?auto=compress&cs=tinysrgb&dpr=3&w=3840");
	background-repeat: no-repeat;
	background-attachment: fixed; 
	background-size: cover;
	background-position: center center;
	min-height: auto; /* Fix for links of attribution message not working in chrome */
}

.login-container
{
	width: 24rem;
	/* height: 32rem; */
	/* background-color: #f5f5f5; */
	padding: 2.5em;
	margin: 0 auto 0 auto;
	/* box-shadow: 0 2px 2px rgba(0,0,0,0.22); */
	/* border-radius: 0.2rem; */
	/* position: fixed; */
	/* top: 38.2%; golden ratio */
	/* top: calc(50% - 1.625rem); */
	/* left: 50%; */
	/* transform: translate(-50%, -50%); */
	text-align: center;
}

.login-container__logo
{
	background: url("/assets/logo/traced_transparent.svg");
	min-width: 16rem;
	min-height: 16rem;
	background-repeat: no-repeat;
	background-position: center center;
	content: ' ';
	margin-bottom: 2rem;
}

.login-container__form__input
{
	width: calc(100% - 2 * 1em - 2 * 0.1rem); /* 100% - 2 * padding - 2 * border */
	padding: 0.5em 1em;
	border: 0.1rem solid #2121217f;
	margin: 0.5rem 0;
	border-radius: 0.2rem;
	background-color: #212121dd;
	font-size: 1.2rem;
	color: #ffffffdd;
	box-shadow: 0 2px 2px rgba(0,0,0,0.22);
	font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
}

.login-container__form__button
{
	width: calc(100%);
	height: 2.8rem;
	padding: 0.5em 1em;
	/* border: 0.1rem solid #2121217f; */
	border: none;
	margin: 2rem auto 0.5rem auto;
	font-weight: 500;
	border-radius: 1.4rem;
	font-size: 1rem;
	background-color: #fed539;
	background: linear-gradient(60deg, #febb39 0%, #fed539 100%);
	color: #000000bf;
	box-shadow: 0 2px 2px rgba(0,0,0,0.22);
    transition: box-shadow 0.1s;
}

.login-container__form__button:hover
{
	cursor: pointer;
	box-shadow: 0 4px 4px rgba(0,0,0,0.22);
}