cm-chessboard-eight-queens-puzzle/assets/styles/eight-queens-puzzle.css

TheeEight queens puzzle as an extensions for the cm-chessboard

.board-eight-queens .html-layer {
  background-color: rgba(0, 0, 0, 0.4); }
  .board-eight-queens .html-layer .text {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.2;
    color: #ffea64;
    font-weight: bold;
    font-size: 8vw;
    cursor: pointer;
    text-shadow: 0 0 10px #000, 0 0 5px rgba(0, 0, 0, 0.5); }

.board-eight-queens .fx-won {
  animation: won 1s ease-in-out; }

@keyframes won {
  from {
    scale: 0; }
  to {
    scale: 1; } }

.board-eight-queens .fx-fade-in {
  animation: fade-in 1s ease-in-out; }

@keyframes fade-in {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.board-eight-queens .fx-fade-out {
  animation: fade-out 1s ease-in-out; }

@keyframes fade-out {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

.board-eight-queens .fx-vanish {
  animation: vanish 1s ease-in-out; }

@keyframes vanish {
  from {
    opacity: 1;
    scale: 1; }
  to {
    opacity: 0;
    scale: 2; } }

@media (prefers-reduced-motion: reduce) {
  .board-eight-queens .fx-won,
  .board-eight-queens .fx-vanish {
    animation: none; } }

/*# sourceMappingURL=eight-queens-puzzle.css.map */