* {
	box-sizing:border-box
}

body {
	margin:0;
	background:var(--page-background);
	color:var(--text);
	font-family:Roboto,Arial,Helvetica,sans-serif
}

.login-page {
	min-height:100vh;
	min-height:100svh;
	display:grid;
	place-items:center;
	padding:40px 24px
}

.login-content {
	width:min(100%,620px);
	text-align:center
}

.login-logo {
	height:140px;
	margin:0 auto 36px;
	display:flex;
	align-items:center;
	justify-content:center
}

.login-logo img {
	max-width:95%;
	width:720px;
	height:140px;
	object-fit:contain
}

h1 {
	font-size:clamp(20px,3vw,26px);
	line-height:1.5;
	font-weight:500;
	color:var(--primary);
	margin:0 0 30px
}

.google-login {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	min-height:44px;
	padding:10px 16px 10px 12px;
	border:1px solid #747775;
	border-radius:999px;
	background:#fff;
	color:#1f1f1f;
	font-family:'Google Sans',Roboto,Arial,sans-serif;
	font-size:14px;
	font-weight:500;
	line-height:20px;
	cursor:pointer
}

.google-login img {
	display:block;
	flex-shrink:0;
	width:20px;
	height:20px;
	object-fit:contain
}

.google-login:hover {
	background:#f8faff;
	box-shadow:0 1px 3px #0002
}

.google-login:focus-visible {
	outline:3px solid var(--highlight);
	outline-offset:4px
}

@media(max-width:480px) {
	.login-logo {
		margin-bottom:24px
	}
}