@charset "UTF-8";
body {
  background: white;
  overflow: hidden; }

.game {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background: linear-gradient(-45deg, #094005 10%, rgba(0, 0, 0, 0) 60%), linear-gradient(-45deg, #14c428 10%, #066612 10%);
  font-family: 'Roboto';
  display: flex;
  justify-content: center;
  align-items: center; }

.game:after {
  content: ' ';
  background: linear-gradient(-45deg, rgba(0, 0, 0, 0) 10%, rgba(28, 81, 17, 0.5) 49.9%, rgba(46, 128, 35, 0.5) 50%, rgba(0, 0, 0, 0) 60%), linear-gradient(-45deg, rgba(28, 81, 17, 0.5) 10%, rgba(0, 0, 0, 0) 10%), radial-gradient(circle, #1a7329 0%, rgba(0, 0, 0, 0.5) 100%);
  background-size: 0.3em 0.3em;
  width: 100%;
  height: 100%; }

.game:before {
  content: ' ';
  background: radial-gradient(circle, rgba(211, 230, 85, 0.4) 0%, #09350b 100%);
  background-position: 50% 50%;
  width: 100%;
  height: 100%;
  position: absolute; }

.game__card {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 150px;
  border: 1px solid #f0edf4;
  border-radius: 5px;
  white-space: pre;
  background: white;
  margin-left: -50px;
  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.8), -5px -10px 60px rgba(255, 255, 255, 0.1); }

.game__player_board .game__card {
  cursor: pointer; }

.game__player_board .game__card:hover {
  top: -10px; }

.game__player2_board .center_player {
  box-shadow: -5px -10px 20px rgba(0, 0, 0, 0.8), -5px -10px 60px rgba(255, 255, 255, 0.1); }

.game__player2_board .game__card:after {
  transform: rotateZ(180deg); }

.game__player2_board .game__card:before {
  transform: rotateZ(180deg); }

.game__caption {
  position: absolute;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 120px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 36px;
  text-shadow: rgba(255, 250, 177, 0.1) 5px 0px 10px;
  z-index: 100; }

.game__caption:nth-child(1) {
  top: 0;
  left: 0;
  right: 0;
  transform: scale(0.6) translateY(126px);
  transform-origin: bottom; }

.game__caption:nth-child(2) {
  bottom: 20px;
  left: 0;
  right: 0;
  transform: scale(0.6) translateY(-210px);
  transform-origin: top;
  z-index: 102; }

.game__caption:nth-child(3) {
  left: 0;
  top: 0;
  bottom: 0;
  transform: scale(0.6) translate(130px, -50px); }

.game__caption:nth-child(4) {
  right: 0;
  top: 0;
  bottom: 0;
  transform: scale(0.6) translate(-130px, -50px); }

.game__caption:after, .game__caption:before {
  position: absolute;
  margin: auto;
  font-size: 2em;
  text-align: center; }

.game__caption:after {
  bottom: -20px;
  content: "\1F664\1F666"; }

.game__caption:before {
  top: -40px;
  content: "\1F65E\1F65C"; }

.my_name {
  position: absolute;
  width: 180px;
  height: 40px;
  text-align: center;
  cursor: text;
  overflow: hidden;
  z-index: 100; }

.my_name:empty:before {
  content: "Type name"; }

.score {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -30px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(-60deg, #939393 10%, #c6c6c2 40%, #ccc1c1 50%, #b6b7a8 60%);
  margin: auto;
  z-index: 1;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.8), 5px 10px 10px; }

.game__caption:nth-child(1) .score {
  box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.8), -1px 5px 10px; }

.game__caption:nth-child(2) .score {
  background: linear-gradient(-60deg, #ffaf1e 10%, #dbdf62 40%, #f9dc67 50%, #d4d94a 60%); }

.game__caption:nth-child(3) .score {
  box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.8), -1px 5px 10px; }

.score::after {
  background: radial-gradient(circle, rgba(66, 65, 65, 0.1) 0%, rgba(66, 65, 65, 0.1) 50%, rgba(66, 65, 65, 0.3) 55%, rgba(0, 0, 0, 0.1) 70%, #fdfcf9 100%);
  content: "1/10";
  position: absolute;
  width: 70px;
  height: 70px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 50%;
  font-size: 0.7em;
  text-align: center;
  line-height: 70px;
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3); }

.game__table {
  position: absolute;
  width: 1000px;
  height: 750px; }

.game__player_board, .game__player2_board, .game__player3_board, .game__player4_board {
  height: 150px; }

.game__player_board, .game__player2_board {
  z-index: 103; }

.game__player_board, .game__player2_board, .game__player3_board, .game__player4_board {
  position: absolute;
  margin: auto;
  display: flex;
  justify-content: center;
  padding-left: 50px; }

.game__player_board, .game__player4_board {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) scale(1.2); }

.game__player2_board, .game__player3_board {
  left: 50%;
  top: 0;
  transform: translateX(-50%) scale(-0.6); }

.game__player4_board {
  transform: translateX(-50%) scale(0.6); }

.game__side_players {
  transform: rotateZ(-90deg);
  width: 500px;
  height: 1000px;
  left: 50%;
  position: absolute;
  top: 100px;
  transform-origin: left;
  z-index: 101; }

.center_player {
  animation: move_card 1000ms; }

.game__player2_board .center_player {
  animation: move_card2 1000ms; }

.game__player3_board .center_player {
  animation: move_card3 1000ms; }

.game__player4_board .center_player {
  animation: move_card4 1000ms; }

.center_player, .game__player2_board .center_player, .game__player3_board .center_player, .game__player4_board .center_player {
  position: absolute;
  animation-fill-mode: forwards; }

.center_player:nth-child(0) {
  left: 0%;
  top: 0; }

.center_player:nth-child(1) {
  left: 7.6923076923%;
  top: 0; }

.center_player:nth-child(2) {
  left: 15.3846153846%;
  top: 0; }

.center_player:nth-child(3) {
  left: 23.0769230769%;
  top: 0; }

.center_player:nth-child(4) {
  left: 30.7692307692%;
  top: 0; }

.center_player:nth-child(5) {
  left: 38.4615384615%;
  top: 0; }

.center_player:nth-child(6) {
  left: 46.1538461538%;
  top: 0; }

.center_player:nth-child(7) {
  left: 53.8461538462%;
  top: 0; }

.center_player:nth-child(8) {
  left: 61.5384615385%;
  top: 0; }

.center_player:nth-child(9) {
  left: 69.2307692308%;
  top: 0; }

.center_player:nth-child(10) {
  left: 76.9230769231%;
  top: 0; }

.center_player:nth-child(11) {
  left: 84.6153846154%;
  top: 0; }

.center_player:nth-child(12) {
  left: 92.3076923077%;
  top: 0; }

.center_player:nth-child(13) {
  left: 100%;
  top: 0; }

.diams, .spades, .hearts, .clubs {
  text-align: center;
  font-size: 27px;
  padding-top: 25px;
  box-sizing: border-box; }

.diams, .hearts {
  color: red; }

.rank-jack:before, .rank-queen:before, .rank-king:before, .rank-ace:before, .rank-2:before, .rank-3:before, .rank-4:before, .rank-5:before, .rank-6:before, .rank-7:before, .rank-8:before, .rank-9:before, .rank-10:before {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  text-align: left;
  font-size: 18.9px; }

.rank-jack:after, .rank-queen:after, .rank-king:after, .rank-ace:after, .rank-2:after, .rank-3:after, .rank-4:after, .rank-5:after, .rank-6:after, .rank-7:after, .rank-8:after, .rank-9:after, .rank-10:after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 70%; }

.rank-jack:after, .rank-jack:before, .rank-queen:after, .rank-queen:before, .rank-king:after, .rank-king:before {
  position: absolute;
  content: '';
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto; }

.rank-jack:after {
  background: url(jack.svg); }

.rank-queen:after {
  background: url(queen.svg); }

.rank-king:after {
  background: url(king.svg); }

.rank-ace:after {
  font-size: 80px; }

.rank-jack:after, .rank-queen:after, .rank-king:after {
  border-radius: 5px;
  background-size: 60px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  text-align: left;
  font-size: 18.9px;
  width: 100%;
  height: 100%; }

.game__card_back {
  background: linear-gradient(-45deg, #574c4c 10%, #78638a 49.9%, #695da2 50%, rgba(0, 0, 0, 0) 60%), linear-gradient(-45deg, #4e3e86 10%, #292346 10%);
  background-position: 50% 49.5%; }

.game__card_back:before, .game__card_back:after {
  content: ""; }

.diams.rank-jack.game__card_back:before, .diams.rank-jack.game__card_back:after,
.diams.rank-queen.game__card_back:before, .diams.rank-queen.game__card_back:after,
.diams.rank-king.game__card_back:before, .diams.rank-king.game__card_back:after,
.diams.rank-ace.game__card_back:before, .diams.rank-ace.game__card_back:after,
.diams.rank-2.game__card_back:before, .diams.rank-2.game__card_back:after,
.diams.rank-3.game__card_back:before, .diams.rank-3.game__card_back:after,
.diams.rank-4.game__card_back:before, .diams.rank-4.game__card_back:after,
.diams.rank-5.game__card_back:before, .diams.rank-5.game__card_back:after,
.diams.rank-6.game__card_back:before, .diams.rank-6.game__card_back:after,
.diams.rank-7.game__card_back:before, .diams.rank-7.game__card_back:after,
.diams.rank-8.game__card_back:before, .diams.rank-8.game__card_back:after,
.diams.rank-9.game__card_back:before, .diams.rank-9.game__card_back:after,
.diams.rank-10.game__card_back:before, .diams.rank-10.game__card_back:after,
.spades.rank-jack.game__card_back:before, .spades.rank-jack.game__card_back:after,
.spades.rank-queen.game__card_back:before, .spades.rank-queen.game__card_back:after,
.spades.rank-king.game__card_back:before, .spades.rank-king.game__card_back:after,
.spades.rank-ace.game__card_back:before, .spades.rank-ace.game__card_back:after,
.spades.rank-2.game__card_back:before, .spades.rank-2.game__card_back:after,
.spades.rank-3.game__card_back:before, .spades.rank-3.game__card_back:after,
.spades.rank-4.game__card_back:before, .spades.rank-4.game__card_back:after,
.spades.rank-5.game__card_back:before, .spades.rank-5.game__card_back:after,
.spades.rank-6.game__card_back:before, .spades.rank-6.game__card_back:after,
.spades.rank-7.game__card_back:before, .spades.rank-7.game__card_back:after,
.spades.rank-8.game__card_back:before, .spades.rank-8.game__card_back:after,
.spades.rank-9.game__card_back:before, .spades.rank-9.game__card_back:after,
.spades.rank-10.game__card_back:before, .spades.rank-10.game__card_back:after,
.hearts.rank-jack.game__card_back:before, .hearts.rank-jack.game__card_back:after,
.hearts.rank-queen.game__card_back:before, .hearts.rank-queen.game__card_back:after,
.hearts.rank-king.game__card_back:before, .hearts.rank-king.game__card_back:after,
.hearts.rank-ace.game__card_back:before, .hearts.rank-ace.game__card_back:after,
.hearts.rank-2.game__card_back:before, .hearts.rank-2.game__card_back:after,
.hearts.rank-3.game__card_back:before, .hearts.rank-3.game__card_back:after,
.hearts.rank-4.game__card_back:before, .hearts.rank-4.game__card_back:after,
.hearts.rank-5.game__card_back:before, .hearts.rank-5.game__card_back:after,
.hearts.rank-6.game__card_back:before, .hearts.rank-6.game__card_back:after,
.hearts.rank-7.game__card_back:before, .hearts.rank-7.game__card_back:after,
.hearts.rank-8.game__card_back:before, .hearts.rank-8.game__card_back:after,
.hearts.rank-9.game__card_back:before, .hearts.rank-9.game__card_back:after,
.hearts.rank-10.game__card_back:before, .hearts.rank-10.game__card_back:after,
.clubs.rank-jack.game__card_back:before, .clubs.rank-jack.game__card_back:after,
.clubs.rank-queen.game__card_back:before, .clubs.rank-queen.game__card_back:after,
.clubs.rank-king.game__card_back:before, .clubs.rank-king.game__card_back:after,
.clubs.rank-ace.game__card_back:before, .clubs.rank-ace.game__card_back:after,
.clubs.rank-2.game__card_back:before, .clubs.rank-2.game__card_back:after,
.clubs.rank-3.game__card_back:before, .clubs.rank-3.game__card_back:after,
.clubs.rank-4.game__card_back:before, .clubs.rank-4.game__card_back:after,
.clubs.rank-5.game__card_back:before, .clubs.rank-5.game__card_back:after,
.clubs.rank-6.game__card_back:before, .clubs.rank-6.game__card_back:after,
.clubs.rank-7.game__card_back:before, .clubs.rank-7.game__card_back:after,
.clubs.rank-8.game__card_back:before, .clubs.rank-8.game__card_back:after,
.clubs.rank-9.game__card_back:before, .clubs.rank-9.game__card_back:after,
.clubs.rank-10.game__card_back:before, .clubs.rank-10.game__card_back:after {
  content: "";
  background: none;
  border: none; }

.diams.rank-2:after {
  content: "♦\a \a♦"; }

.diams.rank-2:before {
  content: " 2"; }

.diams.rank-3:after {
  content: "♦\a♦\a♦"; }

.diams.rank-3:before {
  content: " 3"; }

.diams.rank-4:after {
  content: "♦   ♦\a \a♦   ♦"; }

.diams.rank-4:before {
  content: " 4"; }

.diams.rank-5:after {
  content: "♦   ♦\a♦\a♦   ♦"; }

.diams.rank-5:before {
  content: " 5"; }

.diams.rank-6:after {
  content: "♦   ♦\a♦   ♦\a♦   ♦"; }

.diams.rank-6:before {
  content: " 6"; }

.diams.rank-7:after {
  content: "♦  ♦\a♦ ♦ ♦\a♦  ♦"; }

.diams.rank-7:before {
  content: " 7"; }

.diams.rank-8:after {
  content: "♦ ♦ ♦\a♦  ♦\a♦ ♦ ♦"; }

.diams.rank-8:before {
  content: " 8"; }

.diams.rank-9:after {
  content: "♦ ♦ ♦\a♦ ♦ ♦\a♦ ♦ ♦"; }

.diams.rank-9:before {
  content: " 9"; }

.diams.rank-10:after {
  content: "♦ ♦ ♦\a♦ ♦ ♦ ♦\a♦ ♦ ♦"; }

.diams.rank-10:before {
  content: " 10"; }

.diams.rank-jack:after {
  content: " J\a ♦"; }

.diams.rank-queen:after {
  content: " Q\a ♦"; }

.diams.rank-king:after {
  content: " K\a ♦"; }

.diams.rank-ace:before {
  content: " А\a ♦"; }

.diams.rank-ace:after {
  content: "♦"; }

.spades.rank-2:after {
  content: "♠\a \a♠"; }

.spades.rank-2:before {
  content: " 2"; }

.spades.rank-3:after {
  content: "♠\a♠\a♠"; }

.spades.rank-3:before {
  content: " 3"; }

.spades.rank-4:after {
  content: "♠   ♠\a \a♠   ♠"; }

.spades.rank-4:before {
  content: " 4"; }

.spades.rank-5:after {
  content: "♠   ♠\a♠\a♠   ♠"; }

.spades.rank-5:before {
  content: " 5"; }

.spades.rank-6:after {
  content: "♠   ♠\a♠   ♠\a♠   ♠"; }

.spades.rank-6:before {
  content: " 6"; }

.spades.rank-7:after {
  content: "♠  ♠\a♠ ♠ ♠\a♠  ♠"; }

.spades.rank-7:before {
  content: " 7"; }

.spades.rank-8:after {
  content: "♠ ♠ ♠\a♠  ♠\a♠ ♠ ♠"; }

.spades.rank-8:before {
  content: " 8"; }

.spades.rank-9:after {
  content: "♠ ♠ ♠\a♠ ♠ ♠\a♠ ♠ ♠"; }

.spades.rank-9:before {
  content: " 9"; }

.spades.rank-10:after {
  content: "♠ ♠ ♠\a♠ ♠ ♠ ♠\a♠ ♠ ♠"; }

.spades.rank-10:before {
  content: " 10"; }

.spades.rank-jack:after {
  content: " J\a ♠"; }

.spades.rank-queen:after {
  content: " Q\a ♠"; }

.spades.rank-king:after {
  content: " K\a ♠"; }

.spades.rank-ace:before {
  content: " А\a ♠"; }

.spades.rank-ace:after {
  content: "♠"; }

.hearts.rank-2:after {
  content: "♥\a \a♥"; }

.hearts.rank-2:before {
  content: " 2"; }

.hearts.rank-3:after {
  content: "♥\a♥\a♥"; }

.hearts.rank-3:before {
  content: " 3"; }

.hearts.rank-4:after {
  content: "♥   ♥\a \a♥   ♥"; }

.hearts.rank-4:before {
  content: " 4"; }

.hearts.rank-5:after {
  content: "♥   ♥\a♥\a♥   ♥"; }

.hearts.rank-5:before {
  content: " 5"; }

.hearts.rank-6:after {
  content: "♥   ♥\a♥   ♥\a♥   ♥"; }

.hearts.rank-6:before {
  content: " 6"; }

.hearts.rank-7:after {
  content: "♥  ♥\a♥ ♥ ♥\a♥  ♥"; }

.hearts.rank-7:before {
  content: " 7"; }

.hearts.rank-8:after {
  content: "♥ ♥ ♥\a♥  ♥\a♥ ♥ ♥"; }

.hearts.rank-8:before {
  content: " 8"; }

.hearts.rank-9:after {
  content: "♥ ♥ ♥\a♥ ♥ ♥\a♥ ♥ ♥"; }

.hearts.rank-9:before {
  content: " 9"; }

.hearts.rank-10:after {
  content: "♥ ♥ ♥\a♥ ♥ ♥ ♥\a♥ ♥ ♥"; }

.hearts.rank-10:before {
  content: " 10"; }

.hearts.rank-jack:after {
  content: " J\a ♥"; }

.hearts.rank-queen:after {
  content: " Q\a ♥"; }

.hearts.rank-king:after {
  content: " K\a ♥"; }

.hearts.rank-ace:before {
  content: " А\a ♥"; }

.hearts.rank-ace:after {
  content: "♥"; }

.clubs.rank-2:after {
  content: "♣\a \a♣"; }

.clubs.rank-2:before {
  content: " 2"; }

.clubs.rank-3:after {
  content: "♣\a♣\a♣"; }

.clubs.rank-3:before {
  content: " 3"; }

.clubs.rank-4:after {
  content: "♣   ♣\a \a♣   ♣"; }

.clubs.rank-4:before {
  content: " 4"; }

.clubs.rank-5:after {
  content: "♣   ♣\a♣\a♣   ♣"; }

.clubs.rank-5:before {
  content: " 5"; }

.clubs.rank-6:after {
  content: "♣   ♣\a♣   ♣\a♣   ♣"; }

.clubs.rank-6:before {
  content: " 6"; }

.clubs.rank-7:after {
  content: "♣  ♣\a♣ ♣ ♣\a♣  ♣"; }

.clubs.rank-7:before {
  content: " 7"; }

.clubs.rank-8:after {
  content: "♣ ♣ ♣\a♣  ♣\a♣ ♣ ♣"; }

.clubs.rank-8:before {
  content: " 8"; }

.clubs.rank-9:after {
  content: "♣ ♣ ♣\a♣ ♣ ♣\a♣ ♣ ♣"; }

.clubs.rank-9:before {
  content: " 9"; }

.clubs.rank-10:after {
  content: "♣ ♣ ♣\a♣ ♣ ♣ ♣\a♣ ♣ ♣"; }

.clubs.rank-10:before {
  content: " 10"; }

.clubs.rank-jack:after {
  content: " J\a ♣"; }

.clubs.rank-queen:after {
  content: " Q\a ♣"; }

.clubs.rank-king:after {
  content: " K\a ♣"; }

.clubs.rank-ace:before {
  content: " А\a ♣"; }

.clubs.rank-ace:after {
  content: "♣"; }

.diams.rank-jack:before, .diams.rank-queen:before, .diams.rank-king:before {
  background: linear-gradient(-45deg, rgba(0, 0, 0, 0) 10%, red 49.9%, red 50%, rgba(0, 0, 0, 0) 60%), linear-gradient(-45deg, red 10%, rgba(0, 0, 0, 0) 10%);
  background-size: 0.3em 0.3em;
  width: 60px;
  height: 110px;
  border-radius: 5px;
  border: 1px solid black; }

.spades.rank-jack:before, .spades.rank-queen:before, .spades.rank-king:before {
  background: linear-gradient(-45deg, rgb(87, 76, 76) 10%, #856ad0 49.9%, #856ad0 50%, rgba(0, 0, 0, 0) 60%), linear-gradient(-45deg, #856ad0 10%, rgb(4, 4, 4) 10%);
  background-size: 0.3em 0.3em;
  width: 60px;
  height: 110px;
  border-radius: 5px;
  border: 1px solid black; }

.hearts.rank-jack:before, .hearts.rank-queen:before, .hearts.rank-king:before {
  background: linear-gradient(-45deg, rgb(87, 76, 76) 10%, red 49.9%, red 50%, rgba(0, 0, 0, 0) 60%), linear-gradient(-45deg, red 10%, rgb(41, 35, 70) 10%);
  background-size: 0.3em 0.3em;
  width: 60px;
  height: 110px;
  border-radius: 5px;
  border: 1px solid black; }

.clubs.rank-jack:before, .clubs.rank-queen:before, .clubs.rank-king:before {
  background: linear-gradient(-45deg, rgb(87, 76, 76) 10%, #fff 49.9%, #fff 50%, rgba(0, 0, 0, 0) 60%), linear-gradient(-45deg, #fff 10%, rgb(4, 4, 4) 10%);
  background-size: 0.3em 0.3em;
  width: 60px;
  height: 110px;
  border-radius: 5px;
  border: 1px solid black; }

.blow_away, .game__player3_board .blow_away, .game__player4_board .blow_away {
  animation: move_card5 1000ms;
  animation-fill-mode: forwards; }

.game__player2_board .blow_away {
  animation: move_card6 1000ms;
  animation-fill-mode: forwards; }

.game__player3_board .blow_away {
  animation: move_card7 1000ms;
  animation-fill-mode: forwards; }

.game__player4_board .blow_away {
  animation: move_card8 1000ms;
  animation-fill-mode: forwards; }

.diams.stopped, .spades.stopped, .hearts.stopped, .clubs.stopped {
  background: #c4c264;
  border: none; }

.diams.stopped:before, .spades.stopped:before, .hearts.stopped:before, .clubs.stopped:before {
  width: 100%;
  height: 100%;
  border: none; }

.diams.stopped:after, .spades.stopped:after, .hearts.stopped:after, .clubs.stopped:after,
.diams.stopped:before, .spades.stopped:before, .hearts.stopped:before, .clubs.stopped:before {
  opacity: 0.3; }

.thing_first {
  position: absolute;
  right: 200px;
  z-index: 100;
  color: white;
  font-size: 20px;
  width: 100px;
  height: 100px;
  background: url(https://i.pinimg.com/originals/2c/c4/a3/2cc4a313351b26f4f0f5ccd9a14aed1f.png);
  background-size: 100%;
  background-repeat: no-repeat;
  transform: translate(130px, 10px) rotateZ(20deg); }

.thing_first::before {
  content: '  :  ';
  color: white;
  font-size: 13px;
  opacity: 0.6;
  position: absolute;
  width: 45%;
  height: 95%;
  border-radius: 5px;
  left: 0;
  top: 0;
  padding-top: 14px;
  box-sizing: border-box;
  text-align: center;
  bottom: 0;
  right: 0px;
  margin: auto;
  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.8), -5px -10px 60px rgba(255, 255, 255, 0.1);
  animation: blink 2s infinite alternate; }

.thing_first::after {
  content: attr(data-text);
  color: white;
  font-size: 13px;
  position: absolute;
  width: 45%;
  height: 95%;
  left: 0;
  top: 30px;
  bottom: 0;
  right: 0px;
  margin: auto;
  opacity: 0.6;
  text-align: center; }

.thing_second {
  position: absolute;
  z-index: 100;
  color: white;
  font-size: 20px;
  width: 110px;
  height: 110px;
  background: url(coffee.png);
  background-size: 110%;
  background-repeat: no-repeat;
  transform: translate(100px, 10px) rotateZ(20deg); }

.thing_second::before {
  content: '';
  position: absolute;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  box-shadow: -5px -10px 20px rgba(0, 0, 0, 0.8), -5px -10px 60px rgba(255, 255, 255, 0.1); }

.thing_second::after {
  content: '';
  position: absolute;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: url(smoke.png);
  background-size: 100%;
  background-repeat: no-repeat;
  animation: 3s 0ms infinite linear steam; }

/*# sourceMappingURL=index.css.map */