/* General styles */

hr {
  width: 80%;
  margin: 50px auto;
}

/* Simple size/length example */

#length-simple p {
  margin: 5px;
  padding: 10px;
  border: 2px solid black;
  background-color: cyan;
}

/* length units example */

#length-simple p:nth-child(1) {
  width: 150px;
  font-size: 18px;
}

#length-simple p:nth-child(2) {
  width: 250px;
  font-size: 24px;
}

#length-simple p:nth-child(3) {
  width: 350px;
  font-size: 30px;
}

/* unitless number example */

#unitless p {
  line-height: 1.5;
}

/* CSS animation example */

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

#animation p {
  color: red;
  width: 100px;
  font-size: 40px;
  transform-origin: center;
}

#animation p:hover {
  animation-name: rotate;
  animation-duration: 0.6s;
  animation-timing-function: linear;
  animation-iteration-count: 5;
}

/* Percentage example */

#percentage div {
  margin: 10px;
  font-size: 200%;
  color: white;
  height: 150px;
  border: 2px solid black;
}

#percentage div:nth-child(1) {
  background-color: red;
  width: 1300px;
}

#percentage div:nth-child(2) {
  background-color: blue;
  width: 75%;
}

/* Color example */

/* equivalent to the red keyword */
#color p:nth-child(1) {
  background-color: rgb(255,0,0);
}

/* equivalent to the blue keyword */
#color p:nth-child(2) {
  background-color: rgb(0,0,255);
}

/* has no exact keyword equivalent */
#color p:nth-child(3) {
  background-color: rgb(224,176,255);
}

/* length playground for live sample */

#length-playground .outer {
  width: 100%;
  height: 200px;
  background-color: red;
}

#length-playground .inner {
  width: 550px;
  height: 200px;
  background-color: blue;
}

/* color playground for live sample */

#color-playground .first {
  background-color: red;
  width: 400px;
  height: 200px;
  top: 0;
  left: 100px;
}

#color-playground .second {
  background-color: blue;
  width: 200px;
  height: 200px;
  top: -50px;
  left: 125px;
}

#color-playground .third {
  background-color: pink;
  width: 200px;
  height: 300px;
  top: -375px;
  left: 250px;
}

#color-playground div {
  position: relative;
}