@charset "UTF-8";
p {
  color: black;
  background-color: lightcyan; }

span {
  color: blue;
  background-color: burlywood; }

.cajon {
  color: rebeccapurple;
  background-color: lightsalmon;
  border: 2px dotted sienna;
  margin: 20px 50% 5px 10%;
  padding: 2rem;
  height: 100px;
  width: 150px;
  overflow-y: visible;
  overflow-x: auto; }
  .cajon p {
    height: 200px;
    width: 250px; }
  .cajon::-webkit-scrollbar {
    width: .65em;
    height: .65em; }
  .cajon::-webkit-scrollbar-thumb {
    background: greenyellow;
    border-radius: 1em;
    border: 2px solid seagreen; }
  .cajon::-webkit-scrollbar-track {
    background: yellow;
    width: .5em; }

nav ul li a {
  text-decoration: none;
  color: black;
  font-family: Arial, Helvetica, sans-serif; }

nav ul li:first-child a {
  color: salmon; }

nav ul li:last-child a {
  color: orange; }
  nav ul li:last-child a::before {
    content: "before";
    width: 20px;
    height: 20px;
    color: red;
    position: relative; }
  nav ul li:last-child a::after {
    content: "after";
    width: 20px;
    height: 20px;
    color: purple;
    position: relative; }

nav ul li:nth-child(4) a {
  color: blueviolet; }

nav ul li:nth-last-child(2) a {
  color: greenyellow; }

a {
  color: darkcyan; }

/* Comentario CSS: sí que salgo compilado */
div {
  padding: 1rem 2rem; }

.abuelo {
  background-color: #A6206A; }
  .abuelo.abuela {
    border: 10px solid #299e7b; }
  .abuelo .padre {
    background-color: #EC1C4B; }
    .abuelo .padre .hijo {
      background-color: #299e7b; }
      .abuelo .padre .hijo .nieto {
        background-color: #1a6e8f; }
        .abuela .abuelo .padre .hijo .nieto {
          font-size: 36px; }
        .abuelo .padre .hijo .nieto .bisnieta + .bisnieto {
          color: red;
          background-color: lightsalmon; }

.abuela {
  background-color: #A6206A; }
  .abuela .madre {
    background-color: #EC1C4B; }
    .abuela .madre .hija {
      background-color: #299e7b; }
      .abuela .madre .hija .nieta {
        background-color: #1a6e8f; }
        .abuela .madre .hija .nieta + .nieta {
          border: 2px solid pink; }

.boton {
  color: #fff;
  background-color: #333;
  padding: 6px 12px;
  border-radius: 12px;
  margin: 2rem;
  font-size: 1.5rem; }
