.character-container1 {
  position: absolute  ;
  display: flex;
  top: 55%; 
  left: 25%; 
  transform: translate(-50%, -50%);
}

.character1 {
  position: relative;
  height: 500px;
  width: 500px;
}

.character1-reflection {
  position: absolute;
  top: 70%; 
  left: 0;
  transform: scaleY(-1);
  height: 500px;
  width: 500px;
  opacity: 0.8;
  filter: blur(3px) saturate(80%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}
.box1 {
  position: absolute;
  top: -999999999%;
  right: -999999999%;
  height: 15px;
  width: 15px;
  background: #000;
}

/*BODY OF THE WARRIOR*/
/* HAT */
.box1:nth-child(1){ top: 15px; left: 255px; }
.box1:nth-child(2){ top: 15px; left: 270px; }
.box1:nth-child(3){ top: 15px; left: 285px; }

.box1:nth-child(4){ top: 30px; left: 255px; }
.box1:nth-child(5){ top: 30px; left: 270px; }
.box1:nth-child(6){ top: 30px; left: 285px; }
.box1:nth-child(7){ top: 30px; left: 240px; }
.box1:nth-child(8){ top: 30px; left: 225px; }
.box1:nth-child(9){ top: 30px; left: 300px; }
.box1:nth-child(10){ top: 30px; left: 315px; }

.box1:nth-child(11){ top: 45px; left: 210px; }
.box1:nth-child(12){ top: 45px; left: 195px; }
.box1:nth-child(13){ top: 45px; left: 225px; }
.box1:nth-child(14){ top: 45px; left: 240px; }
.box1:nth-child(15){ top: 45px; left: 255px; }
.box1:nth-child(16){ top: 45px; left: 270px; }
.box1:nth-child(17){ top: 45px; left: 285px; }
.box1:nth-child(18){ top: 45px; left: 300px; }
.box1:nth-child(19){ top: 45px; left: 315px; }
.box1:nth-child(20){ top: 45px; left: 330px; }
.box1:nth-child(21){ top: 45px; left: 345px; }

.box1:nth-child(22){ top: 60px; left: 180px; }
.box1:nth-child(23){ top: 60px; left: 165px; }
.box1:nth-child(24){ top: 60px; left: 195px; }
.box1:nth-child(25){ top: 60px; left: 210px; }
.box1:nth-child(26){ top: 60px; left: 225px; }
.box1:nth-child(27){ top: 60px; left: 240px; }
.box1:nth-child(28){ top: 60px; left: 255px; }
.box1:nth-child(29){ top: 60px; left: 270px; }
.box1:nth-child(30){ top: 60px; left: 285px; }
.box1:nth-child(31){ top: 60px; left: 300px; }
.box1:nth-child(32){ top: 60px; left: 315px; }
.box1:nth-child(33){ top: 60px; left: 330px; }
.box1:nth-child(34){ top: 60px; left: 345px; }
.box1:nth-child(35){ top: 60px; left: 360px; }
.box1:nth-child(36){ top: 60px; left: 375px; }

/* HEAD */
.box1:nth-child(37){ top: 75px; left: 300px; }
.box1:nth-child(38){ background: #fff; top: 75px; left: 285px; }
.box1:nth-child(39){ top: 75px; left: 270px; }
.box1:nth-child(40){ top: 75px; left: 255px; }
.box1:nth-child(41){ top: 75px; left: 240px; }

.box1:nth-child(42){ top: 90px; left: 300px; }
.box1:nth-child(43){ background: #fff; top: 90px; left: 285px; }
.box1:nth-child(44){ top: 90px; left: 270px; }
.box1:nth-child(45){ top: 90px; left: 255px; }
.box1:nth-child(46){ top: 90px; left: 240px; }

.box1:nth-child(47){ top: 105px; left: 300px; }
.box1:nth-child(48){ top: 105px; left: 285px; }
.box1:nth-child(49){ top: 105px; left: 270px; }
.box1:nth-child(50){ top: 105px; left: 255px; }
.box1:nth-child(51){ top: 105px; left: 240px; }

/* NECK (5 total) */
.box1:nth-child(52){ top: 120px; left: 285px; }
.box1:nth-child(53){ top: 120px; left: 270px; }
.box1:nth-child(54){ top: 120px; left: 255px; }
.box1:nth-child(55){ top: 135px; left: 270px; } 
.box1:nth-child(56){ top: 135px; left: 285px; }

/* CAPE, BODY & LEGS*/
.box1:nth-child(57){ background: #1b1b1b; top: 120px; left: 240px; }
.box1:nth-child(58){ background: #1b1b1b; top: 120px; left: 225px; }

.box1:nth-child(59){ background: #1b1b1b; top: 135px; left: 255px; }
.box1:nth-child(60){ background: #1b1b1b; top: 135px; left: 240px; }
.box1:nth-child(61){ background: #1b1b1b; top: 135px; left: 225px; }
.box1:nth-child(62){ background: #1b1b1b; top: 135px; left: 210px; }

.box1:nth-child(63){ background: #1b1b1b; top: 150px; left: 255px; }
.box1:nth-child(64){ background: #1b1b1b; top: 150px; left: 240px; }
.box1:nth-child(65){ background: #1b1b1b; top: 150px; left: 225px; }
.box1:nth-child(66){ background: #1b1b1b; top: 150px; left: 210px; }
.box1:nth-child(67){ background: #1b1b1b; top: 150px; left: 270px; }
.box1:nth-child(68){ background: #1b1b1b; top: 150px; left: 285px; }
.box1:nth-child(69){ background: #1b1b1b; top: 150px; left: 300px; }

.box1:nth-child(70){ background: #1b1b1b; top: 165px; left: 300px; }
.box1:nth-child(71){ background: #1b1b1b; top: 165px; left: 285px; }
.box1:nth-child(72){ background: #1b1b1b; top: 165px; left: 270px; }
.box1:nth-child(73){ background: #1b1b1b; top: 165px; left: 255px; }
.box1:nth-child(74){ background: #1b1b1b; top: 165px; left: 240px; }
.box1:nth-child(75){ background: #1b1b1b; top: 165px; left: 225px; }
.box1:nth-child(76){ background: #1b1b1b; top: 165px; left: 210px; }
.box1:nth-child(77){ background: #1b1b1b; top: 165px; left: 195px; }
.box1:nth-child(78){ background: #1b1b1b; top: 135px; left: 300px; }

.box1:nth-child(79){ background: #1b1b1b; top: 180px; left: 195px; }
.box1:nth-child(80){ background: #1b1b1b; top: 180px; left: 210px; }
.box1:nth-child(81){ background: #1b1b1b; top: 180px; left: 225px; }
.box1:nth-child(82){ background: #1b1b1b; top: 180px; left: 240px; }
.box1:nth-child(83){ background: #1b1b1b; top: 180px; left: 255px; }
.box1:nth-child(84){ background: #1b1b1b; top: 180px; left: 270px; }
.box1:nth-child(85){ top: 180px; left: 285px; }
.box1:nth-child(86){ top: 180px; left: 300px; }
.box1:nth-child(87){ background: #1b1b1b; top: 180px; left: 315px; }
.box1:nth-child(88){ background: #1b1b1b; top: 195px; left: 315px; }
.box1:nth-child(89){ top: 195px; left: 285px; }
.box1:nth-child(90){ top: 195px; left: 300px; }
.box1:nth-child(91){ background: #1b1b1b; top: 195px; left: 270px; }
.box1:nth-child(92){ background: #1b1b1b; top: 195px; left: 255px; }
.box1:nth-child(91){ background: #1b1b1b; top: 195px; left: 240px; }
.box1:nth-child(93){ background: #1b1b1b; top: 195px; left: 225px; }
.box1:nth-child(94){ background: #1b1b1b; top: 195px; left: 210px; }
.box1:nth-child(95){ background: #1b1b1b; top: 195px; left: 195px; }
.box1:nth-child(96){ background: #1b1b1b; top: 195px; left: 270px; }
.box1:nth-child(97){ background: #1b1b1b; top: 195px; left: 255px; }

.box1:nth-child(98){ background: #1b1b1b; top: 210px; left: 315px; }
.box1:nth-child(99){ top: 210px; left: 300px; }
.box1:nth-child(100){ top: 210px; left: 285px; }
.box1:nth-child(101){ top: 210px; left: 270px; }
.box1:nth-child(102){ background: #1b1b1b; top: 210px; left: 255px; }
.box1:nth-child(103){ background: #1b1b1b; top: 210px; left: 240px; }
.box1:nth-child(104){ background: #1b1b1b; top: 210px; left: 225px; }
.box1:nth-child(105){ background: #1b1b1b; top: 210px; left: 210px; }
.box1:nth-child(106){ background: #1b1b1b; top: 210px; left: 195px; }
.box1:nth-child(107){ background: #1b1b1b; top: 210px; left: 180px; }

.box1:nth-child(108){ background: #1b1b1b; top: 225px; left: 180px; }
.box1:nth-child(109){ background: #1b1b1b; top: 225px; left: 195px; }
.box1:nth-child(110){ background: #1b1b1b; top: 225px; left: 210px; }
.box1:nth-child(111){ background: #1b1b1b; top: 225px; left: 225px; }
.box1:nth-child(112){ background: #1b1b1b; top: 225px; left: 240px; }
.box1:nth-child(113){ background: #1b1b1b; top: 225px; left: 255px; }
.box1:nth-child(114){ top: 225px; left: 270px; }
.box1:nth-child(115){ top: 225px; left: 285px; }
.box1:nth-child(116){ top: 225px; left: 300px; }
.box1:nth-child(117){ top: 225px; left: 315px; }
.box1:nth-child(118){ background: #1b1b1b; top: 225px; left: 330px; }

.box1:nth-child(119){ background: #1b1b1b; top: 240px; left: 330px; }
.box1:nth-child(120){ top: 240px; left: 315px; }
.box1:nth-child(121){ top: 240px; left: 300px; }
.box1:nth-child(122){ top: 240px; left: 285px; }
.box1:nth-child(123){ top: 240px; left: 270px; }
.box1:nth-child(124){ top: 240px; left: 315px; }
.box1:nth-child(125){ background: #1b1b1b; top: 240px; left: 255px; }
.box1:nth-child(126){ background: #1b1b1b; top: 240px; left: 240px; }
.box1:nth-child(127){ background: #1b1b1b; top: 240px; left: 225px; }
.box1:nth-child(128){ background: #1b1b1b; top: 240px; left: 210px; }
.box1:nth-child(130){ background: #1b1b1b; top: 240px; left: 195px; }
.box1:nth-child(131){ background: #1b1b1b; top: 240px; left: 180px; }

.box1:nth-child(132){ background: #1b1b1b; top: 255px; left: 180px; }
.box1:nth-child(133){ background: #1b1b1b; top: 255px; left: 195px; }
.box1:nth-child(134){ background: #1b1b1b; top: 255px; left: 210px; }
.box1:nth-child(135){ background: #1b1b1b; top: 255px; left: 225px; }
.box1:nth-child(136){ background: #1b1b1b; top: 255px; left: 240px; }
.box1:nth-child(137){ top: 255px; left: 255px; }
.box1:nth-child(138){ top: 255px; left: 270px; }
.box1:nth-child(139){ top: 255px; left: 285px; }
.box1:nth-child(140){ top: 255px; left: 300px; }
.box1:nth-child(141){ top: 255px; left: 315px; }
.box1:nth-child(142){ background: #1b1b1b; top: 255px; left: 330px; }

.box1:nth-child(143){ background: #1b1b1b; top: 270px; left: 330px; }
.box1:nth-child(144){ top: 270px; left: 315px; }
.box1:nth-child(145){ top: 270px; left: 300px; }
.box1:nth-child(146){ top: 270px; left: 285px; }
.box1:nth-child(147){ top: 270px; left: 270px; }
.box1:nth-child(148){ top: 270px; left: 255px; }
.box1:nth-child(149){ background: #1b1b1b; top: 270px; left: 240px; }
.box1:nth-child(150){ background: #1b1b1b; top: 270px; left: 225px; }
.box1:nth-child(151){ background: #1b1b1b; top: 270px; left: 210px; }
.box1:nth-child(152){ background: #1b1b1b; top: 270px; left: 195px; }
.box1:nth-child(153){ background: #1b1b1b; top: 270px; left: 180px; }
.box1:nth-child(154){ background: #1b1b1b; top: 270px; left: 165px; }

.box1:nth-child(155){ background: #1b1b1b; top: 285px; left: 165px; }
.box1:nth-child(156){ background: #1b1b1b; top: 285px; left: 180px; }
.box1:nth-child(157){ background: #1b1b1b; top: 285px; left: 195px; }
.box1:nth-child(158){ background: #1b1b1b; top: 285px; left: 210px; }
.box1:nth-child(159){ background: #1b1b1b; top: 285px; left: 225px; }
.box1:nth-child(160){ background: #1b1b1b; top: 285px; left: 240px; }
.box1:nth-child(161){ top: 285px; left: 255px; }
.box1:nth-child(162){ top: 285px; left: 270px; }
.box1:nth-child(163){ top: 285px; left: 285px; }
.box1:nth-child(164){ top: 285px; left: 300px; }
.box1:nth-child(165){ top: 285px; left: 315px; }
.box1:nth-child(166){ top: 285px; left: 330px; }
.box1:nth-child(167){ background: #1b1b1b; top: 285px; left: 345px; }

.box1:nth-child(168){ background: #1b1b1b; top: 300px; left: 345px; }
.box1:nth-child(169){ top: 300px; left: 330px; }
.box1:nth-child(170){ top: 300px; left: 315px; }
.box1:nth-child(171){ top: 300px; left: 300px; }
.box1:nth-child(172){ top: 300px; left: 285px; }
.box1:nth-child(173){ top: 300px; left: 270px; }
.box1:nth-child(174){ top: 300px; left: 255px; }
.box1:nth-child(175){ background: #1b1b1b; top: 300px; left: 240px; }
.box1:nth-child(176){ background: #1b1b1b; top: 300px; left: 225px; }
.box1:nth-child(177){ background: #1b1b1b; top: 300px; left: 210px; }
.box1:nth-child(178){ background: #1b1b1b; top: 300px; left: 195px; }
.box1:nth-child(179){ background: #1b1b1b; top: 300px; left: 180px; }
.box1:nth-child(180){ background: #1b1b1b; top: 300px; left: 165px; }

.box1:nth-child(181){ background: #1b1b1b; top: 315px; left: 165px; }
.box1:nth-child(182){ background: #1b1b1b; top: 315px; left: 180px; }
.box1:nth-child(183){ background: #1b1b1b; top: 315px; left: 195px; }
.box1:nth-child(184){ background: #1b1b1b; top: 315px; left: 210px; }
.box1:nth-child(185){ background: #1b1b1b; top: 315px; left: 225px; }
.box1:nth-child(186){ top: 315px; left: 240px; }
.box1:nth-child(187){ top: 315px; left: 255px; }
.box1:nth-child(188){ top: 315px; left: 270px; }
.box1:nth-child(189){ top: 315px; left: 285px; }
.box1:nth-child(190){ top: 315px; left: 300px; }
.box1:nth-child(191){ top: 315px; left: 315px; }
.box1:nth-child(192){ top: 315px; left: 330px; }
.box1:nth-child(193){ background: #1b1b1b; top: 315px; left: 345px; }

.box1:nth-child(194){ background: #1b1b1b; top: 330px; left: 345px; }
.box1:nth-child(195){ top: 330px; left: 330px; }
.box1:nth-child(196){ top: 330px; left: 315px; }
.box1:nth-child(197){ top: 330px; left: 300px; }
.box1:nth-child(198){ top: 330px; left: 285px; }
.box1:nth-child(199){ top: 330px; left: 270px; }
.box1:nth-child(200){ top: 330px; left: 255px; }
.box1:nth-child(201){ top: 330px; left: 240px; }
.box1:nth-child(202){ background: #1b1b1b; top: 330px; left: 195px; }
.box1:nth-child(203){ background: #1b1b1b; top: 330px; left: 210px; }
.box1:nth-child(204){ background: #1b1b1b; top: 330px; left: 225px; }
.box1:nth-child(205){ background: #1b1b1b; top: 330px; left: 180px; }
.box1:nth-child(206){ background: #1b1b1b; top: 330px; left: 165px; }

.box1:nth-child(207){ background: #1b1b1b; top: 345px; left: 165px; }
.box1:nth-child(208){ background: #1b1b1b; top: 345px; left: 180px; }
.box1:nth-child(209){ background: #1b1b1b; top: 345px; left: 195px; }
.box1:nth-child(210){ background: #1b1b1b; top: 345px; left: 210px; }
.box1:nth-child(211){ background: #1b1b1b; top: 345px; left: 225px; }
.box1:nth-child(212){ top: 345px; left: 240px; }
.box1:nth-child(213){ top: 345px; left: 255px; }
.box1:nth-child(214){ top: 345px; left: 270px; }
.box1:nth-child(215){ top: 345px; left: 285px; }
.box1:nth-child(216){ top: 345px; left: 300px; }
.box1:nth-child(217){ top: 345px; left: 315px; }
.box1:nth-child(218){ top: 345px; left: 330px; }
.box1:nth-child(219){ background: #1b1b1b; top: 345px; left: 345px; }

/*LEGS*/
.box1:nth-child(220){ top: 360px; left: 315px; }
.box1:nth-child(221){ top: 360px; left: 300px; }
.box1:nth-child(222){ top: 360px; left: 285px; }
.box1:nth-child(223){ top: 360px; left: 225px; }
.box1:nth-child(224){ background: #1b1b1b; top: 360px; left: 210px; }
.box1:nth-child(225){ background: #1b1b1b; top: 360px; left: 195px; }
.box1:nth-child(226){ background: #1b1b1b; top: 360px; left: 180px; }

.box1:nth-child(227){ top: 375px; left: 210px; }
.box1:nth-child(228){ top: 375px; left: 195px; }
.box1:nth-child(229){ top: 375px; left: 300px; }
.box1:nth-child(230){ top: 375px; left: 305px; }

.box1:nth-child(231){ top: 390px; left: 305px; }
.box1:nth-child(232){ top: 390px; left: 195px; }

.box1:nth-child(233){ top: 405px; left: 195px; }
.box1:nth-child(234){ top: 405px; left: 305px; }

/**SWORD**/
.box1:nth-child(235){ background: #220303; top: 210px; left: 345px; }
.box1:nth-child(236){ background: #220303; top: 210px; left: 360px; }
.box1:nth-child(237){ background: #220303; top: 210px; left: 375px; }
.box1:nth-child(238){ background: #220303; top: 225px; left: 375px; }
.box1:nth-child(239){ background: #220303; top: 225px; left: 345px; }
.box1:nth-child(240){ background: #220303; top: 225px; left: 360px; }
/**/
.box1:nth-child(241){ background: #220303; top: 240px; left: 345px; }
.box1:nth-child(242){ background: #220303; top: 240px; left: 345px; }
.box1:nth-child(243){ background: #220303; top: 240px; left: 345px; }
/***/
.box1:nth-child(244){ background: #FFF; top: 277px; left: 150px; }
.box1:nth-child(245){ background: #FFF; top: 277px; left: 135px; }
.box1:nth-child(246){ background: #FFF; top: 277px; left: 120px; }

.box1:nth-child(247){ background: #FFF; top: 292px; left: 150px; }
.box1:nth-child(248){ background: #FFF; top: 292px; left: 135px; }
.box1:nth-child(249){ background: #FFF; top: 292px; left: 120px; } 

.box1:nth-child(250){ background: #FFF; top: 292px; left: 120px; }
.box1:nth-child(251){ background: #FFF; top: 292px; left: 105px; }
.box1:nth-child(252){ background: #FFF; top: 292px; left: 90px; }
.box1:nth-child(253){ 
  background: #FFF; 
  top: 296px; 
  left: 82px; 
  rotate: 45deg;
}
.box1:nth-child(254){ 
  background: #FFF; 
  top: 304.5px; 
  left: 74px; 
  width: 15px;
  rotate: 39deg;
}

.box1:nth-child(255){ background: #FFF; top: 307px; left: 120px; }
.box1:nth-child(256){ background: #FFF; top: 307px; left: 105px; }
.box1:nth-child(257){ background: #FFF; top: 307px; left: 90px; }
.box1:nth-child(258){ background: #FFF; top: 307px; left: 77px; }