/* Needs more specificity to override theming app */


html {
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: unset !important;
	background-image: unset !important;
}

body#body-login {
background-color    : var(--color-primary) !important;
background-position : center;
background-repeat   : no-repeat;
background-size     : cover;
}

#body-login {
background-color: #000;
}


#body-login input.primary,
#body-login button.primary,
#body-login #alternative-logins li a {
background-color : rgba(0, 0, 0, .5) !important;
}

/* Load more fitting image sizes based on screen resolution */

@media only screen and (max-width: 1920px) {
	body#body-login {
		background-image: url('https://source.unsplash.com/featured/1920x1080?nature,nature') !important;
	}
}

@media only screen and (min-width: 1921px) and (max-width: 2560px) {
	body#body-login {
		background-image: url('https://source.unsplash.com/featured/2560x1440?nature,nature') !important;
	}
}

@media only screen and (min-width: 2561px) {
	body#body-login {
		background-image: url('https://source.unsplash.com/featured/3840x2160?nature,nature') !important;
	}
}