h1 {
  color: rebeccapurple;
}

.one {
  color: blue;
}

.two {
  color: red;
}

.three {
  color: yellowgreen;
}

.four {
  color: turquoise;
}

.five {
  color: slateblue;
}

.title {
  text-align: center;
}

.caja {
  border: 2px red dashed;
  display: flex;
  height: 300px;
  margin: 0 40%;
  position: relative;
  width: 300px;
}

.box {
  height: 150px;
  position: absolute;
  width: 150px;
}

.b1 {
  background-color: blue;
  left: 0;
}

.b2 {
  background-color: red;
  bottom: 130px;
  left: 10px;
}

.b3 {
  background-color: yellowgreen;
  bottom: 110px;
  left: 20px;
}

.b4 {
  background-color: turquoise;
  bottom: 90px;
  left: 30px;
}

.b5 {
  background-color: blue;
  left: 0;
}

.b6 {
  background-color: red;
  bottom: 90px;
  left: 30px;
  z-index: 1;
}

.b7 {
  background-color: yellowgreen;
  bottom: 130px;
  left: 10px;
}

.b8 {
  background-color: turquoise;
  bottom: 110px;
  left: 20px;
  z-index: -2;
}

.c1 {
  background-color: blue;
  bottom: 150px;
}

.c2 {
  background-color: red;
  left: 730px;
  top: 300px;
}

.c3 {
  background-color: yellowgreen;
  right: 250px;
  top: 600px;
}

.c4 {
  background-color: turquoise;
  right: 730px;
  top: 200px;
}

section {
  height: 100vh;
}

hr {
  margin: 75px 0;
}

.section {
  border: 1px red solid;
  display: flex;
  height: 100vh;
  position: relative;
}

.sticky {
  background-color: red;
  height: 100px;
  margin: 0;
  position: sticky;
  top: 0%;
  width: 100px;
}

.square {
  background-color: cadetblue;
  height: 100px;
  margin: 0;
  width: 100px;
}

.fixed {
  background-color: slateblue;
  height: 100px;
  left: 1340px;
  margin: 0;
  position: fixed;
  top: 0%;
  width: 100px;
  z-index: 2;
}