Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	3D Chess (Animated)
ID	6092351811928064
Created	3 years ago, 1664885387873
Updated	3 years ago, 1664885540789
Code	<!DOCTYPE html> <!-- 3D Chess using HTML/CSS only Gray Wolf, October 2022 @Notes I originally created this on codepen using Pug(HTML)/SCSS(CSS) then compiled to raw HTML/CSS to use in KA's web environment. I had to use JavaScript to load in the CSS as there are limits to how much CSS you can type directly into a KA HTML program before you start to get stack issues. --> <html> <head> <meta charset="utf-8"> <title>3D Chess (Animated)</title> </head> <body> <div class="heading"> <h1>Scholar's Mate</h1> <p>Scholar's Mate is usually one of the first checkmates that players learn or experience. The concept is simple: White targets the f7-square with both their queen and bishop early, in hopes of delivering checkmate in four moves.</p> </div> <div class="scene"> <div class="cube" id="ground"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="chess"> <div class="white _face"> <div class="pawn" id="pawn-white-1"> <div class="container"> <div class="cube" id="pawn-white-1-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-1-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-1-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-1-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-1-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-1-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-1-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-1-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-1-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="pawn" id="pawn-white-2"> <div class="container"> <div class="cube" id="pawn-white-2-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-2-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-2-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-2-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-2-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-2-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-2-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-2-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-2-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="pawn" id="pawn-white-3"> <div class="container"> <div class="cube" id="pawn-white-3-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-3-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-3-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-3-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-3-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-3-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-3-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-3-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-3-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="pawn" id="pawn-white-4"> <div class="container"> <div class="cube" id="pawn-white-4-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-4-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-4-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-4-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-4-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-4-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-4-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-4-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-4-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="pawn" id="pawn-white-5"> <div class="container"> <div class="cube" id="pawn-white-5-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-5-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-5-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-5-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-5-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-5-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-5-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-5-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-5-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="pawn" id="pawn-white-6"> <div class="container"> <div class="cube" id="pawn-white-6-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-6-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-6-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-6-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-6-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-6-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-6-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-6-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-6-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="pawn" id="pawn-white-7"> <div class="container"> <div class="cube" id="pawn-white-7-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-7-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-7-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-7-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-7-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-7-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-7-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-7-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-7-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="pawn" id="pawn-white-8"> <div class="container"> <div class="cube" id="pawn-white-8-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-8-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-8-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-8-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-8-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-8-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-8-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-8-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-white-8-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="rook" id="rook-white-1"> <div class="container"> <div class="cube" id="rook-white-1-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-white-1-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-white-1-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-white-1-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-white-1-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-white-1-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-white-1-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-white-1-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-white-1-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-white-1-10"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-white-1-11"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-white-1-12"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-white-1-13"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="rook" id="rook-white-2"> <div class="container"> <div class="cube" id="rook-white-2-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-white-2-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-white-2-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-white-2-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-white-2-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-white-2-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-white-2-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-white-2-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-white-2-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-white-2-10"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-white-2-11"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-white-2-12"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-white-2-13"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="bishop" id="bishop-white-1"> <div class="container"> <div class="cube" id="bishop-white-1-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-white-1-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-white-1-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-white-1-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-white-1-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-white-1-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-white-1-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-white-1-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="bishop" id="bishop-white-2"> <div class="container"> <div class="cube" id="bishop-white-2-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-white-2-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-white-2-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-white-2-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-white-2-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-white-2-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-white-2-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-white-2-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="knight" id="knight-white-1"> <div class="container"> <div class="cube" id="knight-white-1-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-1-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-1-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-1-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-1-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-1-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-1-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-1-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-1-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-1-10"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-1-11"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-1-12"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-1-13"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-1-14"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-1-15"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-1-16"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-1-17"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-1-18"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-1-19"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-1-20"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="knight" id="knight-white-2"> <div class="container"> <div class="cube" id="knight-white-2-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-2-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-2-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-2-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-2-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-2-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-2-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-2-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-2-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-2-10"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-2-11"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-2-12"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-2-13"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-2-14"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-2-15"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-2-16"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-2-17"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-2-18"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-2-19"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-white-2-20"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="queen" id="queen-white"> <div class="container"> <div class="cube" id="queen-white-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="queen-white-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="queen-white-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="queen-white-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="queen-white-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="queen-white-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="queen-white-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="queen-white-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="queen-white-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="queen-white-10"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="queen-white-11"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="queen-white-12"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="queen-white-13"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="king" id="king-white"> <div class="container"> <div class="cube" id="king-white-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="king-white-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="king-white-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="king-white-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="king-white-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="king-white-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="king-white-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="king-white-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="king-white-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> </div> <div class="black _face"> <div class="pawn" id="pawn-black-1"> <div class="container"> <div class="cube" id="pawn-black-1-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-1-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-1-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-1-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-1-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-1-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-1-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-1-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-1-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="pawn" id="pawn-black-2"> <div class="container"> <div class="cube" id="pawn-black-2-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-2-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-2-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-2-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-2-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-2-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-2-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-2-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-2-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="pawn" id="pawn-black-3"> <div class="container"> <div class="cube" id="pawn-black-3-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-3-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-3-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-3-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-3-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-3-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-3-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-3-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-3-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="pawn" id="pawn-black-4"> <div class="container"> <div class="cube" id="pawn-black-4-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-4-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-4-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-4-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-4-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-4-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-4-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-4-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-4-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="pawn" id="pawn-black-5"> <div class="container"> <div class="cube" id="pawn-black-5-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-5-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-5-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-5-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-5-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-5-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-5-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-5-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-5-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="pawn" id="pawn-black-6"> <div class="container"> <div class="cube" id="pawn-black-6-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-6-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-6-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-6-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-6-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-6-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-6-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-6-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-6-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="pawn" id="pawn-black-7"> <div class="container"> <div class="cube" id="pawn-black-7-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-7-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-7-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-7-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-7-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-7-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-7-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-7-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-7-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="pawn" id="pawn-black-8"> <div class="container"> <div class="cube" id="pawn-black-8-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-8-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-8-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-8-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-8-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-8-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-8-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-8-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="pawn-black-8-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="rook" id="rook-black-1"> <div class="container"> <div class="cube" id="rook-black-1-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-black-1-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-black-1-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-black-1-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-black-1-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-black-1-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-black-1-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-black-1-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-black-1-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-black-1-10"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-black-1-11"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-black-1-12"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-black-1-13"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="rook" id="rook-black-2"> <div class="container"> <div class="cube" id="rook-black-2-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-black-2-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-black-2-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-black-2-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-black-2-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-black-2-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-black-2-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-black-2-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-black-2-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-black-2-10"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-black-2-11"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-black-2-12"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="rook-black-2-13"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="bishop" id="bishop-black-1"> <div class="container"> <div class="cube" id="bishop-black-1-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-black-1-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-black-1-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-black-1-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-black-1-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-black-1-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-black-1-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-black-1-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="bishop" id="bishop-black-2"> <div class="container"> <div class="cube" id="bishop-black-2-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-black-2-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-black-2-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-black-2-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-black-2-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-black-2-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-black-2-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bishop-black-2-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="knight" id="knight-black-1"> <div class="container"> <div class="cube" id="knight-black-1-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-1-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-1-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-1-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-1-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-1-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-1-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-1-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-1-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-1-10"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-1-11"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-1-12"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-1-13"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-1-14"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-1-15"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-1-16"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-1-17"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-1-18"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-1-19"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-1-20"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="knight" id="knight-black-2"> <div class="container"> <div class="cube" id="knight-black-2-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-2-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-2-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-2-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-2-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-2-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-2-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-2-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-2-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-2-10"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-2-11"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-2-12"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-2-13"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-2-14"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-2-15"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-2-16"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-2-17"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-2-18"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-2-19"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="knight-black-2-20"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="queen" id="queen-black"> <div class="container"> <div class="cube" id="queen-black-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="queen-black-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="queen-black-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="queen-black-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="queen-black-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="queen-black-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="queen-black-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="queen-black-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="queen-black-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="queen-black-10"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="queen-black-11"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="queen-black-12"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="queen-black-13"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> <div class="king" id="king-black"> <div class="container"> <div class="cube" id="king-black-1"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="king-black-2"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="king-black-3"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="king-black-4"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="king-black-5"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="king-black-6"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="king-black-7"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="king-black-8"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="king-black-9"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> </div> </div> </div> </div> <script type="module"> const style = document.createElement('style'); style.textContent = ` @import url("https://fonts.googleapis.com/css2?family=Righteous&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } body { display: grid; place-items: center; min-height: 100vh; background: #5D7A8E; overflow: hidden; perspective: 1000px; } body .heading { position: absolute; top: 0; left: 0; right: 0; display: grid; place-items: center; text-align: center; padding: 2vmin; font-family: "Righteous", cursive; color: #404040cc; font-size: clamp(0.9em, 1.5vmin, 1.1em); } body .heading h1 { font-size: clamp(2em, 5vmin, 3em); } body .scene, body .scene * { transform-style: preserve-3d; } body .scene { position: relative; width: 70vmin; height: 10vmin; transform: rotateX(0deg) rotateY(70deg) scale3d(1, 1, 1); animation: rot 40s ease-in-out 0s infinite alternate; } @keyframes rot { 0% { transform: rotateX(0deg) rotateY(70deg) scale3d(1, 1, 1); } 50% { transform: rotateX(-50deg) rotateY(440deg) scale3d(1, 1, 1); } 100% { transform: rotateX(-20deg) rotateY(880deg) scale3d(2, 2, 2); } } body .scene .cube, body .scene .cube , body .scene .chess, body .scene .chess { position: absolute; bottom: 0; } body .scene #ground { z-index: -50; width: 70vmin; height: 3vmin; transform: translateY(3vmin); } body .scene #ground .container { position: relative; width: 100%; height: 100%; } body .scene #ground .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene #ground .container .left { width: 70vmin; height: 3vmin; background-color: #523F2144; transform-origin: left top; transform: rotateY(-90deg) translateX(-35vmin); } body .scene #ground .container .right { width: 70vmin; height: 3vmin; background-color: #523F2144; transform-origin: left top; transform: rotateY(90deg) translateX(-35vmin) translateZ(70vmin); } body .scene #ground .container .top { background-color: rgba(100, 77, 40, 0.2666666667); width: 70vmin; height: 70vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(35vmin) translateZ(3vmin); } body .scene #ground .container .bottom { background-color: rgba(100, 77, 40, 0.2666666667); width: 70vmin; height: 70vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(35vmin); } body .scene #ground .container .front { background-color: rgba(46, 35, 18, 0.2666666667); width: 70vmin; height: 3vmin; transform-origin: bottom left; transform: translateZ(35vmin); } body .scene #ground .container .back { background-color: rgba(46, 35, 18, 0.2666666667); width: 70vmin; height: 3vmin; transform-origin: center; transform: rotateY(180deg) translateZ(35vmin) rotateX(180deg) rotateZ(180deg); } body .scene #ground .container .left, body .scene #ground .container .right, body .scene #ground .container .front, body .scene #ground .container .back { background-image: linear-gradient(180deg, #0000 0% 20%, rgba(218, 171, 105, 0.2666666667) 20% 45%, #0000 45% 100%); } body .scene #ground .container .bottom { background-color: #333; filter: drop-shadow(0 0 3.75rem black); } body .scene #ground .container .top { box-shadow: inset 0 0 15vmin #000a; } body .scene #ground .container .top::after { content: ""; position: absolute; width: 64vmin; height: 64vmin; transform: translateY(-0.1vmin); box-shadow: 0 0 0 0.2vmin #E4C29244, 0 0 0 0.4vmin #523F2144, 0 0 0 0.6vmin #E4C29244; background: repeating-conic-gradient(#523F2144 0% 25%, #E4C29244 0% 50%) 50%/16vmin 16vmin; background-size: 16vmin 16vmin; } body .scene .chess { position: absolute; width: 70vmin; height: 70vmin; bottom: 0; transform-origin: 35vmin 35vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess ._face { position: absolute; width: 100%; height: 100%; bottom: 0; } body .scene .chess .white { width: 70vmin; height: 70vmin; transform: translateX(3.5vmin); } body .scene .chess .white #rook-white-1 { width: 7vmin; height: 12vmin; transform: translate3d(0vmin, 0vmin, 28vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(1) { width: 3vmin; height: 9vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-1 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-1 .container div:nth-child(1) .container .left { width: 3vmin; height: 9vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(1) .container .right { width: 3vmin; height: 9vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(1) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(9vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(1) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(1) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 9vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(1) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 9vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-1 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-1 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-1 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(2) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(2) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(2) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(2) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-1 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-1 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-1 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(3) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(3) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(3) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(3) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-1 .container div:nth-child(4) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -7vmin, 0vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-1 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-1 .container div:nth-child(4) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(4) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(4) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(4) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(4) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(4) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-1 .container div:nth-child(5) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -9vmin, 0vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-1 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-1 .container div:nth-child(5) .container .left { width: 5vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(5) .container .right { width: 5vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(5) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(5) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(5) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(5) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-1 .container div:nth-child(6) { width: 1vmin; height: 2vmin; transform: translate3d(0vmin, -10vmin, -1.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-1 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-1 .container div:nth-child(6) .container .left { width: 2vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(6) .container .right { width: 2vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(1vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(6) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(6) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(6) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(6) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 1vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-1 .container div:nth-child(7) { width: 1vmin; height: 2vmin; transform: translate3d(0vmin, -10vmin, 1.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(7) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-1 .container div:nth-child(7) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-1 .container div:nth-child(7) .container .left { width: 2vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(7) .container .right { width: 2vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(1vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(7) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(7) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(7) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(7) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 1vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-1 .container div:nth-child(8) { width: 1vmin; height: 2vmin; transform: translate3d(4vmin, -10vmin, -1.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(8) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-1 .container div:nth-child(8) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-1 .container div:nth-child(8) .container .left { width: 2vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(8) .container .right { width: 2vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(1vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(8) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(8) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(8) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(8) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 1vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-1 .container div:nth-child(9) { width: 1vmin; height: 2vmin; transform: translate3d(4vmin, -10vmin, 1.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(9) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-1 .container div:nth-child(9) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-1 .container div:nth-child(9) .container .left { width: 2vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(9) .container .right { width: 2vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(1vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(9) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(9) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(9) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(9) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 1vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-1 .container div:nth-child(10) { width: 2vmin; height: 2vmin; transform: translate3d(0vmin, -10vmin, -2vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(10) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-1 .container div:nth-child(10) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-1 .container div:nth-child(10) .container .left { width: 1vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(10) .container .right { width: 1vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(10) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(10) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(10) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(10) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-1 .container div:nth-child(11) { width: 2vmin; height: 2vmin; transform: translate3d(0vmin, -10vmin, 2vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(11) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-1 .container div:nth-child(11) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-1 .container div:nth-child(11) .container .left { width: 1vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(11) .container .right { width: 1vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(11) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(11) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(11) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(11) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-1 .container div:nth-child(12) { width: 2vmin; height: 2vmin; transform: translate3d(3vmin, -10vmin, -2vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(12) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-1 .container div:nth-child(12) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-1 .container div:nth-child(12) .container .left { width: 1vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(12) .container .right { width: 1vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(12) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(12) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(12) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(12) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-1 .container div:nth-child(13) { width: 2vmin; height: 2vmin; transform: translate3d(3vmin, -10vmin, 2vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(13) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-1 .container div:nth-child(13) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-1 .container div:nth-child(13) .container .left { width: 1vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(13) .container .right { width: 1vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(13) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(13) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(13) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #rook-white-1 .container div:nth-child(13) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-2 { width: 7vmin; height: 12vmin; transform: translate3d(56vmin, 0vmin, 28vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(1) { width: 3vmin; height: 9vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-2 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-2 .container div:nth-child(1) .container .left { width: 3vmin; height: 9vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(1) .container .right { width: 3vmin; height: 9vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(1) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(9vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(1) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(1) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 9vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(1) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 9vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-2 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-2 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-2 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(2) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(2) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(2) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(2) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-2 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-2 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-2 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(3) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(3) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(3) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(3) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-2 .container div:nth-child(4) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -7vmin, 0vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-2 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-2 .container div:nth-child(4) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(4) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(4) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(4) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(4) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(4) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-2 .container div:nth-child(5) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -9vmin, 0vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-2 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-2 .container div:nth-child(5) .container .left { width: 5vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(5) .container .right { width: 5vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(5) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(5) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(5) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(5) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-2 .container div:nth-child(6) { width: 1vmin; height: 2vmin; transform: translate3d(0vmin, -10vmin, -1.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-2 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-2 .container div:nth-child(6) .container .left { width: 2vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(6) .container .right { width: 2vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(1vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(6) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(6) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(6) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(6) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 1vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-2 .container div:nth-child(7) { width: 1vmin; height: 2vmin; transform: translate3d(0vmin, -10vmin, 1.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(7) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-2 .container div:nth-child(7) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-2 .container div:nth-child(7) .container .left { width: 2vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(7) .container .right { width: 2vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(1vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(7) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(7) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(7) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(7) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 1vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-2 .container div:nth-child(8) { width: 1vmin; height: 2vmin; transform: translate3d(4vmin, -10vmin, -1.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(8) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-2 .container div:nth-child(8) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-2 .container div:nth-child(8) .container .left { width: 2vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(8) .container .right { width: 2vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(1vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(8) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(8) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(8) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(8) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 1vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-2 .container div:nth-child(9) { width: 1vmin; height: 2vmin; transform: translate3d(4vmin, -10vmin, 1.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(9) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-2 .container div:nth-child(9) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-2 .container div:nth-child(9) .container .left { width: 2vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(9) .container .right { width: 2vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(1vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(9) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(9) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(9) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(9) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 1vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-2 .container div:nth-child(10) { width: 2vmin; height: 2vmin; transform: translate3d(0vmin, -10vmin, -2vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(10) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-2 .container div:nth-child(10) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-2 .container div:nth-child(10) .container .left { width: 1vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(10) .container .right { width: 1vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(10) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(10) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(10) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(10) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-2 .container div:nth-child(11) { width: 2vmin; height: 2vmin; transform: translate3d(0vmin, -10vmin, 2vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(11) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-2 .container div:nth-child(11) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-2 .container div:nth-child(11) .container .left { width: 1vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(11) .container .right { width: 1vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(11) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(11) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(11) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(11) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-2 .container div:nth-child(12) { width: 2vmin; height: 2vmin; transform: translate3d(3vmin, -10vmin, -2vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(12) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-2 .container div:nth-child(12) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-2 .container div:nth-child(12) .container .left { width: 1vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(12) .container .right { width: 1vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(12) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(12) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(12) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(12) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #rook-white-2 .container div:nth-child(13) { width: 2vmin; height: 2vmin; transform: translate3d(3vmin, -10vmin, 2vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(13) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #rook-white-2 .container div:nth-child(13) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #rook-white-2 .container div:nth-child(13) .container .left { width: 1vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(13) .container .right { width: 1vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(13) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(2vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(13) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(13) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #rook-white-2 .container div:nth-child(13) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #queen-white { width: 7vmin; height: 19vmin; transform: translate3d(24vmin, 0vmin, 28vmin); animation: move-queen-white 25s ease-in-out 2s infinite; } body .scene .chess .white #queen-white .container div:nth-child(1) { width: 3vmin; height: 18vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .white #queen-white .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #queen-white .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #queen-white .container div:nth-child(1) .container .left { width: 3vmin; height: 18vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(1) .container .right { width: 3vmin; height: 18vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .white #queen-white .container div:nth-child(1) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(18vmin); } body .scene .chess .white #queen-white .container div:nth-child(1) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(1) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 18vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(1) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 18vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #queen-white .container div:nth-child(2) { width: 5vmin; height: 5vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .white #queen-white .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #queen-white .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #queen-white .container div:nth-child(2) .container .left { width: 5vmin; height: 5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(2) .container .right { width: 5vmin; height: 5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #queen-white .container div:nth-child(2) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(5vmin); } body .scene .chess .white #queen-white .container div:nth-child(2) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(2) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(2) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #queen-white .container div:nth-child(3) { width: 6vmin; height: 2vmin; transform: translate3d(-0.5vmin, 0vmin, 0vmin); } body .scene .chess .white #queen-white .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #queen-white .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #queen-white .container div:nth-child(3) .container .left { width: 6vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-3vmin); } body .scene .chess .white #queen-white .container div:nth-child(3) .container .right { width: 6vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-3vmin) translateZ(6vmin); } body .scene .chess .white #queen-white .container div:nth-child(3) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 6vmin; height: 6vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(3vmin) translateZ(2vmin); } body .scene .chess .white #queen-white .container div:nth-child(3) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 6vmin; height: 6vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(3vmin); } body .scene .chess .white #queen-white .container div:nth-child(3) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 6vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(3vmin); } body .scene .chess .white #queen-white .container div:nth-child(3) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 6vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(3vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #queen-white .container div:nth-child(4) { width: 6vmin; height: 1vmin; transform: translate3d(-0.5vmin, -2.5vmin, 0vmin); } body .scene .chess .white #queen-white .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #queen-white .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #queen-white .container div:nth-child(4) .container .left { width: 6vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-3vmin); } body .scene .chess .white #queen-white .container div:nth-child(4) .container .right { width: 6vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-3vmin) translateZ(6vmin); } body .scene .chess .white #queen-white .container div:nth-child(4) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 6vmin; height: 6vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(3vmin) translateZ(1vmin); } body .scene .chess .white #queen-white .container div:nth-child(4) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 6vmin; height: 6vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(3vmin); } body .scene .chess .white #queen-white .container div:nth-child(4) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 6vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(3vmin); } body .scene .chess .white #queen-white .container div:nth-child(4) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 6vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(3vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #queen-white .container div:nth-child(5) { width: 4vmin; height: 2vmin; transform: translate3d(0.5vmin, -13vmin, 0vmin); } body .scene .chess .white #queen-white .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #queen-white .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #queen-white .container div:nth-child(5) .container .left { width: 4vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2vmin); } body .scene .chess .white #queen-white .container div:nth-child(5) .container .right { width: 4vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2vmin) translateZ(4vmin); } body .scene .chess .white #queen-white .container div:nth-child(5) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 4vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2vmin) translateZ(2vmin); } body .scene .chess .white #queen-white .container div:nth-child(5) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 4vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2vmin); } body .scene .chess .white #queen-white .container div:nth-child(5) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 4vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2vmin); } body .scene .chess .white #queen-white .container div:nth-child(5) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 4vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #queen-white .container div:nth-child(6) { width: 4vmin; height: 1vmin; transform: translate3d(0.5vmin, -16vmin, 0vmin); } body .scene .chess .white #queen-white .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #queen-white .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #queen-white .container div:nth-child(6) .container .left { width: 4vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2vmin); } body .scene .chess .white #queen-white .container div:nth-child(6) .container .right { width: 4vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2vmin) translateZ(4vmin); } body .scene .chess .white #queen-white .container div:nth-child(6) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 4vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2vmin) translateZ(1vmin); } body .scene .chess .white #queen-white .container div:nth-child(6) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 4vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2vmin); } body .scene .chess .white #queen-white .container div:nth-child(6) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 4vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2vmin); } body .scene .chess .white #queen-white .container div:nth-child(6) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 4vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #queen-white .container div:nth-child(7) { width: 1vmin; height: 1vmin; transform: translate3d(2vmin, -18vmin, 0vmin); } body .scene .chess .white #queen-white .container div:nth-child(7) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #queen-white .container div:nth-child(7) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #queen-white .container div:nth-child(7) .container .left { width: 1vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(7) .container .right { width: 1vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .white #queen-white .container div:nth-child(7) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(1vmin); } body .scene .chess .white #queen-white .container div:nth-child(7) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(7) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(7) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #queen-white .container div:nth-child(8) { width: 1vmin; height: 1vmin; transform: translate3d(2vmin, -16.5vmin, 0vmin); } body .scene .chess .white #queen-white .container div:nth-child(8) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #queen-white .container div:nth-child(8) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #queen-white .container div:nth-child(8) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(8) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(1vmin); } body .scene .chess .white #queen-white .container div:nth-child(8) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #queen-white .container div:nth-child(8) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(8) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(8) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #queen-white .container div:nth-child(9) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -16.5vmin, 0vmin); } body .scene .chess .white #queen-white .container div:nth-child(9) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #queen-white .container div:nth-child(9) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #queen-white .container div:nth-child(9) .container .left { width: 1vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(9) .container .right { width: 1vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(5vmin); } body .scene .chess .white #queen-white .container div:nth-child(9) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(1vmin); } body .scene .chess .white #queen-white .container div:nth-child(9) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(9) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(9) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #queen-white .container div:nth-child(10) { width: 1vmin; height: 1vmin; transform: translate3d(0vmin, -16.5vmin, 1.75vmin); } body .scene .chess .white #queen-white .container div:nth-child(10) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #queen-white .container div:nth-child(10) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #queen-white .container div:nth-child(10) .container .left { width: 1vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(10) .container .right { width: 1vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .white #queen-white .container div:nth-child(10) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(1vmin); } body .scene .chess .white #queen-white .container div:nth-child(10) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(10) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(10) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #queen-white .container div:nth-child(11) { width: 1vmin; height: 1vmin; transform: translate3d(0vmin, -16.5vmin, -1.75vmin); } body .scene .chess .white #queen-white .container div:nth-child(11) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #queen-white .container div:nth-child(11) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #queen-white .container div:nth-child(11) .container .left { width: 1vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(11) .container .right { width: 1vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .white #queen-white .container div:nth-child(11) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(1vmin); } body .scene .chess .white #queen-white .container div:nth-child(11) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(11) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(11) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #queen-white .container div:nth-child(12) { width: 1vmin; height: 1vmin; transform: translate3d(4vmin, -16.5vmin, 1.75vmin); } body .scene .chess .white #queen-white .container div:nth-child(12) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #queen-white .container div:nth-child(12) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #queen-white .container div:nth-child(12) .container .left { width: 1vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(12) .container .right { width: 1vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .white #queen-white .container div:nth-child(12) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(1vmin); } body .scene .chess .white #queen-white .container div:nth-child(12) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(12) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(12) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #queen-white .container div:nth-child(13) { width: 1vmin; height: 1vmin; transform: translate3d(4vmin, -16.5vmin, -1.75vmin); } body .scene .chess .white #queen-white .container div:nth-child(13) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #queen-white .container div:nth-child(13) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #queen-white .container div:nth-child(13) .container .left { width: 1vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(13) .container .right { width: 1vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .white #queen-white .container div:nth-child(13) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(1vmin); } body .scene .chess .white #queen-white .container div:nth-child(13) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(13) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #queen-white .container div:nth-child(13) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } @keyframes move-queen-white { 0%, 48% { transform: translate3d(24vmin, 0vmin, 28vmin); } 52% { transform: translate3d(24vmin, -20vmin, 28vmin); } 56% { transform: translate3d(56vmin, -20vmin, -4vmin); } 60%, 72% { transform: translate3d(56vmin, 0vmin, -4vmin); } 76% { transform: translate3d(56vmin, -10vmin, -4vmin); } 80% { transform: translate3d(40vmin, -10vmin, -20vmin); } 84%, 100% { transform: translate3d(40vmin, 0vmin, -20vmin); } } body .scene .chess .white #king-white { width: 7vmin; height: 23vmin; transform: translate3d(32vmin, 0vmin, 28vmin); } body .scene .chess .white #king-white .container div:nth-child(1) { width: 3vmin; height: 20vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .white #king-white .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #king-white .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #king-white .container div:nth-child(1) .container .left { width: 3vmin; height: 20vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .white #king-white .container div:nth-child(1) .container .right { width: 3vmin; height: 20vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .white #king-white .container div:nth-child(1) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(20vmin); } body .scene .chess .white #king-white .container div:nth-child(1) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .white #king-white .container div:nth-child(1) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 20vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .white #king-white .container div:nth-child(1) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 20vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #king-white .container div:nth-child(2) { width: 5vmin; height: 5vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .white #king-white .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #king-white .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #king-white .container div:nth-child(2) .container .left { width: 5vmin; height: 5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #king-white .container div:nth-child(2) .container .right { width: 5vmin; height: 5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #king-white .container div:nth-child(2) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(5vmin); } body .scene .chess .white #king-white .container div:nth-child(2) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #king-white .container div:nth-child(2) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #king-white .container div:nth-child(2) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #king-white .container div:nth-child(3) { width: 6vmin; height: 2vmin; transform: translate3d(-0.5vmin, 0vmin, 0vmin); } body .scene .chess .white #king-white .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #king-white .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #king-white .container div:nth-child(3) .container .left { width: 6vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-3vmin); } body .scene .chess .white #king-white .container div:nth-child(3) .container .right { width: 6vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-3vmin) translateZ(6vmin); } body .scene .chess .white #king-white .container div:nth-child(3) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 6vmin; height: 6vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(3vmin) translateZ(2vmin); } body .scene .chess .white #king-white .container div:nth-child(3) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 6vmin; height: 6vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(3vmin); } body .scene .chess .white #king-white .container div:nth-child(3) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 6vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(3vmin); } body .scene .chess .white #king-white .container div:nth-child(3) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 6vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(3vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #king-white .container div:nth-child(4) { width: 6vmin; height: 1vmin; transform: translate3d(-0.5vmin, -2.5vmin, 0vmin); } body .scene .chess .white #king-white .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #king-white .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #king-white .container div:nth-child(4) .container .left { width: 6vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-3vmin); } body .scene .chess .white #king-white .container div:nth-child(4) .container .right { width: 6vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-3vmin) translateZ(6vmin); } body .scene .chess .white #king-white .container div:nth-child(4) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 6vmin; height: 6vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(3vmin) translateZ(1vmin); } body .scene .chess .white #king-white .container div:nth-child(4) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 6vmin; height: 6vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(3vmin); } body .scene .chess .white #king-white .container div:nth-child(4) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 6vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(3vmin); } body .scene .chess .white #king-white .container div:nth-child(4) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 6vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(3vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #king-white .container div:nth-child(5) { width: 4vmin; height: 2vmin; transform: translate3d(0.5vmin, -13vmin, 0vmin); } body .scene .chess .white #king-white .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #king-white .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #king-white .container div:nth-child(5) .container .left { width: 4vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2vmin); } body .scene .chess .white #king-white .container div:nth-child(5) .container .right { width: 4vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2vmin) translateZ(4vmin); } body .scene .chess .white #king-white .container div:nth-child(5) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 4vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2vmin) translateZ(2vmin); } body .scene .chess .white #king-white .container div:nth-child(5) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 4vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2vmin); } body .scene .chess .white #king-white .container div:nth-child(5) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 4vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2vmin); } body .scene .chess .white #king-white .container div:nth-child(5) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 4vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #king-white .container div:nth-child(6) { width: 4vmin; height: 1vmin; transform: translate3d(0.5vmin, -15.5vmin, 0vmin); } body .scene .chess .white #king-white .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #king-white .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #king-white .container div:nth-child(6) .container .left { width: 4vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2vmin); } body .scene .chess .white #king-white .container div:nth-child(6) .container .right { width: 4vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2vmin) translateZ(4vmin); } body .scene .chess .white #king-white .container div:nth-child(6) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 4vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2vmin) translateZ(1vmin); } body .scene .chess .white #king-white .container div:nth-child(6) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 4vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2vmin); } body .scene .chess .white #king-white .container div:nth-child(6) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 4vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2vmin); } body .scene .chess .white #king-white .container div:nth-child(6) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 4vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #king-white .container div:nth-child(7) { width: 4vmin; height: 2vmin; transform: translate3d(0.5vmin, -17vmin, 0vmin); } body .scene .chess .white #king-white .container div:nth-child(7) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #king-white .container div:nth-child(7) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #king-white .container div:nth-child(7) .container .left { width: 4vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2vmin); } body .scene .chess .white #king-white .container div:nth-child(7) .container .right { width: 4vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2vmin) translateZ(4vmin); } body .scene .chess .white #king-white .container div:nth-child(7) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 4vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2vmin) translateZ(2vmin); } body .scene .chess .white #king-white .container div:nth-child(7) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 4vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2vmin); } body .scene .chess .white #king-white .container div:nth-child(7) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 4vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2vmin); } body .scene .chess .white #king-white .container div:nth-child(7) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 4vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #king-white .container div:nth-child(8) { width: 1vmin; height: 4vmin; transform: translate3d(2vmin, -19vmin, 0vmin); } body .scene .chess .white #king-white .container div:nth-child(8) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #king-white .container div:nth-child(8) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #king-white .container div:nth-child(8) .container .left { width: 1vmin; height: 4vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #king-white .container div:nth-child(8) .container .right { width: 1vmin; height: 4vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .white #king-white .container div:nth-child(8) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(4vmin); } body .scene .chess .white #king-white .container div:nth-child(8) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #king-white .container div:nth-child(8) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 4vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #king-white .container div:nth-child(8) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 4vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #king-white .container div:nth-child(9) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -21vmin, 0vmin); } body .scene .chess .white #king-white .container div:nth-child(9) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #king-white .container div:nth-child(9) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #king-white .container div:nth-child(9) .container .left { width: 1vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #king-white .container div:nth-child(9) .container .right { width: 1vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(3vmin); } body .scene .chess .white #king-white .container div:nth-child(9) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(1vmin); } body .scene .chess .white #king-white .container div:nth-child(9) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #king-white .container div:nth-child(9) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #king-white .container div:nth-child(9) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-1 { width: 7vmin; height: 14.5vmin; transform: translate3d(8vmin, 0vmin, 28vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(1) { width: 3vmin; height: 4.5vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-1 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-1 .container div:nth-child(1) .container .left { width: 3vmin; height: 4.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(1) .container .right { width: 3vmin; height: 4.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(1) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(4.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(1) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(1) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 4.5vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(1) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 4.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-1 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-1 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-1 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(2) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(2) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(2) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(2) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-1 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-1 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-1 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(3) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(3) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(3) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(3) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-1 .container div:nth-child(4) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -4.5vmin, -0.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-1 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-1 .container div:nth-child(4) .container .left { width: 4vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(4) .container .right { width: 4vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2vmin) translateZ(3vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(4) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(4) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(4) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(4) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-1 .container div:nth-child(5) { width: 3vmin; height: 2vmin; transform: translate3d(1vmin, -5.5vmin, -1vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-1 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-1 .container div:nth-child(5) .container .left { width: 5vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(5) .container .right { width: 5vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(3vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(5) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(5) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(5) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(5) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-1 .container div:nth-child(6) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -7.5vmin, -0.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-1 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-1 .container div:nth-child(6) .container .left { width: 4vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(6) .container .right { width: 4vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2vmin) translateZ(3vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(6) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(6) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(6) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(6) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-1 .container div:nth-child(7) { width: 3vmin; height: 4vmin; transform: translate3d(1vmin, -8.5vmin, 0vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(7) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-1 .container div:nth-child(7) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-1 .container div:nth-child(7) .container .left { width: 3vmin; height: 4vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(7) .container .right { width: 3vmin; height: 4vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(7) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(4vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(7) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(7) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(7) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 4vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-1 .container div:nth-child(8) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -9.5vmin, -1vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(8) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-1 .container div:nth-child(8) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-1 .container div:nth-child(8) .container .left { width: 5vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(8) .container .right { width: 5vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(3vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(8) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(8) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(8) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(8) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-1 .container div:nth-child(9) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -11.5vmin, -0.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(9) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-1 .container div:nth-child(9) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-1 .container div:nth-child(9) .container .left { width: 4vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(9) .container .right { width: 4vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2vmin) translateZ(3vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(9) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(9) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(9) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(9) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-1 .container div:nth-child(10) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -10.5vmin, -2.75vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(10) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-1 .container div:nth-child(10) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-1 .container div:nth-child(10) .container .left { width: 1.5vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-0.75vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(10) .container .right { width: 1.5vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-0.75vmin) translateZ(3vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(10) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 1.5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.75vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(10) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 1.5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.75vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(10) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.75vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(10) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.75vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-1 .container div:nth-child(11) { width: 1vmin; height: 1vmin; transform: translate3d(2vmin, -12.5vmin, 0vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(11) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-1 .container div:nth-child(11) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-1 .container div:nth-child(11) .container .left { width: 5vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(11) .container .right { width: 5vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(11) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 1vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(11) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 1vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(11) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(11) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-1 .container div:nth-child(12) { width: 1vmin; height: 8vmin; transform: translate3d(2vmin, -5.5vmin, 2vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(12) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-1 .container div:nth-child(12) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-1 .container div:nth-child(12) .container .left { width: 1vmin; height: 8vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(12) .container .right { width: 1vmin; height: 8vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(12) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(8vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(12) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(12) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 1vmin; height: 8vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(12) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 1vmin; height: 8vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-1 .container div:nth-child(13) { width: 1vmin; height: 1vmin; transform: translate3d(2vmin, -13.5vmin, -1.75vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(13) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-1 .container div:nth-child(13) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-1 .container div:nth-child(13) .container .left { width: 0.75vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.375vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(13) .container .right { width: 0.75vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.375vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(13) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.375vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(13) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.375vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(13) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.375vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(13) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.375vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-1 .container div:nth-child(14) { width: 1vmin; height: 1vmin; transform: translate3d(2vmin, -13.5vmin, 0vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(14) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-1 .container div:nth-child(14) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-1 .container div:nth-child(14) .container .left { width: 0.75vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.375vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(14) .container .right { width: 0.75vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.375vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(14) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.375vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(14) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.375vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(14) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.375vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(14) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.375vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-1 .container div:nth-child(15) { width: 1vmin; height: 1vmin; transform: translate3d(2vmin, -13.5vmin, 1.75vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(15) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-1 .container div:nth-child(15) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-1 .container div:nth-child(15) .container .left { width: 0.75vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.375vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(15) .container .right { width: 0.75vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.375vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(15) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.375vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(15) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.375vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(15) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.375vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(15) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.375vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-1 .container div:nth-child(16) { width: 1vmin; height: 0.75vmin; transform: translate3d(2vmin, -12vmin, 3vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(16) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-1 .container div:nth-child(16) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-1 .container div:nth-child(16) .container .left { width: 1vmin; height: 0.75vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(16) .container .right { width: 1vmin; height: 0.75vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(16) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(0.75vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(16) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(16) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(16) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-1 .container div:nth-child(17) { width: 1vmin; height: 0.75vmin; transform: translate3d(2vmin, -10.5vmin, 3vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(17) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-1 .container div:nth-child(17) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-1 .container div:nth-child(17) .container .left { width: 1vmin; height: 0.75vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(17) .container .right { width: 1vmin; height: 0.75vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(17) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(0.75vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(17) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(17) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(17) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-1 .container div:nth-child(18) { width: 1vmin; height: 0.75vmin; transform: translate3d(2vmin, -9vmin, 3vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(18) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-1 .container div:nth-child(18) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-1 .container div:nth-child(18) .container .left { width: 1vmin; height: 0.75vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(18) .container .right { width: 1vmin; height: 0.75vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(18) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(0.75vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(18) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(18) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(18) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-1 .container div:nth-child(19) { width: 1vmin; height: 0.75vmin; transform: translate3d(2vmin, -7.5vmin, 3vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(19) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-1 .container div:nth-child(19) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-1 .container div:nth-child(19) .container .left { width: 1vmin; height: 0.75vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(19) .container .right { width: 1vmin; height: 0.75vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(19) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(0.75vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(19) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(19) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(19) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-1 .container div:nth-child(20) { width: 1vmin; height: 0.75vmin; transform: translate3d(2vmin, -6vmin, 3vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(20) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-1 .container div:nth-child(20) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-1 .container div:nth-child(20) .container .left { width: 1vmin; height: 0.75vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(20) .container .right { width: 1vmin; height: 0.75vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(20) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(0.75vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(20) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(20) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #knight-white-1 .container div:nth-child(20) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-2 { width: 7vmin; height: 14.5vmin; transform: translate3d(48vmin, 0vmin, 28vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(1) { width: 3vmin; height: 4.5vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-2 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-2 .container div:nth-child(1) .container .left { width: 3vmin; height: 4.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(1) .container .right { width: 3vmin; height: 4.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(1) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(4.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(1) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(1) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 4.5vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(1) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 4.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-2 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-2 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-2 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(2) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(2) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(2) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(2) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-2 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-2 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-2 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(3) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(3) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(3) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(3) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-2 .container div:nth-child(4) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -4.5vmin, -0.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-2 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-2 .container div:nth-child(4) .container .left { width: 4vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(4) .container .right { width: 4vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2vmin) translateZ(3vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(4) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(4) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(4) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(4) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-2 .container div:nth-child(5) { width: 3vmin; height: 2vmin; transform: translate3d(1vmin, -5.5vmin, -1vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-2 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-2 .container div:nth-child(5) .container .left { width: 5vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(5) .container .right { width: 5vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(3vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(5) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(5) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(5) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(5) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-2 .container div:nth-child(6) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -7.5vmin, -0.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-2 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-2 .container div:nth-child(6) .container .left { width: 4vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(6) .container .right { width: 4vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2vmin) translateZ(3vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(6) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(6) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(6) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(6) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-2 .container div:nth-child(7) { width: 3vmin; height: 4vmin; transform: translate3d(1vmin, -8.5vmin, 0vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(7) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-2 .container div:nth-child(7) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-2 .container div:nth-child(7) .container .left { width: 3vmin; height: 4vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(7) .container .right { width: 3vmin; height: 4vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(7) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(4vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(7) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(7) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(7) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 4vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-2 .container div:nth-child(8) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -9.5vmin, -1vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(8) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-2 .container div:nth-child(8) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-2 .container div:nth-child(8) .container .left { width: 5vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(8) .container .right { width: 5vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(3vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(8) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(8) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(8) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(8) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-2 .container div:nth-child(9) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -11.5vmin, -0.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(9) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-2 .container div:nth-child(9) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-2 .container div:nth-child(9) .container .left { width: 4vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(9) .container .right { width: 4vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2vmin) translateZ(3vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(9) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(9) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(9) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(9) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-2 .container div:nth-child(10) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -10.5vmin, -2.75vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(10) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-2 .container div:nth-child(10) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-2 .container div:nth-child(10) .container .left { width: 1.5vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-0.75vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(10) .container .right { width: 1.5vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-0.75vmin) translateZ(3vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(10) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 1.5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.75vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(10) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 1.5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.75vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(10) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.75vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(10) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.75vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-2 .container div:nth-child(11) { width: 1vmin; height: 1vmin; transform: translate3d(2vmin, -12.5vmin, 0vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(11) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-2 .container div:nth-child(11) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-2 .container div:nth-child(11) .container .left { width: 5vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(11) .container .right { width: 5vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(11) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 1vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(11) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 1vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(11) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(11) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-2 .container div:nth-child(12) { width: 1vmin; height: 8vmin; transform: translate3d(2vmin, -5.5vmin, 2vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(12) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-2 .container div:nth-child(12) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-2 .container div:nth-child(12) .container .left { width: 1vmin; height: 8vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(12) .container .right { width: 1vmin; height: 8vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(12) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(8vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(12) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(12) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 1vmin; height: 8vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(12) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 1vmin; height: 8vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-2 .container div:nth-child(13) { width: 1vmin; height: 1vmin; transform: translate3d(2vmin, -13.5vmin, -1.75vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(13) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-2 .container div:nth-child(13) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-2 .container div:nth-child(13) .container .left { width: 0.75vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.375vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(13) .container .right { width: 0.75vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.375vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(13) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.375vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(13) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.375vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(13) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.375vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(13) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.375vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-2 .container div:nth-child(14) { width: 1vmin; height: 1vmin; transform: translate3d(2vmin, -13.5vmin, 0vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(14) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-2 .container div:nth-child(14) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-2 .container div:nth-child(14) .container .left { width: 0.75vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.375vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(14) .container .right { width: 0.75vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.375vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(14) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.375vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(14) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.375vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(14) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.375vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(14) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.375vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-2 .container div:nth-child(15) { width: 1vmin; height: 1vmin; transform: translate3d(2vmin, -13.5vmin, 1.75vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(15) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-2 .container div:nth-child(15) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-2 .container div:nth-child(15) .container .left { width: 0.75vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.375vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(15) .container .right { width: 0.75vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.375vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(15) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.375vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(15) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.375vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(15) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.375vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(15) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.375vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-2 .container div:nth-child(16) { width: 1vmin; height: 0.75vmin; transform: translate3d(2vmin, -12vmin, 3vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(16) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-2 .container div:nth-child(16) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-2 .container div:nth-child(16) .container .left { width: 1vmin; height: 0.75vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(16) .container .right { width: 1vmin; height: 0.75vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(16) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(0.75vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(16) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(16) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(16) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-2 .container div:nth-child(17) { width: 1vmin; height: 0.75vmin; transform: translate3d(2vmin, -10.5vmin, 3vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(17) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-2 .container div:nth-child(17) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-2 .container div:nth-child(17) .container .left { width: 1vmin; height: 0.75vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(17) .container .right { width: 1vmin; height: 0.75vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(17) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(0.75vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(17) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(17) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(17) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-2 .container div:nth-child(18) { width: 1vmin; height: 0.75vmin; transform: translate3d(2vmin, -9vmin, 3vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(18) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-2 .container div:nth-child(18) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-2 .container div:nth-child(18) .container .left { width: 1vmin; height: 0.75vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(18) .container .right { width: 1vmin; height: 0.75vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(18) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(0.75vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(18) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(18) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(18) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-2 .container div:nth-child(19) { width: 1vmin; height: 0.75vmin; transform: translate3d(2vmin, -7.5vmin, 3vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(19) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-2 .container div:nth-child(19) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-2 .container div:nth-child(19) .container .left { width: 1vmin; height: 0.75vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(19) .container .right { width: 1vmin; height: 0.75vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(19) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(0.75vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(19) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(19) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(19) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #knight-white-2 .container div:nth-child(20) { width: 1vmin; height: 0.75vmin; transform: translate3d(2vmin, -6vmin, 3vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(20) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #knight-white-2 .container div:nth-child(20) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #knight-white-2 .container div:nth-child(20) .container .left { width: 1vmin; height: 0.75vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(20) .container .right { width: 1vmin; height: 0.75vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(20) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(0.75vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(20) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(20) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #knight-white-2 .container div:nth-child(20) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #bishop-white-1 { width: 7vmin; height: 17vmin; transform: translate3d(16vmin, 0vmin, 28vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(1) { width: 3vmin; height: 13vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #bishop-white-1 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #bishop-white-1 .container div:nth-child(1) .container .left { width: 3vmin; height: 13vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(1) .container .right { width: 3vmin; height: 13vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(1) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(13vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(1) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(1) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 13vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(1) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 13vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #bishop-white-1 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #bishop-white-1 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #bishop-white-1 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(2) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(2) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(2) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(2) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #bishop-white-1 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #bishop-white-1 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #bishop-white-1 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(3) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(3) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(3) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(3) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #bishop-white-1 .container div:nth-child(4) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -8vmin, 0vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #bishop-white-1 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #bishop-white-1 .container div:nth-child(4) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(4) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(4) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(4) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(4) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(4) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #bishop-white-1 .container div:nth-child(5) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, -13vmin, 0vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #bishop-white-1 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #bishop-white-1 .container div:nth-child(5) .container .left { width: 3vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(5) .container .right { width: 3vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(5) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(2vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(5) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(5) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(5) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #bishop-white-1 .container div:nth-child(6) { width: 3vmin; height: 2vmin; transform: translate3d(1vmin, -13vmin, 0vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #bishop-white-1 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #bishop-white-1 .container div:nth-child(6) .container .left { width: 5vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(6) .container .right { width: 5vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(3vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(6) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(6) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(6) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(6) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #bishop-white-1 .container div:nth-child(7) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -15vmin, 0vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(7) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #bishop-white-1 .container div:nth-child(7) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #bishop-white-1 .container div:nth-child(7) .container .left { width: 3vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(7) .container .right { width: 3vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(7) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(1vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(7) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(7) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(7) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #bishop-white-1 .container div:nth-child(8) { width: 1vmin; height: 1vmin; transform: translate3d(2vmin, -16vmin, 0vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(8) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #bishop-white-1 .container div:nth-child(8) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #bishop-white-1 .container div:nth-child(8) .container .left { width: 1vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(8) .container .right { width: 1vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(8) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(1vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(8) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(8) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #bishop-white-1 .container div:nth-child(8) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #bishop-white-2 { width: 7vmin; height: 17vmin; transform: translate3d(40vmin, 0vmin, 28vmin); animation: move-bishop-white-2 25s ease-in-out 2s infinite; } body .scene .chess .white #bishop-white-2 .container div:nth-child(1) { width: 3vmin; height: 13vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #bishop-white-2 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #bishop-white-2 .container div:nth-child(1) .container .left { width: 3vmin; height: 13vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(1) .container .right { width: 3vmin; height: 13vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(1) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(13vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(1) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(1) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 13vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(1) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 13vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #bishop-white-2 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #bishop-white-2 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #bishop-white-2 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(2) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(2) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(2) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(2) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #bishop-white-2 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #bishop-white-2 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #bishop-white-2 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(3) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(3) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(3) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(3) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #bishop-white-2 .container div:nth-child(4) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -8vmin, 0vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #bishop-white-2 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #bishop-white-2 .container div:nth-child(4) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(4) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(4) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(4) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(4) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(4) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #bishop-white-2 .container div:nth-child(5) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, -13vmin, 0vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #bishop-white-2 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #bishop-white-2 .container div:nth-child(5) .container .left { width: 3vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(5) .container .right { width: 3vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(5) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(2vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(5) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(5) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(5) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #bishop-white-2 .container div:nth-child(6) { width: 3vmin; height: 2vmin; transform: translate3d(1vmin, -13vmin, 0vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #bishop-white-2 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #bishop-white-2 .container div:nth-child(6) .container .left { width: 5vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(6) .container .right { width: 5vmin; height: 2vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(3vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(6) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(6) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(6) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(6) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #bishop-white-2 .container div:nth-child(7) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -15vmin, 0vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(7) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #bishop-white-2 .container div:nth-child(7) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #bishop-white-2 .container div:nth-child(7) .container .left { width: 3vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(7) .container .right { width: 3vmin; height: 1vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(7) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(1vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(7) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(7) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(7) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #bishop-white-2 .container div:nth-child(8) { width: 1vmin; height: 1vmin; transform: translate3d(2vmin, -16vmin, 0vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(8) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #bishop-white-2 .container div:nth-child(8) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #bishop-white-2 .container div:nth-child(8) .container .left { width: 1vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(8) .container .right { width: 1vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(8) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(1vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(8) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(8) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .white #bishop-white-2 .container div:nth-child(8) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } @keyframes move-bishop-white-2 { 0%, 24% { transform: translate3d(40vmin, 0vmin, 28vmin); } 28% { transform: translate3d(40vmin, -20vmin, 28vmin); } 32% { transform: translate3d(16vmin, -20vmin, 4vmin); } 36%, 100% { transform: translate3d(16vmin, 0vmin, 4vmin); } } body .scene .chess .white #pawn-white-1 { width: 7vmin; height: 9vmin; transform: translate3d(0vmin, 0vmin, 20vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(1) { width: 3vmin; height: 4vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-1 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-1 .container div:nth-child(1) .container .left { width: 3vmin; height: 4vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(1) .container .right { width: 3vmin; height: 4vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(1) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(4vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(1) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(1) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(1) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 4vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-1 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-1 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-1 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(2) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(2) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(2) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(2) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-1 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-1 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-1 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(3) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(3) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(3) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(3) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-1 .container div:nth-child(4) { width: 2vmin; height: 9vmin; transform: translate3d(1.5vmin, 0vmin, 0vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-1 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-1 .container div:nth-child(4) .container .left { width: 2vmin; height: 9vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(4) .container .right { width: 2vmin; height: 9vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(4) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(9vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(4) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(4) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 9vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(4) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 9vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-1 .container div:nth-child(5) { width: 2vmin; height: 1.5vmin; transform: translate3d(1.5vmin, -6vmin, 0vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-1 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-1 .container div:nth-child(5) .container .left { width: 5vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(5) .container .right { width: 5vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(2vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(5) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1.5vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(5) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(5) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(5) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-1 .container div:nth-child(6) { width: 5vmin; height: 1.5vmin; transform: translate3d(0vmin, -6vmin, 0vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-1 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-1 .container div:nth-child(6) .container .left { width: 2vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(6) .container .right { width: 2vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(5vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(6) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(1.5vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(6) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(6) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .white #pawn-white-1 .container div:nth-child(6) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-2 { width: 7vmin; height: 9vmin; transform: translate3d(8vmin, 0vmin, 20vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(1) { width: 3vmin; height: 4vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-2 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-2 .container div:nth-child(1) .container .left { width: 3vmin; height: 4vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(1) .container .right { width: 3vmin; height: 4vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(1) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(4vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(1) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(1) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(1) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 4vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-2 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-2 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-2 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(2) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(2) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(2) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(2) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-2 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-2 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-2 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(3) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(3) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(3) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(3) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-2 .container div:nth-child(4) { width: 2vmin; height: 9vmin; transform: translate3d(1.5vmin, 0vmin, 0vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-2 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-2 .container div:nth-child(4) .container .left { width: 2vmin; height: 9vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(4) .container .right { width: 2vmin; height: 9vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(4) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(9vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(4) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(4) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 9vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(4) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 9vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-2 .container div:nth-child(5) { width: 2vmin; height: 1.5vmin; transform: translate3d(1.5vmin, -6vmin, 0vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-2 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-2 .container div:nth-child(5) .container .left { width: 5vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(5) .container .right { width: 5vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(2vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(5) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1.5vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(5) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(5) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(5) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-2 .container div:nth-child(6) { width: 5vmin; height: 1.5vmin; transform: translate3d(0vmin, -6vmin, 0vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-2 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-2 .container div:nth-child(6) .container .left { width: 2vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(6) .container .right { width: 2vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(5vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(6) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(1.5vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(6) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(6) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .white #pawn-white-2 .container div:nth-child(6) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-3 { width: 7vmin; height: 9vmin; transform: translate3d(16vmin, 0vmin, 20vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(1) { width: 3vmin; height: 4vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-3 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-3 .container div:nth-child(1) .container .left { width: 3vmin; height: 4vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(1) .container .right { width: 3vmin; height: 4vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(1) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(4vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(1) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(1) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(1) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 4vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-3 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-3 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-3 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(2) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(2) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(2) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(2) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-3 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-3 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-3 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(3) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(3) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(3) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(3) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-3 .container div:nth-child(4) { width: 2vmin; height: 9vmin; transform: translate3d(1.5vmin, 0vmin, 0vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-3 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-3 .container div:nth-child(4) .container .left { width: 2vmin; height: 9vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(4) .container .right { width: 2vmin; height: 9vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(4) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(9vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(4) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(4) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 9vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(4) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 9vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-3 .container div:nth-child(5) { width: 2vmin; height: 1.5vmin; transform: translate3d(1.5vmin, -6vmin, 0vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-3 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-3 .container div:nth-child(5) .container .left { width: 5vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(5) .container .right { width: 5vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(2vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(5) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1.5vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(5) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(5) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(5) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-3 .container div:nth-child(6) { width: 5vmin; height: 1.5vmin; transform: translate3d(0vmin, -6vmin, 0vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-3 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-3 .container div:nth-child(6) .container .left { width: 2vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(6) .container .right { width: 2vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(5vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(6) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(1.5vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(6) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(6) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .white #pawn-white-3 .container div:nth-child(6) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-4 { width: 7vmin; height: 9vmin; transform: translate3d(24vmin, 0vmin, 20vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(1) { width: 3vmin; height: 4vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-4 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-4 .container div:nth-child(1) .container .left { width: 3vmin; height: 4vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(1) .container .right { width: 3vmin; height: 4vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(1) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(4vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(1) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(1) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(1) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 4vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-4 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-4 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-4 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(2) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(2) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(2) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(2) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-4 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-4 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-4 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(3) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(3) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(3) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(3) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-4 .container div:nth-child(4) { width: 2vmin; height: 9vmin; transform: translate3d(1.5vmin, 0vmin, 0vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-4 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-4 .container div:nth-child(4) .container .left { width: 2vmin; height: 9vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(4) .container .right { width: 2vmin; height: 9vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(4) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(9vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(4) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(4) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 9vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(4) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 9vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-4 .container div:nth-child(5) { width: 2vmin; height: 1.5vmin; transform: translate3d(1.5vmin, -6vmin, 0vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-4 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-4 .container div:nth-child(5) .container .left { width: 5vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(5) .container .right { width: 5vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(2vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(5) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1.5vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(5) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(5) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(5) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-4 .container div:nth-child(6) { width: 5vmin; height: 1.5vmin; transform: translate3d(0vmin, -6vmin, 0vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-4 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-4 .container div:nth-child(6) .container .left { width: 2vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(6) .container .right { width: 2vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(5vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(6) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(1.5vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(6) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(6) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .white #pawn-white-4 .container div:nth-child(6) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-5 { width: 7vmin; height: 9vmin; transform: translate3d(32vmin, 0vmin, 20vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(1) { width: 3vmin; height: 4vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-5 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-5 .container div:nth-child(1) .container .left { width: 3vmin; height: 4vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(1) .container .right { width: 3vmin; height: 4vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(1) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(4vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(1) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(1) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(1) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 4vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-5 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-5 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-5 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(2) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(2) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(2) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(2) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-5 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-5 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-5 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(3) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(3) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(3) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(3) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-5 .container div:nth-child(4) { width: 2vmin; height: 9vmin; transform: translate3d(1.5vmin, 0vmin, 0vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-5 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-5 .container div:nth-child(4) .container .left { width: 2vmin; height: 9vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(4) .container .right { width: 2vmin; height: 9vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(4) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(9vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(4) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(4) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 9vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(4) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 9vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-5 .container div:nth-child(5) { width: 2vmin; height: 1.5vmin; transform: translate3d(1.5vmin, -6vmin, 0vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-5 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-5 .container div:nth-child(5) .container .left { width: 5vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(5) .container .right { width: 5vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(2vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(5) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1.5vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(5) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(5) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(5) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-5 .container div:nth-child(6) { width: 5vmin; height: 1.5vmin; transform: translate3d(0vmin, -6vmin, 0vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-5 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-5 .container div:nth-child(6) .container .left { width: 2vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(6) .container .right { width: 2vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(5vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(6) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(1.5vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(6) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(6) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .white #pawn-white-5 .container div:nth-child(6) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-6 { width: 7vmin; height: 9vmin; transform: translate3d(40vmin, 0vmin, 20vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(1) { width: 3vmin; height: 4vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-6 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-6 .container div:nth-child(1) .container .left { width: 3vmin; height: 4vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(1) .container .right { width: 3vmin; height: 4vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(1) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(4vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(1) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(1) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(1) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 4vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-6 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-6 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-6 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(2) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(2) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(2) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(2) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-6 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-6 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-6 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(3) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(3) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(3) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(3) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-6 .container div:nth-child(4) { width: 2vmin; height: 9vmin; transform: translate3d(1.5vmin, 0vmin, 0vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-6 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-6 .container div:nth-child(4) .container .left { width: 2vmin; height: 9vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(4) .container .right { width: 2vmin; height: 9vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(4) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(9vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(4) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(4) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 9vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(4) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 9vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-6 .container div:nth-child(5) { width: 2vmin; height: 1.5vmin; transform: translate3d(1.5vmin, -6vmin, 0vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-6 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-6 .container div:nth-child(5) .container .left { width: 5vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(5) .container .right { width: 5vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(2vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(5) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1.5vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(5) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(5) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(5) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-6 .container div:nth-child(6) { width: 5vmin; height: 1.5vmin; transform: translate3d(0vmin, -6vmin, 0vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-6 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-6 .container div:nth-child(6) .container .left { width: 2vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(6) .container .right { width: 2vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(5vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(6) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(1.5vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(6) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(6) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .white #pawn-white-6 .container div:nth-child(6) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-7 { width: 7vmin; height: 9vmin; transform: translate3d(48vmin, 0vmin, 20vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(1) { width: 3vmin; height: 4vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-7 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-7 .container div:nth-child(1) .container .left { width: 3vmin; height: 4vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(1) .container .right { width: 3vmin; height: 4vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(1) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(4vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(1) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(1) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(1) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 4vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-7 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-7 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-7 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(2) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(2) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(2) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(2) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-7 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-7 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-7 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(3) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(3) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(3) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(3) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-7 .container div:nth-child(4) { width: 2vmin; height: 9vmin; transform: translate3d(1.5vmin, 0vmin, 0vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-7 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-7 .container div:nth-child(4) .container .left { width: 2vmin; height: 9vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(4) .container .right { width: 2vmin; height: 9vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(4) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(9vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(4) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(4) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 9vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(4) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 9vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-7 .container div:nth-child(5) { width: 2vmin; height: 1.5vmin; transform: translate3d(1.5vmin, -6vmin, 0vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-7 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-7 .container div:nth-child(5) .container .left { width: 5vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(5) .container .right { width: 5vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(2vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(5) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1.5vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(5) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(5) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(5) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-7 .container div:nth-child(6) { width: 5vmin; height: 1.5vmin; transform: translate3d(0vmin, -6vmin, 0vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-7 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-7 .container div:nth-child(6) .container .left { width: 2vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(6) .container .right { width: 2vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(5vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(6) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(1.5vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(6) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(6) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .white #pawn-white-7 .container div:nth-child(6) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-8 { width: 7vmin; height: 9vmin; transform: translate3d(56vmin, 0vmin, 20vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(1) { width: 3vmin; height: 4vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-8 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-8 .container div:nth-child(1) .container .left { width: 3vmin; height: 4vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(1) .container .right { width: 3vmin; height: 4vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(1) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(4vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(1) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(1) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(1) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 3vmin; height: 4vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-8 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-8 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-8 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(2) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(2) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(2) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(2) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-8 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-8 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-8 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(169, 138, 96, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(3) .container .top { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(3) .container .bottom { background-color: rgba(178, 150, 113, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(3) .container .front { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(3) .container .back { background-color: rgba(139, 112, 75, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-8 .container div:nth-child(4) { width: 2vmin; height: 9vmin; transform: translate3d(1.5vmin, 0vmin, 0vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-8 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-8 .container div:nth-child(4) .container .left { width: 2vmin; height: 9vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(4) .container .right { width: 2vmin; height: 9vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(4) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(9vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(4) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(4) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 9vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(4) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 9vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-8 .container div:nth-child(5) { width: 2vmin; height: 1.5vmin; transform: translate3d(1.5vmin, -6vmin, 0vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-8 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-8 .container div:nth-child(5) .container .left { width: 5vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(5) .container .right { width: 5vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(2vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(5) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1.5vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(5) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(5) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(5) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-8 .container div:nth-child(6) { width: 5vmin; height: 1.5vmin; transform: translate3d(0vmin, -6vmin, 0vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .white #pawn-white-8 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .white #pawn-white-8 .container div:nth-child(6) .container .left { width: 2vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(6) .container .right { width: 2vmin; height: 1.5vmin; background-color: #B29671cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(5vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(6) .container .top { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(1.5vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(6) .container .bottom { background-color: rgba(187, 162, 130, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(6) .container .front { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .white #pawn-white-8 .container div:nth-child(6) .container .back { background-color: rgba(156, 125, 84, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .white #pawn-white-5 { animation: move-pawn-white-5 25s ease-in-out 2s infinite; } @keyframes move-pawn-white-5 { 0% { transform: translate3d(32vmin, 0vmin, 20vmin); } 4% { transform: translate3d(32vmin, -10vmin, 20vmin); } 8% { transform: translate3d(32vmin, -10vmin, 4vmin); } 12%, 100% { transform: translate3d(32vmin, 0vmin, 4vmin); } } body .scene .chess .black { width: 70vmin; height: 70vmin; transform-origin: 35vmin 35vmin; transform: translateX(-3.5vmin) rotateY(180deg); } body .scene .chess .black #rook-black-1 { width: 7vmin; height: 12vmin; transform: translate3d(0vmin, 0vmin, 28vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(1) { width: 3vmin; height: 9vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-1 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-1 .container div:nth-child(1) .container .left { width: 3vmin; height: 9vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(1) .container .right { width: 3vmin; height: 9vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(1) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(9vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(1) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(1) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 9vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(1) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 9vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-1 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-1 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-1 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(2) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(2) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(2) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(2) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-1 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-1 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-1 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(3) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(3) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(3) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(3) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-1 .container div:nth-child(4) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -7vmin, 0vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-1 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-1 .container div:nth-child(4) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(4) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(4) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(4) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(4) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(4) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-1 .container div:nth-child(5) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -9vmin, 0vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-1 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-1 .container div:nth-child(5) .container .left { width: 5vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(5) .container .right { width: 5vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(5) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(5) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(5) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(5) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-1 .container div:nth-child(6) { width: 1vmin; height: 2vmin; transform: translate3d(0vmin, -10vmin, -1.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-1 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-1 .container div:nth-child(6) .container .left { width: 2vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(6) .container .right { width: 2vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(1vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(6) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(6) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(6) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(6) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 1vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-1 .container div:nth-child(7) { width: 1vmin; height: 2vmin; transform: translate3d(0vmin, -10vmin, 1.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(7) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-1 .container div:nth-child(7) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-1 .container div:nth-child(7) .container .left { width: 2vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(7) .container .right { width: 2vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(1vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(7) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(7) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(7) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(7) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 1vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-1 .container div:nth-child(8) { width: 1vmin; height: 2vmin; transform: translate3d(4vmin, -10vmin, -1.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(8) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-1 .container div:nth-child(8) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-1 .container div:nth-child(8) .container .left { width: 2vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(8) .container .right { width: 2vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(1vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(8) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(8) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(8) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(8) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 1vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-1 .container div:nth-child(9) { width: 1vmin; height: 2vmin; transform: translate3d(4vmin, -10vmin, 1.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(9) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-1 .container div:nth-child(9) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-1 .container div:nth-child(9) .container .left { width: 2vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(9) .container .right { width: 2vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(1vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(9) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(9) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(9) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(9) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 1vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-1 .container div:nth-child(10) { width: 2vmin; height: 2vmin; transform: translate3d(0vmin, -10vmin, -2vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(10) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-1 .container div:nth-child(10) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-1 .container div:nth-child(10) .container .left { width: 1vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(10) .container .right { width: 1vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(10) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(10) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(10) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(10) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-1 .container div:nth-child(11) { width: 2vmin; height: 2vmin; transform: translate3d(0vmin, -10vmin, 2vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(11) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-1 .container div:nth-child(11) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-1 .container div:nth-child(11) .container .left { width: 1vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(11) .container .right { width: 1vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(11) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(11) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(11) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(11) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-1 .container div:nth-child(12) { width: 2vmin; height: 2vmin; transform: translate3d(3vmin, -10vmin, -2vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(12) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-1 .container div:nth-child(12) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-1 .container div:nth-child(12) .container .left { width: 1vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(12) .container .right { width: 1vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(12) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(12) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(12) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(12) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-1 .container div:nth-child(13) { width: 2vmin; height: 2vmin; transform: translate3d(3vmin, -10vmin, 2vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(13) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-1 .container div:nth-child(13) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-1 .container div:nth-child(13) .container .left { width: 1vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(13) .container .right { width: 1vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(13) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(13) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(13) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #rook-black-1 .container div:nth-child(13) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-2 { width: 7vmin; height: 12vmin; transform: translate3d(56vmin, 0vmin, 28vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(1) { width: 3vmin; height: 9vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-2 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-2 .container div:nth-child(1) .container .left { width: 3vmin; height: 9vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(1) .container .right { width: 3vmin; height: 9vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(1) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(9vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(1) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(1) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 9vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(1) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 9vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-2 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-2 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-2 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(2) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(2) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(2) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(2) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-2 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-2 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-2 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(3) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(3) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(3) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(3) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-2 .container div:nth-child(4) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -7vmin, 0vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-2 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-2 .container div:nth-child(4) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(4) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(4) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(4) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(4) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(4) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-2 .container div:nth-child(5) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -9vmin, 0vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-2 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-2 .container div:nth-child(5) .container .left { width: 5vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(5) .container .right { width: 5vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(5) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(5) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(5) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(5) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-2 .container div:nth-child(6) { width: 1vmin; height: 2vmin; transform: translate3d(0vmin, -10vmin, -1.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-2 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-2 .container div:nth-child(6) .container .left { width: 2vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(6) .container .right { width: 2vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(1vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(6) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(6) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(6) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(6) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 1vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-2 .container div:nth-child(7) { width: 1vmin; height: 2vmin; transform: translate3d(0vmin, -10vmin, 1.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(7) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-2 .container div:nth-child(7) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-2 .container div:nth-child(7) .container .left { width: 2vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(7) .container .right { width: 2vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(1vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(7) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(7) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(7) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(7) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 1vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-2 .container div:nth-child(8) { width: 1vmin; height: 2vmin; transform: translate3d(4vmin, -10vmin, -1.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(8) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-2 .container div:nth-child(8) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-2 .container div:nth-child(8) .container .left { width: 2vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(8) .container .right { width: 2vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(1vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(8) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(8) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(8) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(8) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 1vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-2 .container div:nth-child(9) { width: 1vmin; height: 2vmin; transform: translate3d(4vmin, -10vmin, 1.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(9) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-2 .container div:nth-child(9) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-2 .container div:nth-child(9) .container .left { width: 2vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(9) .container .right { width: 2vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(1vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(9) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(9) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(9) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 1vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(9) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 1vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-2 .container div:nth-child(10) { width: 2vmin; height: 2vmin; transform: translate3d(0vmin, -10vmin, -2vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(10) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-2 .container div:nth-child(10) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-2 .container div:nth-child(10) .container .left { width: 1vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(10) .container .right { width: 1vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(10) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(10) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(10) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(10) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-2 .container div:nth-child(11) { width: 2vmin; height: 2vmin; transform: translate3d(0vmin, -10vmin, 2vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(11) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-2 .container div:nth-child(11) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-2 .container div:nth-child(11) .container .left { width: 1vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(11) .container .right { width: 1vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(11) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(11) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(11) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(11) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-2 .container div:nth-child(12) { width: 2vmin; height: 2vmin; transform: translate3d(3vmin, -10vmin, -2vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(12) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-2 .container div:nth-child(12) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-2 .container div:nth-child(12) .container .left { width: 1vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(12) .container .right { width: 1vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(12) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(12) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(12) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(12) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #rook-black-2 .container div:nth-child(13) { width: 2vmin; height: 2vmin; transform: translate3d(3vmin, -10vmin, 2vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(13) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #rook-black-2 .container div:nth-child(13) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #rook-black-2 .container div:nth-child(13) .container .left { width: 1vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(13) .container .right { width: 1vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(13) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(2vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(13) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(13) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #rook-black-2 .container div:nth-child(13) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #queen-black { width: 7vmin; height: 19vmin; transform: translate3d(32vmin, 0vmin, 28vmin); } body .scene .chess .black #queen-black .container div:nth-child(1) { width: 3vmin; height: 18vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .black #queen-black .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #queen-black .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #queen-black .container div:nth-child(1) .container .left { width: 3vmin; height: 18vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(1) .container .right { width: 3vmin; height: 18vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .black #queen-black .container div:nth-child(1) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(18vmin); } body .scene .chess .black #queen-black .container div:nth-child(1) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(1) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 18vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(1) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 18vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #queen-black .container div:nth-child(2) { width: 5vmin; height: 5vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .black #queen-black .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #queen-black .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #queen-black .container div:nth-child(2) .container .left { width: 5vmin; height: 5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(2) .container .right { width: 5vmin; height: 5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #queen-black .container div:nth-child(2) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(5vmin); } body .scene .chess .black #queen-black .container div:nth-child(2) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(2) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(2) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #queen-black .container div:nth-child(3) { width: 6vmin; height: 2vmin; transform: translate3d(-0.5vmin, 0vmin, 0vmin); } body .scene .chess .black #queen-black .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #queen-black .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #queen-black .container div:nth-child(3) .container .left { width: 6vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-3vmin); } body .scene .chess .black #queen-black .container div:nth-child(3) .container .right { width: 6vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-3vmin) translateZ(6vmin); } body .scene .chess .black #queen-black .container div:nth-child(3) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 6vmin; height: 6vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(3vmin) translateZ(2vmin); } body .scene .chess .black #queen-black .container div:nth-child(3) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 6vmin; height: 6vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(3vmin); } body .scene .chess .black #queen-black .container div:nth-child(3) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 6vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(3vmin); } body .scene .chess .black #queen-black .container div:nth-child(3) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 6vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(3vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #queen-black .container div:nth-child(4) { width: 6vmin; height: 1vmin; transform: translate3d(-0.5vmin, -2.5vmin, 0vmin); } body .scene .chess .black #queen-black .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #queen-black .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #queen-black .container div:nth-child(4) .container .left { width: 6vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-3vmin); } body .scene .chess .black #queen-black .container div:nth-child(4) .container .right { width: 6vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-3vmin) translateZ(6vmin); } body .scene .chess .black #queen-black .container div:nth-child(4) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 6vmin; height: 6vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(3vmin) translateZ(1vmin); } body .scene .chess .black #queen-black .container div:nth-child(4) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 6vmin; height: 6vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(3vmin); } body .scene .chess .black #queen-black .container div:nth-child(4) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 6vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(3vmin); } body .scene .chess .black #queen-black .container div:nth-child(4) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 6vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(3vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #queen-black .container div:nth-child(5) { width: 4vmin; height: 2vmin; transform: translate3d(0.5vmin, -13vmin, 0vmin); } body .scene .chess .black #queen-black .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #queen-black .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #queen-black .container div:nth-child(5) .container .left { width: 4vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2vmin); } body .scene .chess .black #queen-black .container div:nth-child(5) .container .right { width: 4vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2vmin) translateZ(4vmin); } body .scene .chess .black #queen-black .container div:nth-child(5) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 4vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2vmin) translateZ(2vmin); } body .scene .chess .black #queen-black .container div:nth-child(5) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 4vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2vmin); } body .scene .chess .black #queen-black .container div:nth-child(5) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 4vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2vmin); } body .scene .chess .black #queen-black .container div:nth-child(5) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 4vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #queen-black .container div:nth-child(6) { width: 4vmin; height: 1vmin; transform: translate3d(0.5vmin, -16vmin, 0vmin); } body .scene .chess .black #queen-black .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #queen-black .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #queen-black .container div:nth-child(6) .container .left { width: 4vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2vmin); } body .scene .chess .black #queen-black .container div:nth-child(6) .container .right { width: 4vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2vmin) translateZ(4vmin); } body .scene .chess .black #queen-black .container div:nth-child(6) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 4vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2vmin) translateZ(1vmin); } body .scene .chess .black #queen-black .container div:nth-child(6) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 4vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2vmin); } body .scene .chess .black #queen-black .container div:nth-child(6) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 4vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2vmin); } body .scene .chess .black #queen-black .container div:nth-child(6) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 4vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #queen-black .container div:nth-child(7) { width: 1vmin; height: 1vmin; transform: translate3d(2vmin, -18vmin, 0vmin); } body .scene .chess .black #queen-black .container div:nth-child(7) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #queen-black .container div:nth-child(7) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #queen-black .container div:nth-child(7) .container .left { width: 1vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(7) .container .right { width: 1vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .black #queen-black .container div:nth-child(7) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(1vmin); } body .scene .chess .black #queen-black .container div:nth-child(7) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(7) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(7) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #queen-black .container div:nth-child(8) { width: 1vmin; height: 1vmin; transform: translate3d(2vmin, -16.5vmin, 0vmin); } body .scene .chess .black #queen-black .container div:nth-child(8) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #queen-black .container div:nth-child(8) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #queen-black .container div:nth-child(8) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(8) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(1vmin); } body .scene .chess .black #queen-black .container div:nth-child(8) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #queen-black .container div:nth-child(8) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(8) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(8) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #queen-black .container div:nth-child(9) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -16.5vmin, 0vmin); } body .scene .chess .black #queen-black .container div:nth-child(9) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #queen-black .container div:nth-child(9) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #queen-black .container div:nth-child(9) .container .left { width: 1vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(9) .container .right { width: 1vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(5vmin); } body .scene .chess .black #queen-black .container div:nth-child(9) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(1vmin); } body .scene .chess .black #queen-black .container div:nth-child(9) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(9) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(9) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #queen-black .container div:nth-child(10) { width: 1vmin; height: 1vmin; transform: translate3d(0vmin, -16.5vmin, 1.75vmin); } body .scene .chess .black #queen-black .container div:nth-child(10) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #queen-black .container div:nth-child(10) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #queen-black .container div:nth-child(10) .container .left { width: 1vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(10) .container .right { width: 1vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .black #queen-black .container div:nth-child(10) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(1vmin); } body .scene .chess .black #queen-black .container div:nth-child(10) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(10) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(10) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #queen-black .container div:nth-child(11) { width: 1vmin; height: 1vmin; transform: translate3d(0vmin, -16.5vmin, -1.75vmin); } body .scene .chess .black #queen-black .container div:nth-child(11) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #queen-black .container div:nth-child(11) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #queen-black .container div:nth-child(11) .container .left { width: 1vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(11) .container .right { width: 1vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .black #queen-black .container div:nth-child(11) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(1vmin); } body .scene .chess .black #queen-black .container div:nth-child(11) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(11) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(11) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #queen-black .container div:nth-child(12) { width: 1vmin; height: 1vmin; transform: translate3d(4vmin, -16.5vmin, 1.75vmin); } body .scene .chess .black #queen-black .container div:nth-child(12) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #queen-black .container div:nth-child(12) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #queen-black .container div:nth-child(12) .container .left { width: 1vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(12) .container .right { width: 1vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .black #queen-black .container div:nth-child(12) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(1vmin); } body .scene .chess .black #queen-black .container div:nth-child(12) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(12) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(12) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #queen-black .container div:nth-child(13) { width: 1vmin; height: 1vmin; transform: translate3d(4vmin, -16.5vmin, -1.75vmin); } body .scene .chess .black #queen-black .container div:nth-child(13) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #queen-black .container div:nth-child(13) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #queen-black .container div:nth-child(13) .container .left { width: 1vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(13) .container .right { width: 1vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .black #queen-black .container div:nth-child(13) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(1vmin); } body .scene .chess .black #queen-black .container div:nth-child(13) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(13) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #queen-black .container div:nth-child(13) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #king-black { width: 7vmin; height: 23vmin; transform-origin: center bottom -2.5vmin; transform: translate3d(24vmin, 0vmin, 28vmin); animation: move-king-black 25s ease-in-out 2s infinite; } body .scene .chess .black #king-black .container div:nth-child(1) { width: 3vmin; height: 20vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .black #king-black .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #king-black .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #king-black .container div:nth-child(1) .container .left { width: 3vmin; height: 20vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .black #king-black .container div:nth-child(1) .container .right { width: 3vmin; height: 20vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .black #king-black .container div:nth-child(1) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(20vmin); } body .scene .chess .black #king-black .container div:nth-child(1) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .black #king-black .container div:nth-child(1) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 20vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .black #king-black .container div:nth-child(1) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 20vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #king-black .container div:nth-child(2) { width: 5vmin; height: 5vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .black #king-black .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #king-black .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #king-black .container div:nth-child(2) .container .left { width: 5vmin; height: 5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #king-black .container div:nth-child(2) .container .right { width: 5vmin; height: 5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #king-black .container div:nth-child(2) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(5vmin); } body .scene .chess .black #king-black .container div:nth-child(2) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #king-black .container div:nth-child(2) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #king-black .container div:nth-child(2) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #king-black .container div:nth-child(3) { width: 6vmin; height: 2vmin; transform: translate3d(-0.5vmin, 0vmin, 0vmin); } body .scene .chess .black #king-black .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #king-black .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #king-black .container div:nth-child(3) .container .left { width: 6vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-3vmin); } body .scene .chess .black #king-black .container div:nth-child(3) .container .right { width: 6vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-3vmin) translateZ(6vmin); } body .scene .chess .black #king-black .container div:nth-child(3) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 6vmin; height: 6vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(3vmin) translateZ(2vmin); } body .scene .chess .black #king-black .container div:nth-child(3) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 6vmin; height: 6vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(3vmin); } body .scene .chess .black #king-black .container div:nth-child(3) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 6vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(3vmin); } body .scene .chess .black #king-black .container div:nth-child(3) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 6vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(3vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #king-black .container div:nth-child(4) { width: 6vmin; height: 1vmin; transform: translate3d(-0.5vmin, -2.5vmin, 0vmin); } body .scene .chess .black #king-black .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #king-black .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #king-black .container div:nth-child(4) .container .left { width: 6vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-3vmin); } body .scene .chess .black #king-black .container div:nth-child(4) .container .right { width: 6vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-3vmin) translateZ(6vmin); } body .scene .chess .black #king-black .container div:nth-child(4) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 6vmin; height: 6vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(3vmin) translateZ(1vmin); } body .scene .chess .black #king-black .container div:nth-child(4) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 6vmin; height: 6vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(3vmin); } body .scene .chess .black #king-black .container div:nth-child(4) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 6vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(3vmin); } body .scene .chess .black #king-black .container div:nth-child(4) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 6vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(3vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #king-black .container div:nth-child(5) { width: 4vmin; height: 2vmin; transform: translate3d(0.5vmin, -13vmin, 0vmin); } body .scene .chess .black #king-black .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #king-black .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #king-black .container div:nth-child(5) .container .left { width: 4vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2vmin); } body .scene .chess .black #king-black .container div:nth-child(5) .container .right { width: 4vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2vmin) translateZ(4vmin); } body .scene .chess .black #king-black .container div:nth-child(5) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 4vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2vmin) translateZ(2vmin); } body .scene .chess .black #king-black .container div:nth-child(5) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 4vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2vmin); } body .scene .chess .black #king-black .container div:nth-child(5) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 4vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2vmin); } body .scene .chess .black #king-black .container div:nth-child(5) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 4vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #king-black .container div:nth-child(6) { width: 4vmin; height: 1vmin; transform: translate3d(0.5vmin, -15.5vmin, 0vmin); } body .scene .chess .black #king-black .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #king-black .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #king-black .container div:nth-child(6) .container .left { width: 4vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2vmin); } body .scene .chess .black #king-black .container div:nth-child(6) .container .right { width: 4vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2vmin) translateZ(4vmin); } body .scene .chess .black #king-black .container div:nth-child(6) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 4vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2vmin) translateZ(1vmin); } body .scene .chess .black #king-black .container div:nth-child(6) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 4vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2vmin); } body .scene .chess .black #king-black .container div:nth-child(6) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 4vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2vmin); } body .scene .chess .black #king-black .container div:nth-child(6) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 4vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #king-black .container div:nth-child(7) { width: 4vmin; height: 2vmin; transform: translate3d(0.5vmin, -17vmin, 0vmin); } body .scene .chess .black #king-black .container div:nth-child(7) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #king-black .container div:nth-child(7) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #king-black .container div:nth-child(7) .container .left { width: 4vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2vmin); } body .scene .chess .black #king-black .container div:nth-child(7) .container .right { width: 4vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2vmin) translateZ(4vmin); } body .scene .chess .black #king-black .container div:nth-child(7) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 4vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2vmin) translateZ(2vmin); } body .scene .chess .black #king-black .container div:nth-child(7) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 4vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2vmin); } body .scene .chess .black #king-black .container div:nth-child(7) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 4vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2vmin); } body .scene .chess .black #king-black .container div:nth-child(7) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 4vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #king-black .container div:nth-child(8) { width: 1vmin; height: 4vmin; transform: translate3d(2vmin, -19vmin, 0vmin); } body .scene .chess .black #king-black .container div:nth-child(8) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #king-black .container div:nth-child(8) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #king-black .container div:nth-child(8) .container .left { width: 1vmin; height: 4vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #king-black .container div:nth-child(8) .container .right { width: 1vmin; height: 4vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .black #king-black .container div:nth-child(8) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(4vmin); } body .scene .chess .black #king-black .container div:nth-child(8) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #king-black .container div:nth-child(8) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 4vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #king-black .container div:nth-child(8) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 4vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #king-black .container div:nth-child(9) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -21vmin, 0vmin); } body .scene .chess .black #king-black .container div:nth-child(9) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #king-black .container div:nth-child(9) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #king-black .container div:nth-child(9) .container .left { width: 1vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #king-black .container div:nth-child(9) .container .right { width: 1vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(3vmin); } body .scene .chess .black #king-black .container div:nth-child(9) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(1vmin); } body .scene .chess .black #king-black .container div:nth-child(9) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #king-black .container div:nth-child(9) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #king-black .container div:nth-child(9) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } @keyframes move-king-black { 0%, 84% { transform: translate3d(24vmin, 0vmin, 28vmin); } 88%, 100% { transform: translate3d(24vmin, 0vmin, 34vmin) rotateX(90deg); } } body .scene .chess .black #knight-black-1 { width: 7vmin; height: 14.5vmin; transform: translate3d(8vmin, 0vmin, 28vmin); animation: move-knight-black-1 25s ease-in-out 2s infinite; } body .scene .chess .black #knight-black-1 .container div:nth-child(1) { width: 3vmin; height: 4.5vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-1 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-1 .container div:nth-child(1) .container .left { width: 3vmin; height: 4.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(1) .container .right { width: 3vmin; height: 4.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(1) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(4.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(1) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(1) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 4.5vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(1) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 4.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-1 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-1 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-1 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(2) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(2) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(2) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(2) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-1 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-1 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-1 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(3) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(3) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(3) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(3) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-1 .container div:nth-child(4) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -4.5vmin, -0.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-1 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-1 .container div:nth-child(4) .container .left { width: 4vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(4) .container .right { width: 4vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2vmin) translateZ(3vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(4) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(4) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(4) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(4) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-1 .container div:nth-child(5) { width: 3vmin; height: 2vmin; transform: translate3d(1vmin, -5.5vmin, -1vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-1 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-1 .container div:nth-child(5) .container .left { width: 5vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(5) .container .right { width: 5vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(3vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(5) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(5) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(5) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(5) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-1 .container div:nth-child(6) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -7.5vmin, -0.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-1 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-1 .container div:nth-child(6) .container .left { width: 4vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(6) .container .right { width: 4vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2vmin) translateZ(3vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(6) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(6) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(6) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(6) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-1 .container div:nth-child(7) { width: 3vmin; height: 4vmin; transform: translate3d(1vmin, -8.5vmin, 0vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(7) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-1 .container div:nth-child(7) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-1 .container div:nth-child(7) .container .left { width: 3vmin; height: 4vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(7) .container .right { width: 3vmin; height: 4vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(7) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(4vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(7) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(7) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(7) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 4vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-1 .container div:nth-child(8) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -9.5vmin, -1vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(8) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-1 .container div:nth-child(8) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-1 .container div:nth-child(8) .container .left { width: 5vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(8) .container .right { width: 5vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(3vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(8) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(8) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(8) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(8) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-1 .container div:nth-child(9) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -11.5vmin, -0.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(9) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-1 .container div:nth-child(9) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-1 .container div:nth-child(9) .container .left { width: 4vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(9) .container .right { width: 4vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2vmin) translateZ(3vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(9) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(9) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(9) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(9) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-1 .container div:nth-child(10) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -10.5vmin, -2.75vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(10) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-1 .container div:nth-child(10) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-1 .container div:nth-child(10) .container .left { width: 1.5vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-0.75vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(10) .container .right { width: 1.5vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-0.75vmin) translateZ(3vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(10) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 1.5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.75vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(10) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 1.5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.75vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(10) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.75vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(10) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.75vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-1 .container div:nth-child(11) { width: 1vmin; height: 1vmin; transform: translate3d(2vmin, -12.5vmin, 0vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(11) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-1 .container div:nth-child(11) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-1 .container div:nth-child(11) .container .left { width: 5vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(11) .container .right { width: 5vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(11) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 1vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(11) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 1vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(11) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(11) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-1 .container div:nth-child(12) { width: 1vmin; height: 8vmin; transform: translate3d(2vmin, -5.5vmin, 2vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(12) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-1 .container div:nth-child(12) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-1 .container div:nth-child(12) .container .left { width: 1vmin; height: 8vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(12) .container .right { width: 1vmin; height: 8vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(12) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(8vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(12) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(12) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 1vmin; height: 8vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(12) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 1vmin; height: 8vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-1 .container div:nth-child(13) { width: 1vmin; height: 1vmin; transform: translate3d(2vmin, -13.5vmin, -1.75vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(13) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-1 .container div:nth-child(13) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-1 .container div:nth-child(13) .container .left { width: 0.75vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.375vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(13) .container .right { width: 0.75vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.375vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(13) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.375vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(13) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.375vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(13) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.375vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(13) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.375vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-1 .container div:nth-child(14) { width: 1vmin; height: 1vmin; transform: translate3d(2vmin, -13.5vmin, 0vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(14) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-1 .container div:nth-child(14) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-1 .container div:nth-child(14) .container .left { width: 0.75vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.375vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(14) .container .right { width: 0.75vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.375vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(14) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.375vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(14) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.375vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(14) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.375vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(14) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.375vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-1 .container div:nth-child(15) { width: 1vmin; height: 1vmin; transform: translate3d(2vmin, -13.5vmin, 1.75vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(15) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-1 .container div:nth-child(15) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-1 .container div:nth-child(15) .container .left { width: 0.75vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.375vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(15) .container .right { width: 0.75vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.375vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(15) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.375vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(15) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.375vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(15) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.375vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(15) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.375vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-1 .container div:nth-child(16) { width: 1vmin; height: 0.75vmin; transform: translate3d(2vmin, -12vmin, 3vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(16) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-1 .container div:nth-child(16) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-1 .container div:nth-child(16) .container .left { width: 1vmin; height: 0.75vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(16) .container .right { width: 1vmin; height: 0.75vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(16) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(0.75vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(16) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(16) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(16) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-1 .container div:nth-child(17) { width: 1vmin; height: 0.75vmin; transform: translate3d(2vmin, -10.5vmin, 3vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(17) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-1 .container div:nth-child(17) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-1 .container div:nth-child(17) .container .left { width: 1vmin; height: 0.75vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(17) .container .right { width: 1vmin; height: 0.75vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(17) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(0.75vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(17) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(17) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(17) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-1 .container div:nth-child(18) { width: 1vmin; height: 0.75vmin; transform: translate3d(2vmin, -9vmin, 3vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(18) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-1 .container div:nth-child(18) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-1 .container div:nth-child(18) .container .left { width: 1vmin; height: 0.75vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(18) .container .right { width: 1vmin; height: 0.75vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(18) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(0.75vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(18) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(18) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(18) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-1 .container div:nth-child(19) { width: 1vmin; height: 0.75vmin; transform: translate3d(2vmin, -7.5vmin, 3vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(19) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-1 .container div:nth-child(19) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-1 .container div:nth-child(19) .container .left { width: 1vmin; height: 0.75vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(19) .container .right { width: 1vmin; height: 0.75vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(19) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(0.75vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(19) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(19) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(19) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-1 .container div:nth-child(20) { width: 1vmin; height: 0.75vmin; transform: translate3d(2vmin, -6vmin, 3vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(20) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-1 .container div:nth-child(20) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-1 .container div:nth-child(20) .container .left { width: 1vmin; height: 0.75vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(20) .container .right { width: 1vmin; height: 0.75vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(20) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(0.75vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(20) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(20) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #knight-black-1 .container div:nth-child(20) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } @keyframes move-knight-black-1 { 0%, 60% { transform: translate3d(8vmin, 0vmin, 28vmin); } 64% { transform: translate3d(8vmin, -20vmin, 28vmin); } 68% { transform: translate3d(16vmin, -20vmin, 12vmin); } 72%, 100% { transform: translate3d(16vmin, 0vmin, 12vmin); } } body .scene .chess .black #knight-black-2 { width: 7vmin; height: 14.5vmin; transform: translate3d(48vmin, 0vmin, 28vmin); animation: move-knight-black-2 25s ease-in-out 2s infinite; } body .scene .chess .black #knight-black-2 .container div:nth-child(1) { width: 3vmin; height: 4.5vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-2 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-2 .container div:nth-child(1) .container .left { width: 3vmin; height: 4.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(1) .container .right { width: 3vmin; height: 4.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(1) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(4.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(1) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(1) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 4.5vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(1) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 4.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-2 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-2 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-2 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(2) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(2) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(2) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(2) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-2 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-2 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-2 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(3) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(3) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(3) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(3) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-2 .container div:nth-child(4) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -4.5vmin, -0.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-2 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-2 .container div:nth-child(4) .container .left { width: 4vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(4) .container .right { width: 4vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2vmin) translateZ(3vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(4) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(4) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(4) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(4) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-2 .container div:nth-child(5) { width: 3vmin; height: 2vmin; transform: translate3d(1vmin, -5.5vmin, -1vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-2 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-2 .container div:nth-child(5) .container .left { width: 5vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(5) .container .right { width: 5vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(3vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(5) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(5) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(5) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(5) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-2 .container div:nth-child(6) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -7.5vmin, -0.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-2 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-2 .container div:nth-child(6) .container .left { width: 4vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(6) .container .right { width: 4vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2vmin) translateZ(3vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(6) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(6) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(6) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(6) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-2 .container div:nth-child(7) { width: 3vmin; height: 4vmin; transform: translate3d(1vmin, -8.5vmin, 0vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(7) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-2 .container div:nth-child(7) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-2 .container div:nth-child(7) .container .left { width: 3vmin; height: 4vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(7) .container .right { width: 3vmin; height: 4vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(7) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(4vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(7) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(7) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(7) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 4vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-2 .container div:nth-child(8) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -9.5vmin, -1vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(8) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-2 .container div:nth-child(8) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-2 .container div:nth-child(8) .container .left { width: 5vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(8) .container .right { width: 5vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(3vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(8) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(8) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(8) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(8) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-2 .container div:nth-child(9) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -11.5vmin, -0.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(9) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-2 .container div:nth-child(9) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-2 .container div:nth-child(9) .container .left { width: 4vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(9) .container .right { width: 4vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2vmin) translateZ(3vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(9) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(9) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(9) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(9) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-2 .container div:nth-child(10) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -10.5vmin, -2.75vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(10) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-2 .container div:nth-child(10) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-2 .container div:nth-child(10) .container .left { width: 1.5vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-0.75vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(10) .container .right { width: 1.5vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-0.75vmin) translateZ(3vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(10) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 1.5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.75vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(10) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 1.5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.75vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(10) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.75vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(10) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.75vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-2 .container div:nth-child(11) { width: 1vmin; height: 1vmin; transform: translate3d(2vmin, -12.5vmin, 0vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(11) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-2 .container div:nth-child(11) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-2 .container div:nth-child(11) .container .left { width: 5vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(11) .container .right { width: 5vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(11) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 1vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(11) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 1vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(11) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(11) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-2 .container div:nth-child(12) { width: 1vmin; height: 8vmin; transform: translate3d(2vmin, -5.5vmin, 2vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(12) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-2 .container div:nth-child(12) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-2 .container div:nth-child(12) .container .left { width: 1vmin; height: 8vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(12) .container .right { width: 1vmin; height: 8vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(12) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(8vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(12) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(12) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 1vmin; height: 8vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(12) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 1vmin; height: 8vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-2 .container div:nth-child(13) { width: 1vmin; height: 1vmin; transform: translate3d(2vmin, -13.5vmin, -1.75vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(13) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-2 .container div:nth-child(13) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-2 .container div:nth-child(13) .container .left { width: 0.75vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.375vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(13) .container .right { width: 0.75vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.375vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(13) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.375vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(13) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.375vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(13) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.375vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(13) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.375vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-2 .container div:nth-child(14) { width: 1vmin; height: 1vmin; transform: translate3d(2vmin, -13.5vmin, 0vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(14) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-2 .container div:nth-child(14) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-2 .container div:nth-child(14) .container .left { width: 0.75vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.375vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(14) .container .right { width: 0.75vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.375vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(14) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.375vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(14) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.375vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(14) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.375vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(14) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.375vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-2 .container div:nth-child(15) { width: 1vmin; height: 1vmin; transform: translate3d(2vmin, -13.5vmin, 1.75vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(15) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-2 .container div:nth-child(15) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-2 .container div:nth-child(15) .container .left { width: 0.75vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.375vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(15) .container .right { width: 0.75vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.375vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(15) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.375vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(15) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.375vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(15) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.375vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(15) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.375vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-2 .container div:nth-child(16) { width: 1vmin; height: 0.75vmin; transform: translate3d(2vmin, -12vmin, 3vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(16) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-2 .container div:nth-child(16) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-2 .container div:nth-child(16) .container .left { width: 1vmin; height: 0.75vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(16) .container .right { width: 1vmin; height: 0.75vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(16) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(0.75vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(16) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(16) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(16) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-2 .container div:nth-child(17) { width: 1vmin; height: 0.75vmin; transform: translate3d(2vmin, -10.5vmin, 3vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(17) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-2 .container div:nth-child(17) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-2 .container div:nth-child(17) .container .left { width: 1vmin; height: 0.75vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(17) .container .right { width: 1vmin; height: 0.75vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(17) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(0.75vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(17) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(17) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(17) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-2 .container div:nth-child(18) { width: 1vmin; height: 0.75vmin; transform: translate3d(2vmin, -9vmin, 3vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(18) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-2 .container div:nth-child(18) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-2 .container div:nth-child(18) .container .left { width: 1vmin; height: 0.75vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(18) .container .right { width: 1vmin; height: 0.75vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(18) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(0.75vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(18) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(18) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(18) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-2 .container div:nth-child(19) { width: 1vmin; height: 0.75vmin; transform: translate3d(2vmin, -7.5vmin, 3vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(19) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-2 .container div:nth-child(19) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-2 .container div:nth-child(19) .container .left { width: 1vmin; height: 0.75vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(19) .container .right { width: 1vmin; height: 0.75vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(19) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(0.75vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(19) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(19) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(19) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #knight-black-2 .container div:nth-child(20) { width: 1vmin; height: 0.75vmin; transform: translate3d(2vmin, -6vmin, 3vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(20) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #knight-black-2 .container div:nth-child(20) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #knight-black-2 .container div:nth-child(20) .container .left { width: 1vmin; height: 0.75vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(20) .container .right { width: 1vmin; height: 0.75vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(20) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(0.75vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(20) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(20) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #knight-black-2 .container div:nth-child(20) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 0.75vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } @keyframes move-knight-black-2 { 0%, 36% { transform: translate3d(48vmin, 0vmin, 28vmin); } 40% { transform: translate3d(48vmin, -20vmin, 28vmin); } 44% { transform: translate3d(40vmin, -20vmin, 12vmin); } 48%, 100% { transform: translate3d(40vmin, 0vmin, 12vmin); } } body .scene .chess .black #bishop-black-1 { width: 7vmin; height: 17vmin; transform: translate3d(16vmin, 0vmin, 28vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(1) { width: 3vmin; height: 13vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #bishop-black-1 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #bishop-black-1 .container div:nth-child(1) .container .left { width: 3vmin; height: 13vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(1) .container .right { width: 3vmin; height: 13vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(1) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(13vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(1) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(1) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 13vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(1) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 13vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #bishop-black-1 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #bishop-black-1 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #bishop-black-1 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(2) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(2) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(2) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(2) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #bishop-black-1 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #bishop-black-1 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #bishop-black-1 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(3) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(3) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(3) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(3) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #bishop-black-1 .container div:nth-child(4) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -8vmin, 0vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #bishop-black-1 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #bishop-black-1 .container div:nth-child(4) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(4) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(4) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(4) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(4) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(4) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #bishop-black-1 .container div:nth-child(5) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, -13vmin, 0vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #bishop-black-1 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #bishop-black-1 .container div:nth-child(5) .container .left { width: 3vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(5) .container .right { width: 3vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(5) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(2vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(5) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(5) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(5) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #bishop-black-1 .container div:nth-child(6) { width: 3vmin; height: 2vmin; transform: translate3d(1vmin, -13vmin, 0vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #bishop-black-1 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #bishop-black-1 .container div:nth-child(6) .container .left { width: 5vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(6) .container .right { width: 5vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(3vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(6) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(6) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(6) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(6) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #bishop-black-1 .container div:nth-child(7) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -15vmin, 0vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(7) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #bishop-black-1 .container div:nth-child(7) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #bishop-black-1 .container div:nth-child(7) .container .left { width: 3vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(7) .container .right { width: 3vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(7) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(1vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(7) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(7) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(7) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #bishop-black-1 .container div:nth-child(8) { width: 1vmin; height: 1vmin; transform: translate3d(2vmin, -16vmin, 0vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(8) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #bishop-black-1 .container div:nth-child(8) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #bishop-black-1 .container div:nth-child(8) .container .left { width: 1vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(8) .container .right { width: 1vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(8) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(1vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(8) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(8) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #bishop-black-1 .container div:nth-child(8) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #bishop-black-2 { width: 7vmin; height: 17vmin; transform: translate3d(40vmin, 0vmin, 28vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(1) { width: 3vmin; height: 13vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #bishop-black-2 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #bishop-black-2 .container div:nth-child(1) .container .left { width: 3vmin; height: 13vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(1) .container .right { width: 3vmin; height: 13vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(1) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(13vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(1) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(1) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 13vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(1) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 13vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #bishop-black-2 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #bishop-black-2 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #bishop-black-2 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(2) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(2) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(2) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(2) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #bishop-black-2 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #bishop-black-2 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #bishop-black-2 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(3) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(3) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(3) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(3) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #bishop-black-2 .container div:nth-child(4) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -8vmin, 0vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #bishop-black-2 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #bishop-black-2 .container div:nth-child(4) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(4) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(4) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(4) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(4) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(4) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #bishop-black-2 .container div:nth-child(5) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, -13vmin, 0vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #bishop-black-2 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #bishop-black-2 .container div:nth-child(5) .container .left { width: 3vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(5) .container .right { width: 3vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(5) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(2vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(5) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(5) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(5) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #bishop-black-2 .container div:nth-child(6) { width: 3vmin; height: 2vmin; transform: translate3d(1vmin, -13vmin, 0vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #bishop-black-2 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #bishop-black-2 .container div:nth-child(6) .container .left { width: 5vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(6) .container .right { width: 5vmin; height: 2vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(3vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(6) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(6) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(6) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(6) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #bishop-black-2 .container div:nth-child(7) { width: 3vmin; height: 1vmin; transform: translate3d(1vmin, -15vmin, 0vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(7) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #bishop-black-2 .container div:nth-child(7) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #bishop-black-2 .container div:nth-child(7) .container .left { width: 3vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(7) .container .right { width: 3vmin; height: 1vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(7) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(1vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(7) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(7) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(7) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #bishop-black-2 .container div:nth-child(8) { width: 1vmin; height: 1vmin; transform: translate3d(2vmin, -16vmin, 0vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(8) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #bishop-black-2 .container div:nth-child(8) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #bishop-black-2 .container div:nth-child(8) .container .left { width: 1vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-0.5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(8) .container .right { width: 1vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(8) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(0.5vmin) translateZ(1vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(8) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(0.5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(8) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(0.5vmin); } body .scene .chess .black #bishop-black-2 .container div:nth-child(8) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 1vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-1 { width: 7vmin; height: 9vmin; transform: translate3d(0vmin, 0vmin, 20vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(1) { width: 3vmin; height: 4vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-1 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-1 .container div:nth-child(1) .container .left { width: 3vmin; height: 4vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(1) .container .right { width: 3vmin; height: 4vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(1) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(4vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(1) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(1) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(1) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 4vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-1 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-1 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-1 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(2) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(2) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(2) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(2) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-1 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-1 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-1 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(3) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(3) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(3) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(3) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-1 .container div:nth-child(4) { width: 2vmin; height: 9vmin; transform: translate3d(1.5vmin, 0vmin, 0vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-1 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-1 .container div:nth-child(4) .container .left { width: 2vmin; height: 9vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(4) .container .right { width: 2vmin; height: 9vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(4) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(9vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(4) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(4) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 9vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(4) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 9vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-1 .container div:nth-child(5) { width: 2vmin; height: 1.5vmin; transform: translate3d(1.5vmin, -6vmin, 0vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-1 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-1 .container div:nth-child(5) .container .left { width: 5vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(5) .container .right { width: 5vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(2vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(5) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1.5vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(5) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(5) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(5) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-1 .container div:nth-child(6) { width: 5vmin; height: 1.5vmin; transform: translate3d(0vmin, -6vmin, 0vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-1 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-1 .container div:nth-child(6) .container .left { width: 2vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(6) .container .right { width: 2vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(5vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(6) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(1.5vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(6) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(6) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .black #pawn-black-1 .container div:nth-child(6) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-2 { width: 7vmin; height: 9vmin; transform: translate3d(8vmin, 0vmin, 20vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(1) { width: 3vmin; height: 4vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-2 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-2 .container div:nth-child(1) .container .left { width: 3vmin; height: 4vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(1) .container .right { width: 3vmin; height: 4vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(1) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(4vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(1) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(1) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(1) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 4vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-2 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-2 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-2 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(2) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(2) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(2) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(2) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-2 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-2 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-2 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(3) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(3) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(3) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(3) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-2 .container div:nth-child(4) { width: 2vmin; height: 9vmin; transform: translate3d(1.5vmin, 0vmin, 0vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-2 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-2 .container div:nth-child(4) .container .left { width: 2vmin; height: 9vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(4) .container .right { width: 2vmin; height: 9vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(4) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(9vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(4) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(4) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 9vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(4) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 9vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-2 .container div:nth-child(5) { width: 2vmin; height: 1.5vmin; transform: translate3d(1.5vmin, -6vmin, 0vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-2 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-2 .container div:nth-child(5) .container .left { width: 5vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(5) .container .right { width: 5vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(2vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(5) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1.5vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(5) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(5) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(5) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-2 .container div:nth-child(6) { width: 5vmin; height: 1.5vmin; transform: translate3d(0vmin, -6vmin, 0vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-2 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-2 .container div:nth-child(6) .container .left { width: 2vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(6) .container .right { width: 2vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(5vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(6) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(1.5vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(6) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(6) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .black #pawn-black-2 .container div:nth-child(6) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-3 { width: 7vmin; height: 9vmin; transform: translate3d(16vmin, 0vmin, 20vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(1) { width: 3vmin; height: 4vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-3 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-3 .container div:nth-child(1) .container .left { width: 3vmin; height: 4vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(1) .container .right { width: 3vmin; height: 4vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(1) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(4vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(1) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(1) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(1) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 4vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-3 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-3 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-3 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(2) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(2) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(2) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(2) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-3 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-3 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-3 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(3) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(3) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(3) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(3) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-3 .container div:nth-child(4) { width: 2vmin; height: 9vmin; transform: translate3d(1.5vmin, 0vmin, 0vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-3 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-3 .container div:nth-child(4) .container .left { width: 2vmin; height: 9vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(4) .container .right { width: 2vmin; height: 9vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(4) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(9vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(4) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(4) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 9vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(4) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 9vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-3 .container div:nth-child(5) { width: 2vmin; height: 1.5vmin; transform: translate3d(1.5vmin, -6vmin, 0vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-3 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-3 .container div:nth-child(5) .container .left { width: 5vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(5) .container .right { width: 5vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(2vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(5) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1.5vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(5) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(5) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(5) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-3 .container div:nth-child(6) { width: 5vmin; height: 1.5vmin; transform: translate3d(0vmin, -6vmin, 0vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-3 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-3 .container div:nth-child(6) .container .left { width: 2vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(6) .container .right { width: 2vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(5vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(6) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(1.5vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(6) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(6) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .black #pawn-black-3 .container div:nth-child(6) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-4 { width: 7vmin; height: 9vmin; transform: translate3d(24vmin, 0vmin, 20vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(1) { width: 3vmin; height: 4vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-4 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-4 .container div:nth-child(1) .container .left { width: 3vmin; height: 4vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(1) .container .right { width: 3vmin; height: 4vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(1) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(4vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(1) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(1) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(1) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 4vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-4 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-4 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-4 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(2) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(2) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(2) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(2) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-4 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-4 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-4 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(3) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(3) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(3) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(3) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-4 .container div:nth-child(4) { width: 2vmin; height: 9vmin; transform: translate3d(1.5vmin, 0vmin, 0vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-4 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-4 .container div:nth-child(4) .container .left { width: 2vmin; height: 9vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(4) .container .right { width: 2vmin; height: 9vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(4) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(9vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(4) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(4) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 9vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(4) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 9vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-4 .container div:nth-child(5) { width: 2vmin; height: 1.5vmin; transform: translate3d(1.5vmin, -6vmin, 0vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-4 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-4 .container div:nth-child(5) .container .left { width: 5vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(5) .container .right { width: 5vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(2vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(5) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1.5vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(5) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(5) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(5) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-4 .container div:nth-child(6) { width: 5vmin; height: 1.5vmin; transform: translate3d(0vmin, -6vmin, 0vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-4 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-4 .container div:nth-child(6) .container .left { width: 2vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(6) .container .right { width: 2vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(5vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(6) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(1.5vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(6) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(6) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .black #pawn-black-4 .container div:nth-child(6) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-5 { width: 7vmin; height: 9vmin; transform: translate3d(32vmin, 0vmin, 20vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(1) { width: 3vmin; height: 4vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-5 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-5 .container div:nth-child(1) .container .left { width: 3vmin; height: 4vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(1) .container .right { width: 3vmin; height: 4vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(1) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(4vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(1) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(1) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(1) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 4vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-5 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-5 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-5 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(2) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(2) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(2) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(2) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-5 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-5 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-5 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(3) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(3) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(3) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(3) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-5 .container div:nth-child(4) { width: 2vmin; height: 9vmin; transform: translate3d(1.5vmin, 0vmin, 0vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-5 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-5 .container div:nth-child(4) .container .left { width: 2vmin; height: 9vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(4) .container .right { width: 2vmin; height: 9vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(4) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(9vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(4) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(4) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 9vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(4) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 9vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-5 .container div:nth-child(5) { width: 2vmin; height: 1.5vmin; transform: translate3d(1.5vmin, -6vmin, 0vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-5 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-5 .container div:nth-child(5) .container .left { width: 5vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(5) .container .right { width: 5vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(2vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(5) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1.5vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(5) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(5) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(5) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-5 .container div:nth-child(6) { width: 5vmin; height: 1.5vmin; transform: translate3d(0vmin, -6vmin, 0vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-5 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-5 .container div:nth-child(6) .container .left { width: 2vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(6) .container .right { width: 2vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(5vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(6) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(1.5vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(6) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(6) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .black #pawn-black-5 .container div:nth-child(6) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-6 { width: 7vmin; height: 9vmin; transform: translate3d(40vmin, 0vmin, 20vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(1) { width: 3vmin; height: 4vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-6 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-6 .container div:nth-child(1) .container .left { width: 3vmin; height: 4vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(1) .container .right { width: 3vmin; height: 4vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(1) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(4vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(1) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(1) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(1) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 4vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-6 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-6 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-6 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(2) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(2) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(2) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(2) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-6 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-6 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-6 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(3) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(3) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(3) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(3) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-6 .container div:nth-child(4) { width: 2vmin; height: 9vmin; transform: translate3d(1.5vmin, 0vmin, 0vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-6 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-6 .container div:nth-child(4) .container .left { width: 2vmin; height: 9vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(4) .container .right { width: 2vmin; height: 9vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(4) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(9vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(4) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(4) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 9vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(4) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 9vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-6 .container div:nth-child(5) { width: 2vmin; height: 1.5vmin; transform: translate3d(1.5vmin, -6vmin, 0vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-6 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-6 .container div:nth-child(5) .container .left { width: 5vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(5) .container .right { width: 5vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(2vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(5) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1.5vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(5) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(5) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(5) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-6 .container div:nth-child(6) { width: 5vmin; height: 1.5vmin; transform: translate3d(0vmin, -6vmin, 0vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-6 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-6 .container div:nth-child(6) .container .left { width: 2vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(6) .container .right { width: 2vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(5vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(6) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(1.5vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(6) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(6) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .black #pawn-black-6 .container div:nth-child(6) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-7 { width: 7vmin; height: 9vmin; transform: translate3d(48vmin, 0vmin, 20vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(1) { width: 3vmin; height: 4vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-7 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-7 .container div:nth-child(1) .container .left { width: 3vmin; height: 4vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(1) .container .right { width: 3vmin; height: 4vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(1) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(4vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(1) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(1) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(1) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 4vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-7 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-7 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-7 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(2) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(2) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(2) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(2) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-7 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-7 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-7 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(3) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(3) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(3) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(3) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-7 .container div:nth-child(4) { width: 2vmin; height: 9vmin; transform: translate3d(1.5vmin, 0vmin, 0vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-7 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-7 .container div:nth-child(4) .container .left { width: 2vmin; height: 9vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(4) .container .right { width: 2vmin; height: 9vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(4) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(9vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(4) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(4) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 9vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(4) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 9vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-7 .container div:nth-child(5) { width: 2vmin; height: 1.5vmin; transform: translate3d(1.5vmin, -6vmin, 0vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-7 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-7 .container div:nth-child(5) .container .left { width: 5vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(5) .container .right { width: 5vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(2vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(5) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1.5vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(5) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(5) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(5) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-7 .container div:nth-child(6) { width: 5vmin; height: 1.5vmin; transform: translate3d(0vmin, -6vmin, 0vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-7 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-7 .container div:nth-child(6) .container .left { width: 2vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(6) .container .right { width: 2vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(5vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(6) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(1.5vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(6) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(6) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .black #pawn-black-7 .container div:nth-child(6) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-8 { width: 7vmin; height: 9vmin; transform: translate3d(56vmin, 0vmin, 20vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(1) { width: 3vmin; height: 4vmin; transform: translate3d(1vmin, 0vmin, 0vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(1) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-8 .container div:nth-child(1) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-8 .container div:nth-child(1) .container .left { width: 3vmin; height: 4vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1.5vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(1) .container .right { width: 3vmin; height: 4vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1.5vmin) translateZ(3vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(1) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1.5vmin) translateZ(4vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(1) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 3vmin; height: 3vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1.5vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(1) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 4vmin; transform-origin: bottom left; transform: translateZ(1.5vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(1) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 3vmin; height: 4vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-8 .container div:nth-child(2) { width: 5vmin; height: 2vmin; transform: translate3d(0vmin, 0vmin, 0vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(2) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-8 .container div:nth-child(2) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-8 .container div:nth-child(2) .container .left { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(2) .container .right { width: 5vmin; height: 2vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(2) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(2vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(2) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(2) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(2) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 2vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-8 .container div:nth-child(3) { width: 5vmin; height: 1vmin; transform: translate3d(0vmin, -2.5vmin, 0vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(3) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-8 .container div:nth-child(3) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-8 .container div:nth-child(3) .container .left { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(3) .container .right { width: 5vmin; height: 1vmin; background-color: rgba(51, 51, 51, 0.8); transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(5vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(3) .container .top { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(3) .container .bottom { background-color: rgba(64, 64, 64, 0.8); width: 5vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(3) .container .front { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(3) .container .back { background-color: rgba(26, 26, 26, 0.8); width: 5vmin; height: 1vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-8 .container div:nth-child(4) { width: 2vmin; height: 9vmin; transform: translate3d(1.5vmin, 0vmin, 0vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(4) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-8 .container div:nth-child(4) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-8 .container div:nth-child(4) .container .left { width: 2vmin; height: 9vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(4) .container .right { width: 2vmin; height: 9vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(4) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(9vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(4) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(4) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 9vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(4) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 9vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-8 .container div:nth-child(5) { width: 2vmin; height: 1.5vmin; transform: translate3d(1.5vmin, -6vmin, 0vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(5) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-8 .container div:nth-child(5) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-8 .container div:nth-child(5) .container .left { width: 5vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-2.5vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(5) .container .right { width: 5vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-2.5vmin) translateZ(2vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(5) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(2.5vmin) translateZ(1.5vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(5) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 2vmin; height: 5vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(2.5vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(5) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(2.5vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(5) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 2vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(2.5vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-8 .container div:nth-child(6) { width: 5vmin; height: 1.5vmin; transform: translate3d(0vmin, -6vmin, 0vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(6) .container { position: relative; width: 100%; height: 100%; } body .scene .chess .black #pawn-black-8 .container div:nth-child(6) .container * { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } body .scene .chess .black #pawn-black-8 .container div:nth-child(6) .container .left { width: 2vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(-90deg) translateX(-1vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(6) .container .right { width: 2vmin; height: 1.5vmin; background-color: #404040cc; transform-origin: left top; transform: rotateY(90deg) translateX(-1vmin) translateZ(5vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(6) .container .top { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(90deg) translateY(1vmin) translateZ(1.5vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(6) .container .bottom { background-color: rgba(77, 77, 77, 0.8); width: 5vmin; height: 2vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateY(1vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(6) .container .front { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: bottom left; transform: translateZ(1vmin); } body .scene .chess .black #pawn-black-8 .container div:nth-child(6) .container .back { background-color: rgba(39, 39, 39, 0.8); width: 5vmin; height: 1.5vmin; transform-origin: center; transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg); } body .scene .chess .black #pawn-black-4 { animation: move-pawn-black-4 25s ease-in-out 2s infinite; } @keyframes move-pawn-black-4 { 0%, 12% { transform: translate3d(24vmin, 0vmin, 20vmin); } 16% { transform: translate3d(24vmin, -10vmin, 20vmin); } 20% { transform: translate3d(24vmin, -10vmin, 4vmin); } 24%, 100% { transform: translate3d(24vmin, 0vmin, 4vmin); } } body .scene .chess .black #pawn-black-3 { animation: move-pawn-black-3 25s ease-in-out 2s infinite; } @keyframes move-pawn-black-3 { 0%, 80%, 100% { visibility: visible; } 80%, 99% { visibility: hidden; } } `; document.head.appendChild(style); </script> <!--JavaScript only used to get a nice thumbnail for KA--> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> <script type="module"> function saveThumbnail() { html2canvas(document.body, { onrendered: function(canvas) { b64Img = canvas.toDataURL(); window.top.postMessage(b64Img, "https://www.khanacademy.org/"); }, allowTaint : false, useCORS: true, width:window.innerWidth, height:window.innerWidth }); }; function save() { document.body.innerHTML = ` <link href="https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&display=swap" rel="stylesheet"> <style> body { min-height: 100vh; overflow: hidden; margin: 0; background: #6FD0C6; color: white; font-size: 8vw; font-family: 'Kdam Thmor Pro', sans-serif; } main { height: 100vh; display: flex; justify-content: center; flex-direction: column; align-items: center; } </style> <main> <div>3D Chess (Animated)</div> <div>HTML/CSS only</div> </main>`; saveThumbnail(); } document.body.addEventListener("keydown", (e) => { if(e.keyCode === 83) { //S key save(); } }); </script><!--<script>--> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgOOM457pCgw
Votes	174
Spin-Offs	19
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Gray Wolf 🐺
Author Name	grantjenkins
Author ID	kaid_639291037700385781852565
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739453440565
Updated	10 months ago, 1739453448057
Source Deleted	unknown