body {
    background-image: url('colorful_dots_on_black.jpg');
    background-repeat: repeat;
    margin: 0;
}

body>header {
    text-align: center;
    font-family: arial;
    font-size: 38px;
    font-weight: bold;
    color: yellow;
    background-color: blue;
    height: 60px;
}

nav {
    background-color: white;
    opacity: 0.9;
    border-radius: 15px;
    width: 180px;
    margin-top: 25px;
    margin-left: 10px;
    padding-left: 10px;
    padding-bottom: 1px;
    padding-top: 15px;
}

nav>header {
    text-decoration: underline;
    font-family: Arial;
    height: 5px;
}

ul {
    list-style-image: url('green_checkmark.png');
    padding-left: 25px;
}

a {
    text-decoration: none;
    color: black;
}

li {
    font-size: 12px;
    line-height: 25px;
}

li:nth-child(6) {
    opacity: 0.7;
}

a:visited {
    opacity: 0.7;
}

article {
    background-color: white;
    border-radius: 15px;
    opacity: 0.9;
    margin-top: 10px;
    margin-left: 230px;
    margin-right: 30px;
    padding-left: 10px;
    padding-bottom: 1px;
    padding-top: 15px;
}

#webColors {
    background-color: red;
    border-radius: 10px;
    margin-top: 0;
    margin-left: 5px;
    padding-left: 10px;
    padding-bottom: 1px;
    padding-top: 15px;
    color: white;
    font-size: 25px;
    margin-right: 15px;

}

#webSafeColors {
    background-color: orange;
    border-radius: 10px;
    margin-top: 0;
    margin-left: 5px;
    padding-left: 10px;
    padding-bottom: 1px;
    padding-top: 15px;
    color: black;
    font-size: 25px;
    margin-right: 15px;

}

#RGB {
    background-color: yellow;
    border-radius: 10px;
    margin-top: 0;
    margin-left: 5px;
    padding-left: 10px;
    padding-bottom: 1px;
    padding-top: 15px;
    color: black;
    font-size: 25px;
    margin-right: 15px;

}

#RGBA {
    background-color: green;
    border-radius: 10px;
    margin-top: 0;
    margin-left: 5px;
    padding-left: 10px;
    padding-bottom: 1px;
    padding-top: 15px;
    color: white;
    font-size: 25px;
    margin-right: 15px;

}

#HSLHSV {
    background-color: blue;
    border-radius: 10px;
    margin-top: 0;
    margin-left: 5px;
    padding-left: 10px;
    padding-bottom: 1px;
    padding-top: 15px;
    color: white;
    font-size: 25px;
    margin-right: 15px;

}

#lorem {
    background-color: purple;
    border-radius: 10px;
    margin-top: 0;
    margin-left: 0px;
    margin-right: 15px;
    padding-left: 10px;
    padding-bottom: 1px;
    padding-top: 15px;
    color: white;
    font-size: 25px;
}

div {
    margin-left: 5px;
    margin-top: 10px;
}

footer {
    margin-bottom: 10px;
    margin-left: 5px;
    margin-top: 3px;
}

footer>a {
    text-decoration: underline;
    color: grey;
    font-style: italic;
}

article:nth-child(6) {
    padding-left: 15px;
}

section {
    margin-bottom: 20px;
    margin-top: -214px;
}

li:nth-child(1):hover {
    margin-left: -27px;
    margin-right: 10px;
    padding-left: 7px;
    background: red;
    border-radius: 10px;
    list-style-position: inside;
}

li:nth-child(2):hover {
    margin-left: -27px;
    margin-right: 10px;
    padding-left: 7px;
    background: orange;
    border-radius: 10px;
    list-style-position: inside;
}

li:nth-child(3):hover {
    margin-left: -27px;
    margin-right: 10px;
    padding-left: 7px;
    background: yellow;
    border-radius: 10px;
    list-style-position: inside;
}

li:nth-child(4):hover {
    margin-left: -27px;
    margin-right: 10px;
    padding-left: 7px;
    background: green;
    border-radius: 10px;
    list-style-position: inside;
}

li:nth-child(5):hover {
    margin-left: -27px;
    margin-right: 10px;
    padding-left: 7px;
    background: blue;
    border-radius: 10px;
    list-style-position: inside;
}

li:nth-child(6):hover {
    margin-left: -27px;
    margin-right: 10px;
    padding-left: 7px;
    background: purple;
    border-radius: 10px;
    list-style-position: inside;
}

span:lang(la) {
    font-style: italic;
    color: blue;
}

span:lang(la):after, span:lang(la):before {
    content: "\"";
}

body > header:nth-child(1) {
    width: 100%;
    text-align: center;
    color: yellow;
    font-weight: bold;
    font-size: 2em;
    height: 40px;
    background: linear-gradient(
    to right,
    red,
    red 33.3%,
    green 33.3%,
    green 67.7%,
    blue 67.7%);
}

section article div::first-letter {
    font-size: 3em;
}

section article div::first-line {
    font-style: italic;
}