/* Problem 1 */
body {
	background-color: #efefef;
}
fieldset {
	background-color: white;
}

/* Problem 2 */
.blue-box,
.orange-box {
	width: 40px;
	height: 40px;
	box-sizing: border-box;
}

.blue-box {
	background-color: blue;
}

.orange-box {
	background-color: orange;
}

/* This could also be achieved with a grid, absolute/relative positioning, etc. */
.outer-layer-2 {
	display: flex;
	flex-direction: column-reverse;
}

/* Example using absolute positioning */
/* .outer-layer-2 {
	position: relative;
}
.orange-box,
.blue-box {
	position: absolute;
}
.orange-box {
	top: -40px;
} */

/* Problem 3 */
.outer-layer-3 {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

/* Problem 4 */
/*
The reason this works is because the selector is building up to one element.
It is looking at descendents of the .outer-layer-4 class that have a p tag as
their immediate sibling that they themselves are a p tag.
This is true for the second and third p tags but not the first because the first
does not have an immediate sibling p tag coming befor it (the first p in the selector)
*/
.outer-layer-4 p + p {
	color: orange;
}

/* Problem 5 */
.inner-layer-5 {
	grid-column: 2 / span 4;
}

/* Problem 6 */
.outer-layer-6 {
	box-shadow: 0 0 4px rgba(0, 0, 255, 0.6);
}

/* Problem 7 */
.outer-layer-7 {
	overflow-x: hidden;
	overflow-y: scroll;
}

/* Problem 8 */
.uppercase.bold {
	font-family: 'Courier New';
}