.box1 {
  width: 50px;
  height: 50px;
  background-color: red;
  /* center */
  margin-left: auto;
  margin-right: auto;
}
.box2 {
  width: 20rem;
  height: 20rem;
  background-image: linear-gradient(to right bottom, #00aefd, #ffa400);
}
.gradient__text {
  font-weight: bold;
  font-size: 3rem;
  background-image: linear-gradient(to right bottom, #00aefd, #ffa400);
  display: inline-block;
  margin-top: 2rem;
  margin-left: 2rem;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.background {
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(to right bottom, #00adfda2, #ffa600a2),
    url("https://images.unsplash.com/photo-1613377739358-92aca92e9e13?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzNHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=60");
  background-size: cover;
}

@supports not (-webkit-background-clip: text) {
  .gradient__text {
    color: blue;
  }
}

ul {
  font-size: 4rem;
  font-weight: 400;
}

li:first-child {
  color: red;
}
li:last-child {
  color: orange;
}

li:nth-child(2) {
  color: purple;
}

li:nth-last-child(2) {
  color: green;
}

li:not(:first-child) {
  font-weight: 700;
}
li:nth-child(odd) {
  margin-left: 1rem;
}