/* ==================================================
   MAIN CSS - Imports all other style sheets
   ================================================== */

@import url('base.css');
@import url('layout.css');

/* --- Components --- */
@import url('components/buttons.css');
@import url('components/clock.css');
@import url('components/indicators.css');
@import url('components/modal.css');

/* --- Utilities (Import last) --- */
@import url('utils.css');


.player-name {
  position: absolute;
  font-size: 1.2rem;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}


#player1 #player1NameDisplay {
  bottom: 15px;
  right: 20px;
  transform: rotate(180deg);
}


#player2 #player2NameDisplay {
  top: 15px;
  left: 20px;
}