#login_opts
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	text-align: center;
	margin-top: 5pt;
	border: solid var(--third-color);
	border-radius: 15pt;
}
@media (max-aspect-ratio: 10/9)
{
	#login_opts
	{
		grid-template-columns: repeat(1, 1fr);
	}
}

#login_opts > div
{
	margin: 5pt;
	display: grid;
}

#email_login
{
	gap: 5pt;
}
#email_login form
{
	grid-row: 1;
	grid-column: 1/3;

	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: inherit;
}
#email_login form input
{
	font-size: 15pt;
	background-color: var(--third-color);
	border-color: var(--second-color);
}

#login_button, #signup_button
{
	background-color: var(--third-color);
	font-size: x-large;
	border-radius: 20pt;
}
#login_button
{
	grid-row: 2;
	grid-column: 1;
}
#signup_button
{
	grid-row: 2;
	grid-column: 2;
}

#oauth_opts
{
	gap: 10pt;
	grid-template-columns: repeat(1, 1fr);
}
#oauth_opts > div
{
	display: flex;
	border-radius: 20pt;
	font-size: medium;
	align-items: center;
	height: 60pt;
}
#oathu_opts > div *
{
	text-align: center;
}
#oauth_opts > div img
{
	display: flex;
	float: left;
	width: 25pt;
	margin: 15pt;
}

#google_login
{
	background-color: white;
	color: black;
}

#discord_login
{
	background-color: #5865F2;
}