* { box-sizing: border-box; }
body { margin: 0; }

html {
	font-family: 'Nunito', Helvetica, sans-serif;
	background: #e4e4d5;
}
header {
	margin: 4rem;
}
h1 {
	text-transform: uppercase;	
	font-size: 4rem;
	border: 8px solid #d55349;
	text-align: center;
}

.D header {
	margin: 3rem;
	display: grid;
	grid-template-columns: 0 max-content 5rem auto;
	grid-template-rows: 1.5rem 50px min-content auto auto;
	gap: 0 1rem;
}
.D h1 {
	grid-column: 1 / 3;
	grid-row: 1 / 5;
	border: none;
	margin: 0;
	font-size: 2.5rem;
}
.D nav {
	writing-mode: vertical-rl;
	grid-column: 3 / 5;
	grid-row: 3;
	background: #d55349;
}
.D .red-box {
	border: 8px solid #d55349;
	grid-row: 2 / 5;
	grid-column: 2 / 4;
	z-index: -1;
}
.D ul {
	padding: 1rem;
}
.D li {
	list-style: none;
}
.D a { 
	color: black; 
	text-transform: uppercase; 
	text-decoration: none; 
	font-size: 1.3rem;
	font-weight: 800;
}
.D img {
	mix-blend-mode: overlay;
	grid-column: 3 / 5;
	grid-row: 3 / 6;
}
.D h1 {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
}
.D h1 span:nth-child(1) { /* A */
	grid-column: 2;
	grid-row: 1;
}
.D h1 span:nth-child(2) { /* P */
	grid-column: 3;
	grid-row: 1;
}
.D h1 span:nth-child(3) { /* P */
	grid-column: 6;
	grid-row: 1;
}
.D h1 span:nth-child(4) { /* L */
	grid-column: 3;
	grid-row: 2;
}
.D h1 span:nth-child(5) { /* I */
	grid-column: 4;
	grid-row: 2;
}
.D h1 span:nth-child(6) { /* E */
	grid-column: 5;
	grid-row: 3;
}
.D h1 span:nth-child(7) { /* D */
	grid-column: 6;
	grid-row: 3;
}
.D h1 span:nth-child(8) { /* C */
	grid-column: 1;
	grid-row: 4;
}
.D h1 span:nth-child(9) { /* Y */
	grid-column: 2;
	grid-row: 4;
}
.D h1 span:nth-child(10) { /* B */
	grid-column: 5;
	grid-row: 5;
}
.D h1 span:nth-child(11) { /* E */
	grid-column: 6;
	grid-row: 5;
}
.D h1 span:nth-child(12) { /* R */
	grid-column: 2;
	grid-row: 6;
}
.D h1 span:nth-child(13) { /* N */
	grid-column: 3;
	grid-row: 6;
}
.D h1 span:nth-child(14) { /* E */
	grid-column: 7;
	grid-row: 6;
}
.D h1 span:nth-child(15) { /* T */
	grid-column: 4;
	grid-row: 7;
}
.D h1 span:nth-child(16) { /* I */
	grid-column: 5;
	grid-row: 7;
}
.D h1 span:nth-child(17) { /* C */
	grid-column: 7;
	grid-row: 8;
}
.D h1 span:nth-child(18) { /* S */
	grid-column: 8;
	grid-row: 8;
}