* 	{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	margin: 0 auto;
	max-width: 1024px;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

main	{
	flex:auto;
}

section	{
	margin: 10px 20px;

}

ol {
	margin-left: 50px;
}

.code code::before	{
	content: '\23\20';
}
.center {
	text-align: center;
	margin: 0 auto;
}

.cursive	{
	font-style: italic;
}
.err	{
	color: brown;
}

.img32	{
	height: 32px;
	aspect-ratio: 1 / 1;
}

#formAuth {
	display: grid;
	place-content: center;
	margin: 0 auto;
	max-width: max-content;
	grid-template-columns: 200px 32px max-content max-content 32px;
	grid-auto-rows: max-content;
	/* gap:20px; */
	padding: 20px 20px;

	justify-items : right;
	align-items: center;

	color: var(--auth-frm-clr-fr);
	background-color: var(--auth-frm-clr-bk);
	border: 1px solid var(--auth-frm-clr-br);
	border-radius: 10px;
	box-shadow: 8px 8px 16px 0px rgba(0,0,0,0.6);

}

#imgAuth {
	grid-row: 1/4;
	justify-self: center;
	width: 200px;
}

#btnAuth {
	grid-column: 3/6;
	justify-self: stretch;
	align-self: stretch;
	border-radius: 1rem;
	font-size: 20px;
	height: 48px;

	color: var(--auth-but-clr-fr-def);
	background-color: var(--auth-but-clr-bk-def);
}

#btnAuth:focus  {
	color: var(--auth-but-clr-fr-foc);
	background-color: var(--auth-but-clr-bk-foc);

}
#btnAuth:hover {
	color: var(--auth-but-clr-fr-foc);
}


#formAuth input	{
	background-color: var(--auth-inp-clr-bk-def);
	font-size: 1.5rem;
	/* border-radius: 0.5rem; */

}
#formAuth input:focus	{
	background-color: var(--auth-inp-clr-bk-foc);
	box-shadow: 8px 8px 16px 0px rgba(0,0,0,0.6);
}

#img401	{
	display: none;
	width:768px;
}

.info	{
	text-indent: 1rem;
	padding-top: 1rem;	
}

.code
{
	/* margin: 10px 20px; */
	color: white;
	background-color: black;
}
.conf
{
	/* margin: 10px 20px; */
	color: black;
	background-color: silver;
}

.dontbr	{
	line-break: loose;
}

.flags	{
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 1rem;
}