/* ------------------------------------------------------------------------------ */
/* -------------------------------------------------------------- 6.00/00 - 09-09-22
/* file	-> viewport.css */
/* info	-> display viewport size, window size and pixel ratio */
/* link -> https://codepen.io/geekatori/pen/azKrJK */
/* upd	-> 22-09-2019 */
/* ------------------------------------------------------------------------------ */
:root {
	/* viewport only */
	--view-col: #fff;
	--view-bgr: rgba(255,255,255,.8);	/* white */
	--view-320: rgba(44,62,80,.8); 		/* darkgray */
	--view-480:	rgba(231,76,60,.8); 	/* red */
	--view-768: rgba(245,171,53,.8); 	/* orange */
	--view-1280:rgba(0,177,106,.8); 	/* green */	
	--view-1920:rgba(52,152,219,.8); 	/* blue */
	}

/* VIEWPORT */
.viewportsize {
	position:fixed;
	top:32px;
	display:block;
	left:2rem;
	max-width:256px;
	padding:4px 6px;
	border: 1px solid rgba(34,49,63,.75); /* black */
	box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.15);
	/*background: rgba(255,255,255,.75);*/
	font-family:'arial',sans-serif;
	z-index:99999;
	}
.viewscreen {
	color:var(--view-col,#fff);
	}
.viewratio {
	color:var(--view-col,#fff);
	}
/* ------------------------------------------------------------------------------ */
/* media-queries */	
@media (min-width: 320px) {
	.viewportsize {
	background:var(--view-320,#000); /* darkgray */
	color:var(--view-col,#fff);
	}
}
@media (min-width: 480px) {
	.viewportsize {
	background:var(--view-480,red); /* red */
	color:var(--view-col,#fff);
	}
}	
@media (min-width: 768px) {
	.viewportsize {
	background:var(--view-480,orange); /* orange */
	color:var(--view-col,#fff);
	}
}
@media (min-width: 1280px) {
	.viewportsize {
	background:var(--view-1280,green); /* green */
	color:var(--view-col,#fff);
	}
}
@media (min-width: 1920px) {
	.viewportsize {
	background:var(--view-1920,blue); /* blue */
	color:var(--view-col,#fff);
	}
}
/* ------------------------------------------------------------------------------ */
/* END */	
/* ------------------------------------------------------------------------------ */