/* lesson 3 */

* {
  box-sizing: border-box;
}

body {
  height: 4000px;
}

div {
  font-size: 25px;
  text-align: center;
  min-height: 300px;
  margin-bottom: 50px;
  padding: 30px;
  vertical-align: middle;
  color: #fff;
}

.fixed {
  background: rgb(228, 62, 95);
  border: 10px solid rgb(90, 4, 21);
  border-radius: 30%;
  position: fixed;
  top: 100px;
  /* left: calc(50% - 70px); */
  left: 50%;
  transform: translate(-50%);
  z-index: 1;
  display: none;
}
.absolute {
  background: rgb(20, 220, 37);
  border: 5px solid rgb(133, 6, 31);
  /* position: absolute;
  right: 50%;
  bottom: 100px; */
}
.relativ {
  background: rgb(173, 20, 220);
  border: 7px dotted rgb(41, 4, 63);
  position: relative;
  top: 20px;
  left: 30px;
}
.relativ-child {
  background: rgb(220, 110, 20);
  border: 5px solid rgb(114, 59, 7);
  position: absolute;
  top: 5px;
  right: 5px;
}