@charset "utf-8";
/*
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
=-=-=-=- DESIGNED AND BUILT BY IAN BESLER =-=-=-=-
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
*/

button:hover {
	cursor: pointer;
}

#background-random-boxes div {
	background-color: rgba(255, 255, 255, 1.0);
	position: fixed;
	min-width: 10vw;
	padding: 0.5em;
	border: 2px solid #000;
	outline: 2px solid #fff;
	transition: background-color 1s;
	transition:	top		0.8s, 
				left	0.8s,
				width	0.8s,
				height	0.8s;
}

	.window-full-screen {
		position: initial;
		top: 0px;
		left: 0px;
		width: 100vw;
		height: 100vh;
	}

p::first-line {
	font-size: 24pt;
}

.post_it_white	{box-shadow: 10px 10px 10px rgba(255, 255, 255, 1.0);}
.post_it_yellow	{box-shadow: 10px 10px 10px rgba(252, 244, 167, 1.0);}
.post_it_yellow	button {position: absolute;}
.post_it_yellow	button:nth-of-type(2) {left: 36pt;}
.post_it_blue	{box-shadow: 10px 10px 10px rgba(188, 242, 253, 1.0);}
.post_it_green	{box-shadow: 10px 10px 10px rgba(195, 253, 170, 1.0);}
.post_it_pink	{box-shadow: 10px 10px 10px rgba(246, 201, 200, 1.0);}
.post_it_purple	{box-shadow: 10px 10px 10px rgba(186, 201, 251, 1.0);}
.post_it_gray	{box-shadow: 10px 10px 10px rgba(238, 238, 238, 1.0);}

#background-random-boxes div:nth-of-type(01) {z-index:1000;}
#background-random-boxes div:nth-of-type(02) {z-index:999;}
#background-random-boxes div:nth-of-type(03) {z-index:998;}
#background-random-boxes div:nth-of-type(04) {z-index:997;}

#background-random-boxes div:hover {
	background-color: rgba(162, 207, 254, 1.0);
	box-shadow: 20px 20px 20px #000;
/*	mix-blend-mode: difference;*/
	cursor: grab;
	z-index: 100;
	outline: 2px solid #000;
}

#background-random-boxes div:active {
	cursor: grabbing;
}

	.mix-blend-mode-exclusion {
		mix-blend-mode: difference;
	}

	.mix-blend-mode-exclusion:hover {
		mix-blend-mode: normal;
	}

/*button#hide-show-background-boxes {
	width: 1.6em;
	height: 1.6em;
	background-color: #fff;
	border: 0.1em solid #000;
	border-radius: 50%;
	font-family: sans-serif;
	font-weight: bold;
	font-size: 48pt;
	position: fixed;
	z-index: 100;
	top: 2%;
	left: 1.5%;
}*/

	#background-random-boxes button {
		border: 1px solid black;
		background-color: rgba(255, 255, 255, 0.5);
		font-size: 18pt;
		width: 24pt;
		height: 24pt;
		padding: 0em 0.2em;
		margin: 0.2em;
		clear: both;
	}

		#background-random-boxes div button:hover {
			background-color: rgba(255, 255, 255, 1);
		}

/*
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
=-=-=-=- REDUNDANT PSEUDO-RANDOM CSS STYLES =-=-=-=-=
-=-=-=-= AS BACKUP IN CASE JAVASCRIPT FAILS -=-=-=-=-
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
*/