body {
  background-image: linear-gradient(
    to bottom,
    #41c0c0,
    #45c59d,
    #76c46b,
    #aebc36,
    #eba912
  );
  background-repeat: no-repeat;
  min-height: 100vh;
  box-sizing: border-box;
  font-size: small;
  font-weight: 600;
}
.wrapper {
  padding: 50px 0px;
}

.content-box {
  padding: 10px;
}
.border-left {
  border-left-style: solid;
  border-color: lightgrey;
  height: calc(100% - 40px);
  width: 0px;
  position: absolute;
  top: 40px;
  left: calc(50% - 1.5px);
}
.avatar {
  width: 30px;
  height: 30px;
}
.color-me {
  color: grey;
}

@media (min-width: 768px) {
  .content-box {
    padding: 40px 40px;
    margin-top: 80px;
    margin-bottom: 80px;
  }
  .wrapper {
    padding-left: 30px;
    padding-right: 30px;
  }
  .avatar {
    width: 40px;
    height: 40px;
  }
  .border-left {
    top: 50px;
    height: calc(100%-50px);
  }
  body {
    font-size: large;
  }
}

@media (min-width: 1200px) {
  body {
    background-image: linear-gradient(
      to right top,
      #d16ba5,
      #c777b9,
      #ba83ca,
      #aa8fd8,
      #9a9ae1,
      #8aa7ec,
      #79b3f4,
      #69bff8,
      #52cffe,
      #41dfff,
      #46eefa,
      #5ffbf1
    );
    font-size: larger;
  }
  .wrapper {
    padding-left: 180px;
    padding-right: 180px;
  }
}