/* scene42:  the filters. */

body {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 16dp 20dp;
	background-color: #10182880;
}

h1 {
	margin-bottom: 4dp;
}

.row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	margin-top: 4dp;
}

.cell {
	width: 300dp;
	margin-right: 40dp;
}

.wide {
	width: 640dp;
}

.label {
	font-size: 15dp;
	color: #a0b0c8;
	margin: 0 0 2dp 0;
}

.panel {
	width: 240dp;
	padding: 8dp 12dp;
	background-color: #24344e;
	border: 2dp #ffd35a;
	font-size: 16dp;
}

.panel p {
	margin: 4dp 0 0 0;
}

.chip {
	display: inline-block;
	width: 40dp;
	height: 18dp;
	margin-right: 6dp;
}

.yellow {
	background-color: #ffd35a;
}

.red {
	background-color: #d83a3a;
}

.blue {
	background-color: #4a7ad8;
}

.blurred {
	filter: blur(6dp);
}

.wideBlur {
	filter: blur(40dp);
}

.shadowText {
	font-size: 26dp;
	color: #ffd35a;
	filter: drop-shadow(#000000cc 6dp 6dp 4dp);
}

.squares {
	display: flex;
	flex-direction: row;
}

.square {
	width: 56dp;
	height: 44dp;
	margin-right: 10dp;
	background-color: #e0603a;
	border: 4dp #4a7ad8;
}

.grayscale {
	filter: grayscale(1);
}

.sepia {
	filter: sepia(1);
}

.invert {
	filter: invert(1);
}

.hue {
	filter: hue-rotate(90deg);
}

.saturate {
	filter: saturate(3);
}

.soft {
	box-shadow: 0 12dp 24dp #000000aa;
}

.muted {
	color: #a0b0c8;
}