:root
{
    --shadow: rgba(0,0,0,0.1);

    --set-px: 4px;

    /*
    --bubble-border: 0 -1*var(--set-px) white, 
		0 -2*var(--set-px) black, 
		var(--set-px) 0 white, 
		var(--set-px) -1*var(--set-px) black, 
		2*var(--set-px) 0 black, 
		0 var(--set-px) white, 
		0 2*var(--set-px) black, 
		-1*var(--set-px) 0 white, 
		-1*var(--set-px)  var(--set-px) black, 
		-2*var(--set-px) 0 black, 
		-1*var(--set-px) -1*var(--set-px) black, 
		var(--set-px) var(--set-px) black;
        */

        --bubble-border: 0 -4px white, 
		0 -8px black, 
		4px 0 white, 
		4px -4px black, 
		8px 0 black, 
		0 4px white, 
		0 8px black, 
		-4px 0 white, 
		-4px  4px black, 
		-8px 0 black, 
		-4px -4px black, 
		4px 4px black;
}

/*
bubble-border: 0 -1*var(--set-px) white, 
		0 -2*var(--set-px) black, 
		var(--set-px) 0 white, 
		var(--set-px) -1*var(--set-px) black, 
		2*var(--set-px) 0 black, 
		0 var(--set-px) white, 
		0 2*var(--set-px) black, 
		-1*var(--set-px) 0 white, 
		-1*var(--set-px)  var(--set-px) black, 
		-2*var(--set-px) 0 black, 
		-1*var(--set-px) -1*var(--set-px) black, 
		var(--set-px) var(--set-px) black;
}
*/

.bubble {
	position: absolute;
	display: inline-block;
	margin: 5*var(--set-px);
	text-align: center;
	/*font-family: 'Press Start 2P', cursive;*/
    font-family: 'pixelifysans';
	font-size: 16px;
	line-height:1.3em;
	background-color: white;
	color: black;
	padding: 3*var(--set-px);
	box-shadow: var(--bubble-border);
		
	box-sizing: border-box;
	width:200px;

	&::after {
		content: '';
		display: block;
		position: absolute;
		box-sizing: border-box;	
	}
	
	&.shadow { box-shadow: var(--bubble-border), 4px 12px var(--shadow), 12px 4px var(--shadow), 8px 8px var(--shadow); }*/
	
	&.mini { width:110px; font-size: 16px; padding: 4px; font-family: monospace; }
	&.medium { min-width: 150px; width:400px; font-size: 20px;}
	&.large { width:560px; font-size: 24px; text-align:left;}
	&.grow { width:initial; }
	
	&.top::after {
		height: var(--set-px);
		width: var(--set-px);
		top: -2*var(--set-px);
		left: 8*var(--set-px);
		box-shadow: 
			0 -1*var(--set-px) black, 
			0 -2*var(--set-px) black, 
			0 -3*var(--set-px) black, 
			0 -4*var(--set-px) black, 
			-1*var(--set-px) -3*var(--set-px) black, 
			-2*var(--set-px) -2*var(--set-px) black, 
			-3*var(--set-px) -1*var(--set-px) black, 
			-1*var(--set-px) -1*var(--set-px) white, 
			-2*var(--set-px) -1*var(--set-px) white, 
			-1*var(--set-px) -2*var(--set-px) white, 
			-1*var(--set-px) 0 white, 
			-2*var(--set-px) 0 white, 
			-3*var(--set-px) 0 white;
	}
	
	&.right::after {
		height: var(--set-px);
		width: var(--set-px);
		top: 21*var(--set-px);
		right: -2*var(--set-px);
		background: white;
		box-shadow: 
			1*var(--set-px) -1*var(--set-px) white,
			1*var(--set-px) 0 white,
			2*var(--set-px) 0 white,
			0 -2*var(--set-px) white,
			1*var(--set-px) 1*var(--set-px) black, 
			2*var(--set-px) 1*var(--set-px) black, 
			3*var(--set-px) 1*var(--set-px) black, 
			4*var(--set-px) 1*var(--set-px) black,
			3*var(--set-px) 0 black, 
			2*var(--set-px) -1*var(--set-px) black, 
			1*var(--set-px) -2*var(--set-px) black,
			0 -1*var(--set-px) white;
	}
	
	&.bottom::after {
		height: 4px;
		width: 4px;
		bottom: -8px;
		left: 32px;
		box-shadow: 
			0 4px black, 
			0 8px black, 
			0 12px black, 
			0 16px black, 
			-4px 12px black, 
			-8px 8px black, 
			-12px 4px black, 
			-4px 4px white, 
			-8px 4px white, 
			-4px 8px white, 
			-4px 0 white, 
			-8px 0 white, 
			-12px 0 white;
	}
	
	&.left::after {
		height: 4px;
		width: 4px;
		top: 20px;
		left: -8px;
		background: white;
		box-shadow: 
			-4px -4px white,
			-4px 0 white,
			-8px 0 white,
			0 -8px white,
			-4px 4px black, 
			-8px 4px black, 
			-12px 4px black, 
			-16px 4px black,
			-12px 0 black, 
			-8px -4px black, 
			-4px -8px black,
			0 -4px white;
	}
}