/* PERCENTAGE_LENGTH_VALIDATOR_test */
.a {
  width: 100%;
  height: 50%;
}

/* ENGTH_VALIDATOR_test */
.b {
  width: 100px;
  height: 200px;
}

/* COLOR_VALIDATOR_test_1 */
.c {
  color: #808080;
}

/* COLOR_VALIDATOR_test_2 */
.d {
  color: #008000;
}

/* COLOR_VALIDATOR_test_3 */
.e {
  color: rgba(80, 60, 150, 1.0);
}

/* GRID_TEMPLATE_VALIDATOR_test */
.j {
  grid-template-columns: 50px 40px 80px;
}

/* NUMBER_VALIDATOR_test */
.l {
  grid-row-start: 3;
}

/* BORDER_VALIDATOR_test */
.m {
  border: 5px solid #808080;
}

/* TEXT_INDENT_VALIDATOR_test */
.n {
  text-indent: 50px;
}

/* URL_VALIDATOR_test */
.o {
  background-image: url(/common/img/a.jpg);
}

/* ANGLE_VALIDATOR_test */
.t {
  start-angle: 240deg;
}

/* SHORTHAND_LENGTH_VALIDATOR_test */
.v {
  padding: 10px 15px;
}

#w {
  font-size: 15px;
  font-family: PingFangSC-Regular;
}

/* ******************common style******************* */

/* gradient_test_1 */
.gradient1 {
  background: linear-gradient(#ff0000, #00ff00);
}

/* gradient_test_2 */
.gradient2 {
  background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
}

/* gradient_test_3 */
.gradient3 {
  background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 0, 255) 60%);
}

/* gradient_test_4 */
.gradient4 {
  background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
}

/* customize font */
@font-face {
  font-family: HWfont;
  src: url(/common/HWfont.ttf);
}

.txt {
  font-family: HWfont;
}