body
{
	height:			100vh;
	width:			100vw;
}

@font-face
{
	font-family:	'fontawesome';
	font-style:		normal;
	font-weight:	400;
	src:			url("./font/fontawesome/fa-regular-400.woff2");
}

/* === image viewer ==================== */

image-viewer
{
	display: 		block;
	position:		absolute;
	width: 			540px;
	height:			360px;
	overflow: 		hidden;
	background:		rgb(128,128,128);

}

image-viewer img
{
	display: 		block;
	position: 		absolute;
	left:			0px;
	top:			0px;
	width: 			100%;
}

/* === controls ======================= */

image-viewer image-controls
{ 
	display: 		inline-block;	
	position: 		absolute;
	top:			10px;
	right:			10px;
	width:			42px;
	height:			auto;
	border-radius:	6px;
	background: 	rgba(64,64,64,0.9);
	padding:		6px 6px 6px 6px;
	z-index: 		2147483647;
	overflow-x:		hidden;
}

image-viewer image-controls button
{
	background-color:	rgba(0,0,0,0);
	border:				0px;
	border-radius:		4px;
	color:				#FFF;
	font-size:			22px;
	width:				25px;
}
image-viewer image-controls button:hover
{
	color:				rgba(160,160,160,1);
}
image-viewer image-controls button:active
{
	color:				rgba(16,16,16,1);
}

image-viewer image-controls button.plus:after
{
	font-family: 	FontAwesome;
	content: 		"\2b";
}
image-viewer image-controls button.minus:after
{
	font-family: 	FontAwesome;
	content: 		"\f068";
}
image-viewer image-controls button.reset:after
{
	font-family: 	FontAwesome;
	content: 		"\e122";
	margin-left:	3px;
	margin-top:		5px;
	display: 		inline-block;
}
image-viewer image-controls button.fullscreen
{
	margin-bottom: 20px;
}

image-viewer image-controls button.fullscreen:after
{
	font-family: 	FontAwesome;
	content: 		"\f065";
}
image-viewer image-controls button.smallscreen:after
{
	font-family: 	FontAwesome;
	content: 		"\f066";
}