/*
"Box" level elements.
==================================================
*/

address,
article,
aside,
div,
dd,
dl,
dt,
figure,
figcaption,
footer,
form,
header,
hgroup,
main,
nav,
output,
section {
  border: 1px dashed #f0f;
  display: block;
  position: relative;

  padding: var(--spacing);
  margin-bottom: var(--spacing);
}

address > :last-child,
article > :last-child,
aside > :last-child,
div > :last-child,
dd > :last-child,
dl > :last-child,
dt > :last-child,
figure > :last-child,
figcaption > :last-child,
footer > :last-child,
form > :last-child,
header > :last-child,
hgroup > :last-child,
main > :last-child,
nav > :last-child,
output > :last-child,
section > :last-child {
  margin-bottom: 0;
}

address::before,
article::before,
aside::before,
div::before,
dd::before,
dl::before,
dt::before,
figure::before,
figcaption::before,
footer::before,
form::before,
header::before,
hgroup::before,
main::before,
nav::before,
output::before,
section::before {
  background: #fff;
  color: #f0f;
  font-family: "Courier", monospace;
  font-size: 1rem;
  letter-spacing: 0.1rem;
  line-height: 1.3;
  text-transform: uppercase;
  position: absolute;
  top: 0;
  left: 0.3rem;
}

/*
==============
BOXES: BEFORE.
==============
*/

address::before {
  content: "address";
}

article::before {
  content: "article";
}

aside::before {
  content: "aside";
}

div::before {
  content: "div";
}

dd::before {
  content: "dd";
}

dl::before {
  content: "dl";
}

dt::before {
  content: "dt";
}

figure::before {
  content: "figure";
}

figcaption::before {
  content: "figcaption";
}

footer::before {
  content: "footer";
}

form::before {
  content: "form";
}

header::before {
  content: "header";
}

hgroup::before {
  content: "hgroup";
}

main::before {
  content: "main";
}

nav::before {
  content: "nav";
}

output::before {
  content: "output";
}

section::before {
  content: "section";
}

/*
Div-itis.
==================================================
*/

div > div:not([role]):not(:empty):only-child {
  box-shadow: none;
  border: 0;
  padding: 0;
}

div > div:not([role]):not(:empty):only-child::before {
  --offset: calc(-1 * var(--spacing));

  margin-top: var(--offset);
  margin-left: var(--offset);
  content: "div-itis";
}

/*
Figure.
==================================================
*/

figure img {
  margin-bottom: var(--spacing);
}