:root {
	--surfacePrimary: #A7C9C2;
	--background: #f9fffd;          
	--surfacePrimary: rgb(167, 201, 194);      /* #A7C9C2 brook water */
	--surfaceSecondary: rgb(218, 232, 228);    /* elevated/secondary surface */

	--divider: rgba(32, 70, 65, 0.10);

	--iconPrimary: rgb(52, 105, 98);           /* deep brook teal */
	--iconSecondary: rgb(255, 255, 255);
	--iconTertiary: rgb(145, 170, 166);

	--textPrimary: rgb(74, 91, 88);             /* readable muted dark */
	--textSecondary: rgb(38, 52, 50);           /* stronger text */

	--hover: rgba(52, 105, 98, 0.12);

	--borderPrimary: rgba(52, 105, 98, 0.15);
	--borderSecondary: rgba(52, 105, 98, 0.28);

	--dividerPrimary: rgba(255, 255, 255, 0.55);
	--dividerSecondary: rgba(255, 255, 255, 0.85);
}



#login img {
	height: 20vh;
	width: auto;
	border-radius: 10px;
}


#login h1 {
	font-family: Georgia, "Time New Roman", Times, serif;
}


#login .button {
	background: var(--textPrimary);
}

#login .button:hover{
	background: color-mix(in oklab, var(--textPrimary), black 30%);
}

#login:before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(167, 201, 194, 0.9);
}

#login {
	background-image: url("/static/img/paar.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: calc(50% + 150px) center;
}


@media (min-width: 400px) {
	#login form {
		position: absolute;	
		left: 22vh;
	}
	#login:before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to right,
          rgba(167, 201, 194, 1) 0%,
          rgba(167, 201, 194, 0.9) 25%,
          rgba(167, 201, 194, 0.5) 60%,
          rgba(167, 201, 194, 0.1) 100%
         );
	}

}