<commit_before>@import url('//fonts.googleapis.com/css?family=Dosis|Candal');


$piece-color-1: #4A90E2;
$piece-color-2: #F5A623;

body {
	font-family: 'Dosis', sans-serif;
	padding-top: 60px;
}

.container {
  max-width: 600px;
}

h1, h2 {
	font-family: 'Candal', sans-serif;
	margin-bottom: 36px;
}

.jumbotron {
	text-align: center;
}

.text-center {
  text-align: center;
}

.board {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
	height: 480px;
}
.column {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-around;
}
.piece {
	display: block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
  border: 1px solid white;
	cursor: pointer;
	text-decoration: none;
  transition: all 0.2s;
  @for $i from 1 through 30 {
    &:nth-of-type(#{$i}) {
      transition-delay: 50ms * $i;
    }
  }

  &:focus {
    text-decoration: none;
    outline: none;
  }
}
.piece-empty {
	background: #E7E7E7;
}
[class*="piece-"] {
  &:hover {
    text-decoration: none;
  }
}
[class*="piece-player-"] {
  box-shadow: inset 0px 0px 16px 0px rgba(0,0,0,0.16);

  &:hover {
    box-shadow: none;
  }
}
.piece-player-1 {
	background: $piece-color-1;
  &:hover {
    background: $piece-color-1;
  }
}
.piece-player-2 {
	background: $piece-color-2;
  &:hover {
    background: $piece-color-2;
  }
}
.column-hovered-player-1 {
  .piece-empty {
    background: $piece-color-1;
  }
}
.column-hovered-player-2 {
  .piece-empty {
    background: $piece-color-2;
  }
}




// Modal
.ReactModal__Overlay {
  -webkit-perspective: 600;
  perspective: 600;
  opacity: 0;
}

.ReactModal__Overlay--after-open {
  opacity: 1;
  transition: opacity 150ms ease-out;
}<commit_msg>improved piece transitions and styling<commit_after>@import url('//fonts.googleapis.com/css?family=Dosis|Candal');

$piece-empty-color: #E7E7E7;
$piece-color-1: #4A90E2;
$piece-color-2: #F5A623;

body {
	font-family: 'Dosis', sans-serif;
	padding-top: 60px;
}

.container {
  max-width: 600px;
}

h1, h2 {
	font-family: 'Candal', sans-serif;
	margin-bottom: 36px;
}

.jumbotron {
	text-align: center;
}

.text-center {
  text-align: center;
}

.board {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
	height: 480px;
}
.column {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-around;
}
.piece {
	display: block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
  border: 2px solid white;
  background: $piece-empty-color;
	cursor: pointer;
	text-decoration: none;
  transition: all 0.2s ease-out;
  @for $i from 1 through 30 {
    &:nth-of-type(#{$i}) {
      transition-delay: 50ms * $i;
    }
  }

  &:focus {
    text-decoration: none;
    outline: none;
  }
}
[class*="piece-player-"] {
  box-shadow: inset 0px 0px 16px 0px rgba(0,0,0,0.5);
  &:hover {
    box-shadow: none;
  }
}
.piece-player-1 {
	background: $piece-color-1;
  transform: scaleX(1.1) scaleY(1.1);
  &:hover {
    background: $piece-color-1;
  }
}
.piece-player-2 {
	background: $piece-color-2;
  transform: scaleX(1.1) scaleY(1.1);
  &:hover {
    background: $piece-color-2;
  }
}
.column-hovered-player-1 {
  .piece-empty {
    border: 2px solid $piece-color-1;
    background: lighten($piece-empty-color, .5);
  }
}
.column-hovered-player-2 {
  .piece-empty {
    border: 2px solid $piece-color-2;
    background: lighten($piece-empty-color, .5);
  }
}




// Modal
.ReactModal__Overlay {
  -webkit-perspective: 600;
  perspective: 600;
  opacity: 0;
}

.ReactModal__Overlay--after-open {
  opacity: 1;
  transition: opacity 150ms ease-out;
}
{'fraction_non_alphanumeric': 0.1718837339295696, 'fraction_numerical': 0.04276131917272219, 'mean_word_length': 3.2255017709563165, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3787593', 'n_tokens_mistral': 1598, 'n_tokens_neox': 1490, 'n_words': 286}