/* This code puts a dashed line around everything as you hover over it. */
*:hover {
    border: 2px solid;
}

* { /* The browser will jiggle the boxes around to make it fit the border, so I use a transparent-by-default border to avoid that. */
    border: 2px solid transparent;
}

*::after{
    position: relative;
    font-size: 12pt;
    font-family: monotype;
    bottom: 0;
    right: 0;
    z-index: 100;
    background-color: white;
}

/* Now we assign a colour to each element and do some other minimal styling. */

body {
    background-color: darkorange;
    /* These two lines put the body of the html
        * document in the center of the page.
        *
        * It does this by first setting the width to 60% of the display width, and then putting 20% of the display width in padding on either side. */
    padding: 0 20vw;
    width: 60vw;
    &::after {content: "body"};
}

footer {
    background-color: beige;
    &::after {content: "footer"};
}

article {
    background-color: yellowgreen;
    &::after {content: "article"};
}

aside {
    background-color: green;
    position: relative;
    right: -10vw;
    &::after {content: "aside"};
}

main {
    background-color: cyan;
    &::after {content: "main"};
}

h1 {
    background-color: yellow;
    &::after {content: "h1"};
}

h2 {
    background-color: gold;
    &::after {content: "h2"};
}

h3 {
    background-color: greenyellow;
    &::after {content: "h3"};
}

h4 {
    background-color: khaki;
    &::after {content: "h4"};
}

table {
    background-color: darkviolet;
    &::after {content: "table"};
}

tr {
    background-color: deeppink;
    &::after {content: "tr"};
}

thead {
    background-color: deepskyblue;
    &::after {content: "thead"};
}

tbody {
    background-color: lightcoral;
    &::after {content: "tbody"};
}

td {
    background-color: lightpink;
    &::after {content: "td"};
}

th {
    background-color: lightsalmon;
    &::after {content: "th"};
}

p {
    background-color: orange;
    &::after {content: "p"};
}

ul {
    background-color: navy;
    &::after {content: "ul"};
}

ol {
    background-color: turquoise;
    &::after {content: "ol"};
}

li {
    background-color: hotpink;
    &::after {content: "li"};
}

strong {
    background-color: crimson;
    &::after {content: "strong"};
}

code {
    background-color: palevioletred;
    &::after {content: "code"};
}

a {
    background-color: lightpink;
    &::after {content: "a"};
}