body {
    padding: 10em 10em 10em 10em;
}

h1 {
    color: hotpink;
    border-bottom: 10px dotted purple;
}

h2 {
    font-style: italic;
}

ul {
    background-color: #eeeeee;
    border: 5px solid purple;
    padding: 1em 1em 1em 10em;
}

a:hover {
    color: rgb(7, 196, 92);
}

@media (min-width: 980px) {
    body {
        font-family: Arial, Helvetica, sans-serif;
    }

    h1 {
        color: #375e97;
        font-size: 2em;
        font-family: Georgia, 'Times New Roman', Times, serif;
        border-bottom: 1px solid #375e97;
    }

    h2 {
        font-size: 1.5em;
    }

    .job-title {
        color: #999999;
        font-weight: bold;
    }

    a:link,
    a:visited {
        color: #fb6542;
    }

    a:hover {
        text-decoration: none;
    }

    ul {
        background-color: #eeeeee;
        border: 0;
        padding: 1em 1em 1em 10em;
    }
}

article>p {
    color: #375e97;
}

article :first-child {
    font-weight: bold;
}

span.highlight {
    background-color: rgb(126, 237, 126);
}

h1.highlight {
    background-color: rgb(237, 185, 194);
}

.notebox {
    border: 4px solid #666;
    padding: .5em;
}

.notebox.warning {
    border-color: orange;
    font-weight: bold;
}

.notebox.danger {
    border-color: red;
    font-weight: bold;
}

#one {
    background-color: yellow;
}

h1#heading {
    color: rebeccapurple;
}

/*Attribute presence and value selectors */

.Attr li[class] {
    font-size: 200%;
}

.Attr li[class="a"] {
    background-color: yellow;
}

.Attr li[class~="a"] {
    color: red;
}


/*Attribute substring matching selectors*/

.AttrSub li[class^="a"] {
    font-size: 200%;
}

.AttrSub li[class$="a"] {
    background-color: yellow;
}

.AttrSub li[class*="a"] {
    color: red;
}

article p:first-child {
    font-size: 120%;
    font-weight: bold;
}

a:link,
a:visited {
    color: rebeccapurple;
    font-weight: bold;
}

a:hover {
    color: hotpink;
}

.siu p::first-line {
    font-size: 120%;
    font-weight: bold;
}


.arrow_box {
    position: relative;
    background: #88b7d5;
    border: 4px solid #c2e1f5;
}

.arrow_box:after,
.arrow_box:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #88b7d5;
    border-width: 30px;
    margin-left: -30px;
}

.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #c2e1f5;
    border-width: 36px;
    margin-left: -36px;
}

.arrow_box:active {
    position: relative;
    background: #88d588;
    border: 40px solid #f5c2e7;
}

.probar:checked {
    margin-left: 25px;
    border: 1px solid blue;
}

div,
select {
    margin: 8px;
}

/* Etiquetas para entradas marcadas */
input:checked+label {
    color: red;
}

/* Elemento Radio, cuando está marcado */
input[type="radio"]:checked {
    box-shadow: 0 0 0 3px orange;
}

/* Elemento Checkbox, cuando está marcado */
input[type="checkbox"]:checked {
    box-shadow: 0 0 0 3px hotpink;
}

/* Elementos Option, cuando se seleccionan */
option:checked {
    box-shadow: 0 0 0 3px lime;
    color: red;
}

h1~p {
    font-weight: bold;
    background-color: #333;
    color: #fff;
    padding: .5em;
}

/* En este ejemplo, se seleccionan todas las filas impares utilizando el selector 
tr:nth-child(2n). Luego se les aplica el color de fondo #333 y el color de primer plano #fff.
 */
tr:nth-child(2n) {
    background-color: #333;
    color: #fff;
}

nav~ul~li{
    display: flexbox;
}

.links-list a {
    background-color: rgb(179, 57, 81);
    color: #fff;
    text-decoration: none;
    padding: 1em 2em;
    display: inline-block
}

.links-list a:hover {
    background-color: rgb(66, 28, 40);
    color: #fff;
}

.links-list {
    list-style: none;
  }
  
  .links-list li {
    display: inline-block;
  }