/* scene40:  shapes that clip through the stencil clip mask. */

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

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

/* A rounded list:  the rows fill it edge to edge, so square corners would show as coloured
   bands past the curve. */
.rounded {
	width: 200dp;
	height: 220dp;
	overflow-y: auto;
	border-radius: 16dp;
	background-color: #24344e;
	font-size: 20dp;
}

.rounded div {
	padding: 6dp 14dp;
}

.odd {
	background-color: #ffd35a;
	color: #101828;
}

.even {
	background-color: #33507a;
}

/* A panel rotated 8 degrees with overflow hidden and a block larger than it inside. */
.tilted {
	width: 200dp;
	height: 160dp;
	margin: 30dp 40dp 0 40dp;
	overflow: hidden;
	transform: rotate(8deg);
	border: 3dp #ffd35a;
	background-color: #101828;
}

.big {
	width: 300dp;
	margin: -24dp 0 0 -40dp;
	padding: 20dp;
	background-color: #7a2d33;
	font-size: 20dp;
}

.muted {
	color: #a0b0c8;
}

/* Nested masks:  a rounded child inside a rounded parent. */
.outer {
	width: 180dp;
	height: 220dp;
	overflow: hidden;
	border-radius: 40dp;
	background-color: #ffd35a;
	padding: 20dp;
}

.inner {
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 30dp;
	background-color: #24344e;
}

.fill {
	width: 240dp;
	height: 300dp;
	margin: -30dp 0 0 -30dp;
	padding: 50dp 20dp 30dp 44dp;
	background-color: #33507a;
	font-size: 17dp;
}