.icon-0 {
     background: url("../img/characters/characters.webp");
     display: inline-block;
     height: 25px;
     width: 26px;
     background-position: -0px -0px;
 }
 .icon-1 {
     background: url("../img/characters/characters.webp");
     display: inline-block;
     height: 25px;
     width: 26px;
     background-position: -26px -0px;
 }
 .icon-2 {
     background: url("../img/characters/characters.webp");
     display: inline-block;
     height: 25px;
     width: 26px;
     background-position: -52px -0px;
 }
 .icon-3 {
     background: url("../img/characters/characters.webp");
     display: inline-block;
     height: 25px;
     width: 26px;
     background-position: -78px -0px;
 }
 .icon-4 {
     background: url("../img/characters/characters.webp");
     display: inline-block;
     height: 25px;
     width: 26px;
     background-position: -104px -0px;
 }
 .icon-5 {
     background: url("../img/characters/characters.webp");
     display: inline-block;
     height: 25px;
     width: 26px;
     background-position: -0px -25px;
 }
 .icon-6 {
     background: url("../img/characters/characters.webp");
     display: inline-block;
     height: 25px;
     width: 26px;
     background-position: -26px -25px;
 }
 .icon-7 {
     background: url("../img/characters/characters.webp");
     display: inline-block;
     height: 25px;
     width: 26px;
     background-position: -52px -25px;
 }
 .icon-8 {
     background: url("../img/characters/characters.webp");
     display: inline-block;
     height: 25px;
     width: 26px;
     background-position: -78px -25px;
 }
 .icon-9 {
     background: url("../img/characters/characters.webp");
     display: inline-block;
     height: 25px;
     width: 26px;
     background-position: -104px -25px;
 }
 .icon-10 {
     background: url("../img/characters/characters.webp");
     display: inline-block;
     height: 25px;
     width: 26px;
     background-position: -0px -50px;
 }
 .icon-11 {
     background: url("../img/characters/characters.webp");
     display: inline-block;
     height: 25px;
     width: 26px;
     background-position: -26px -50px;
 }
 .icon-12 {
     background: url("../img/characters/characters.webp");
     display: inline-block;
     height: 25px;
     width: 26px;
     background-position: -52px -50px;
 }
 .icon-13 {
     background: url("../img/characters/characters.webp");
     display: inline-block;
     height: 25px;
     width: 26px;
     background-position: -78px -50px;
 }
 .icon-14 {
     background: url("../img/characters/characters.webp");
     display: inline-block;
     height: 25px;
     width: 26px;
     background-position: -104px -50px;
 }
 .icon-15 {
     background: url("../img/characters/characters.webp");
     display: inline-block;
     height: 25px;
     width: 26px;
     background-position: -0px -75px;
 }
 .icon-s0 {
     background: url("../img/characters/characters.webp");
     display: inline-block;
     height: 25px;
     width: 26px;
     background-position: -26px -75px;
 }
 .icon-s1 {
     background: url("../img/characters/characters.webp");
     display: inline-block;
     height: 25px;
     width: 26px;
     background-position: -52px -75px;
 }
 .icon-s2 {
     background: url("../img/characters/characters.webp");
     display: inline-block;
     height: 25px;
     width: 26px;
     background-position: -78px -75px;
 }
 .icon-s3 {
     background: url("../img/characters/characters.webp");
     display: inline-block;
     height: 25px;
     width: 26px;
     background-position: -104px -75px;
 }