* {
  margin: 0;
  padding: 0;
  font-size: 100%;
  border: none;
  outline: none;
  font-weight: 300;
  box-sizing: border-box;
}

body {
  background-color: rgb(100, 78, 78);
}

p {
  font-family: Helvetica, sans-serif;
  padding-left: 0.1em;
  position: absolute;
}
.i1 {
  font-size: 120px;
  color: rgb(248, 248, 131);
}

.i2 {
  color: aquamarine;
  font-size: 80px;
}
.i3 {
  color: brown;
  font-size: 100px;
}

.i4 {
  color: darkorange;
  font-size: 50px;
}
.i5 {
  color: chartreuse;
  font-size: 130px;
  margin-top: 1em;
  margin-left: 0.2em;
}
.i6 {
  color: fuchsia;
  font-size: 100px;
  margin-top: 1.1em;
  margin-left: 0.1em;
}
.i7 {
  color: rgb(91, 230, 255);
  font-size: 80px;
  margin-top: 2.6em;
  margin-left: 0em;
}
.i8 {
  color: rgb(91, 230, 255);
  font-size: 150px;
  margin-top: 2.5em;
  margin-left: 0.5em;
}
.i9 {
  color: chocolate;
  font-size: 100px;
  margin-top: 3.8em;
  margin-left: 0.4em;
}
.i10 {
  color: deeppink;
  font-size: 130px;
  margin-top: 3.3em;
  margin-left: 0em;
}
.i11 {
  color: gold;
  font-size: 80px;
  margin-top: 5.3em;
  margin-left: 0.1em;
}
.i12 {
  color: green;
  font-size: 130px;
  margin-top: 0;
  margin-left: 1.4em;
}
.i13 {
  color: rgb(184, 184, 184);
  font-size: 80px;
  margin-top: 0;
  margin-left: 3em;
}
.i14 {
  color: lightcoral;
  font-size: 100px;
  margin-top: 0.5em;
  margin-left: 1.5em;
}
.i15 {
  color: olive;
  font-size: 200px;
  margin-top: 1.1em;
  margin-left: 0.9em;
}
.i16 {
  color: rgb(90, 9, 90);
  font-size: 150px;
  margin-top: 1.7em;
  margin-left: 0.6em;
}
.i17 {
  color: rgb(255, 241, 111);
  font-size: 80px;
  margin-top: 4.4em;
  margin-left: 3em;
}
.i18 {
  color: #ff0000;
  font-size: 80px;
  margin-top: 3.5em;
  margin-left: 0.7em;
}
.i19 {
  color: rgb(231, 209, 177);
  font-size: 180px;
  margin-top: 0.5em;
  margin-left: 1.4em;
}
.i20 {
  color: #00bfff;
  font-size: 100px;
  margin-top: 0.9em;
  margin-left: 3.5em;
}
.i21 {
  color: rgb(248, 172, 248);
  font-size: 80px;
  margin-top: 1.3em;
  margin-left: 1.6em;
}
.i22 {
  color: rgb(224, 146, 11);
  font-size: 100px;
  margin-top: 1.9em;
  margin-left: 2.6em;
}
.i23 {
  color: white;
  font-size: 80px;
  margin-top: 1.6em;
  margin-left: 2.8em;
}
.i24 {
  color: black;
  font-size: 100px;
  margin-top: 4.5em;
  margin-left: 3.2em;
}
.i25 {
  color: black;
  font-size: 40px;
  margin-top: 12.6em;
  margin-left: 9.5em;
}
/*====== mobile  ====*/
@media screen and (min-width: 480px) {
  body {
    background-color: rgb(85, 85, 85);
  }

  p {
    margin-top: 0;
    font-family: Helvetica, sans-serif;
    padding-left: 0.1em;
    position: absolute;
  }
  .i1 {
    font-size: 200px;
    color: rgb(248, 248, 131);
  }

  .i2 {
    color: aquamarine;
    font-size: 110px;
  }
  .i3 {
    color: brown;
    font-size: 150px;
  }

  .i4 {
    color: darkorange;
    font-size: 80px;
  }
  .i5 {
    color: chartreuse;
    font-size: 200px;
    margin-top: 1em;
    margin-left: 0.2em;
  }
  .i6 {
    color: fuchsia;
    font-size: 180px;
    margin-top: 1em;
    margin-left: 0.1em;
  }
  .i7 {
    color: rgb(91, 230, 255);
    font-size: 120px;
    margin-top: 2.6em;
    margin-left: 0em;
  }
  .i8 {
    color: rgb(91, 230, 255);
    font-size: 300px;
    margin-top: 1.6em;
    margin-left: 0.4em;
  }
  .i9 {
    color: chocolate;
    font-size: 200px;
    margin-top: 2.6em;
    margin-left: 0.4em;
  }
  .i10 {
    color: deeppink;
    font-size: 250px;
    margin-top: 2.3em;
    margin-left: 0em;
  }
  .i11 {
    color: gold;
    font-size: 150px;
    margin-top: 4.2em;
    margin-left: 0.1em;
  }
  .i12 {
    color: green;
    font-size: 220px;
    margin-top: 0;
    margin-left: 1.4em;
  }
  .i13 {
    color: rgb(184, 184, 184);
    font-size: 100px;
    margin-top: 0.2em;
    margin-left: 2.8em;
  }
  .i14 {
    color: lightcoral;
    font-size: 180px;
    margin-top: 0.5em;
    margin-left: 2em;
  }
  .i15 {
    color: olive;
    font-size: 320px;
    margin-top: 0.6em;
    margin-left: 1em;
  }
  .i16 {
    color: rgb(90, 9, 90);
    font-size: 200px;
    margin-top: 1.5em;
    margin-left: 1.4em;
  }
  .i17 {
    color: rgb(255, 241, 111);
    font-size: 180px;
    margin-top: 2.2em;
    margin-left: 2.5em;
  }
  .i18 {
    color: #ff0000;
    font-size: 180px;
    margin-top: 2em;
    margin-left: 1em;
  }
  .i19 {
    color: rgb(231, 209, 177);
    font-size: 240px;
    margin-top: 0.2em;
    margin-left: 2.8em;
  }
  .i20 {
    color: #00bfff;
    font-size: 180px;
    margin-top: 0;
    margin-left: 3.3em;
  }
  .i21 {
    color: rgb(248, 172, 248);
    font-size: 200px;
    margin-top: 1.3em;
    margin-left: 5.6em;
  }
  .i22 {
    color: rgb(224, 146, 11);
    font-size: 200px;
    margin-top: 0.8em;
    margin-left: 3.3em;
  }
  .i23 {
    color: white;
    font-size: 150px;
    margin-top: 1.8em;
    margin-left: 5em;
  }
  .i24 {
    color: black;
    font-size: 200px;
    margin-top: 2.8em;
    margin-left: 3.5em;
  }
  .i25 {
    color: black;
    font-size: 50px;
    margin-top: 14.7em;
    margin-left: 15.5em;
  }

  /* ==== tablet ====*/
}
@media screen and (min-width: 960px) {
  body {
    background-color: rgb(131, 130, 130);
  }

  p {
    margin-top: 0;
    font-family: Helvetica, sans-serif;
    padding-left: 0.1em;
    position: absolute;
  }
  .i1 {
    font-size: 300px;
    color: rgb(248, 248, 131);
  }

  .i2 {
    color: aquamarine;
    font-size: 200px;
  }
  .i3 {
    color: brown;
    font-size: 250px;
  }

  .i4 {
    color: darkorange;
    font-size: 150px;
  }
  .i5 {
    color: chartreuse;
    font-size: 300px;
    margin-top: 1em;
    margin-left: 0.2em;
  }
  .i6 {
    color: fuchsia;
    font-size: 250px;
    margin-top: 1em;
    margin-left: 0.1em;
  }
  .i7 {
    color: rgb(91, 230, 255);
    font-size: 150px;
    margin-top: 2.6em;
    margin-left: 0em;
  }
  .i8 {
    color: rgb(91, 230, 255);
    font-size: 300px;
    margin-top: 1.8em;
    margin-left: 0.5em;
  }
  .i9 {
    color: chocolate;
    font-size: 200px;
    margin-top: 2.8em;
    margin-left: 0.4em;
  }
  .i10 {
    color: deeppink;
    font-size: 250px;
    margin-top: 2.5em;
    margin-left: 0em;
  }
  .i11 {
    color: gold;
    font-size: 150px;
    margin-top: 4.2em;
    margin-left: 0.1em;
  }
  .i12 {
    color: green;
    font-size: 300px;
    margin-top: 0;
    margin-left: 1.4em;
  }
  .i13 {
    color: rgb(184, 184, 184);
    font-size: 200px;
    margin-top: 0;
    margin-left: 2.8em;
  }
  .i14 {
    color: lightcoral;
    font-size: 250px;
    margin-top: 0.5em;
    margin-left: 2em;
  }
  .i15 {
    color: olive;
    font-size: 400px;
    margin-top: 0.8em;
    margin-left: 1.4em;
  }
  .i16 {
    color: rgb(90, 9, 90);
    font-size: 300px;
    margin-top: 1em;
    margin-left: 1.4em;
  }
  .i17 {
    color: rgb(255, 241, 111);
    font-size: 250px;
    margin-top: 2em;
    margin-left: 2.8em;
  }
  .i18 {
    color: #ff0000;
    font-size: 200px;
    margin-top: 2.2em;
    margin-left: 2em;
  }
  .i19 {
    color: rgb(231, 209, 177);
    font-size: 400px;
    margin-top: 0;
    margin-left: 2.4em;
  }
  .i20 {
    color: #00bfff;
    font-size: 250px;
    margin-top: 0;
    margin-left: 3.5em;
  }
  .i21 {
    color: rgb(248, 172, 248);
    font-size: 200px;
    margin-top: 1.3em;
    margin-left: 5.6em;
  }
  .i22 {
    color: rgb(224, 146, 11);
    font-size: 200px;
    margin-top: 1.3em;
    margin-left: 5.6em;
  }
  .i23 {
    color: white;
    font-size: 150px;
    margin-top: 1.5em;
    margin-left: 6em;
  }
  .i24 {
    color: black;
    font-size: 300px;
    margin-top: 1.5em;
    margin-left: 3.8em;
  }
  .i25 {
    color: black;
    font-size: 50px;
    margin-top: 14em;
    margin-left: 26em;
  }
}