@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=block');

:root {
	font-family: "IBM Plex Serif",  serif;
	font-display: block; 	
	height: 100%; 

	--brad: 6px; 	
	--font: "IBM Plex Serif", serif; 	
}
body { width: 100%; height: 100%; margin: 0; } 		 	

body[includeHeader] { display: flex; flex-direction: column; } 	
header, header > a:first-child, header > div.list { height: 32px; background-color: #eee; display: inline-flex; align-items: center; gap: 12px; z-index: 3; } 	
	header { padding: 16px; gap: 24px; justify-content: space-between; }  	 	 	
header * { font-family: "IBM Plex Serif" !important; }
header > a:first-child > img { height: 100%; } 	
header > a:first-child > span.title { font-weight: 600; font-size: 26px; line-height: 0.8;  position: relative; bottom:  2px; } 	

a[invisible] {
	color: initial;  	
	text-decoration: none; 	
	user-select: none;   
}

h2, p { display: inline-block; text-align: center; margin: 0; }
hr { width: 100%; color: black; opacity: 0.9 ; }

img.logo { user-select: none; width: 65.7898143px; } 			 	

/*************************************************************************/
/*(******************************* FORMS *******************************)*/
/*************************************************************************/
div#form {
	display: flex;
	align-items: center;
	flex-direction: column; 	
	gap: 36.5px; 	 
}
div#form > div#inputs { 	
	display: flex;	
	align-items: center;
	flex-direction: column; 	
	gap: 14.5px; 	 
}

div#form input {
	padding: 10px; 	
	border: solid 1.5px #aaa; 	
	border-radius: var(--brad); 	
	outline: none; 	
}  
div#form label { 
	display: flex;
	flex-direction: column; 		
	user-select: none;
	width: 254.681943px;  
}  
div#form label[err]::after { 		 
	color: darkred;  
	font-size: smaller; 	
	content: attr(err); 
	  text-wrap:  wrap;
}  

div#form button {
	padding: 10px 25px 10px 25px; 	 	
	border: solid 1.5px #aaa;
	background-color: #eee; 	
	border-radius: var(--brad); 	
	outline: none;
	opacity: 0.8; 	
}	 	
div#form button:not(:disabled):hover { opacity: 1; }
div#form button:disabled { opacity: 0.63; }