:root {
    font-size: 16px;
    font-family: 'Times New Roman', Times, serif;
}

body {
    background-image: url("/stars.png");
}

main {
    margin-top: 2em;
}

header > h1 {
    text-align: center;
    font-size: 4rem;
    color: white;
}

header > nav {
    font-size: 2rem;
    color: aliceblue;
    text-align: center;
}

header > nav a {
    color: rgb(0, 255, 255);
}

header > nav a:hover {
    color: rgb(255, 255, 255);
}

header > nav a:focus {
    color: rgb(255, 255, 0);
}

header > nav a:visited {
    color: rgb(255, 0, 255);
}

header > nav ul > li {
    margin: 0 1rem;
    display: inline-block;
    list-style: none;
}

header > nav ul > li::before {
    display: inline-block;
    content: "[";
}

header > nav ul > li::after {
    display: inline-block;
    content: "]";
}

header > h1 {
    text-shadow:#0044ff 4px 4px;
}

article {
    margin: 0rem;
    padding: 2rem;
    position: relative;
    max-width: 40rem;

    border-width: 5px;
}

article > *:first-child {
    margin-top: 0;
}

article:nth-of-type(3n) { border-radius: 2em; }
article:nth-of-type(7n) { border-radius: 2em; }

article:nth-of-type(1n + 0) { background-color: rgb(210, 213, 250) }
article:nth-of-type(2n + 3) { background-color: rgb(255, 205, 248) }
article:nth-of-type(3n + 2) { background-color: rgb(255, 205, 212) }
article:nth-of-type(5n + 1) { background-color: lightcyan }

article:nth-of-type(1n + 0) { border-color: violet;  color: rgb(97, 32, 97) }
article:nth-of-type(2n + 0) { border-color: purple;  color: rgb(68, 0, 68) }
article:nth-of-type(3n + 1) { border-color: hotpink;  color: rgb(102, 16, 59) }
article:nth-of-type(5n + 4) { border-color: blueviolet;  color: rgb(55, 12, 95) }

article:nth-of-type(1n + 1) { border-style: solid }
article:nth-of-type(2n + 5) { border-style: dashed }
article:nth-of-type(5n + 0) { border-style: dotted }
article:nth-of-type(7n + 3) { border-style: double }

article:nth-of-type(1n + 0) { left: calc(10em + 3em); }
article:nth-of-type(2n + 4) { left: calc(10em + 3em); }
article:nth-of-type(3n + 1) { left: calc(07em + 3em); }
article:nth-of-type(5n + 3) { left: calc(15em + 3em); }
article:nth-of-type(5n + 2) { left: calc(12em + 3em); }
article:nth-of-type(7n + 3) { left: calc(00em + 3em); }
article:nth-of-type(3n + 5) { left: calc(05em + 3em); }
article:nth-of-type(5n + 6) { left: calc(20em + 3em); }

article:nth-of-type(5n + 1) { transform: rotate(1deg) } 
article:nth-of-type(5n + 2) { transform: rotate(0deg) }
article:nth-of-type(5n + 3) { transform: rotate(0deg) }
article:nth-of-type(5n + 4) { transform: rotate(1deg) }
article:nth-of-type(5n + 5) { transform: rotate(-1deg) }

article:nth-of-type(8n + 1) { top: +0.5em; }
article:nth-of-type(8n + 2) { top: +1.0em; }
article:nth-of-type(8n + 3) { top: +0.0em; }
article:nth-of-type(8n + 4) { top: -0.5em; }
article:nth-of-type(8n + 5) { top: +0.0em; }
article:nth-of-type(8n + 6) { top: +1.0em; }
article:nth-of-type(8n + 7) { top: -0.5em; }
article:nth-of-type(8n + 8) { top: -1.0em; }

.icon {
    display: block;
    position: absolute;
    left: -2em;
    top: 0.1em;
    font-size: 200%;
}