/*GAMEBOARD*/
#title {
  font-family: 'Bangers', cursive;
  font-size: 4.5em;
  color: white;
  text-shadow: 1px 0px 1px lightgrey, 0px 1px 1px lightgrey, 2px 1px 1px #585757, 1px 2px 1px black;
  margin: 14px 0 0 0; }

#head-container {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
  background-color: rgba(90, 158, 199, 0.85);
  padding-bottom: 10px;
  box-shadow: 0 0px 8px rgba(0, 0, 0, 0.6); }

#header-button-container {
  display: flex;
  flex-direction: row; }

#play-button {
  border-width: 0;
  border-radius: 2px;
  box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.44);
  color: #5A9EC7;
  background-color: white;
  width: 94px;
  font-size: 1em;
  margin: 12px 46px 0 0;
  padding: 0 0 0 0;
  height: 33px; }

#play-button:active, #play-button:focus {
  box-shadow: 0px 0px 0px 0px transparent;
  outline: none; }

#header-button-container p {
  font-family: 'Open Sans', sans-serif;
  color: white;
  font-size: 1.14em;
  padding: 14px 0 0 0; }

#gameboard-columns {
  height: 100%;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6); }

.column {
  /*border: 2px solid red;*/
  display: flex;
  justify-content: center; }

#gameboard {
  height: 400px;
  display: flex;
  flex-direction: column; }

@keyframes bomb-drop {
  from {
    top: -2%; }
  to {
    top: 95%; } }

/*#usr{
  margin: -20px 0 0 0;
  height: 20px;
  width: 95px;
  background-color: #099FFF;
}*/
#usr {
  margin: -131px 0 -30px 0;
  font-size: 95px; }

/*WATER*/
#game-floor {
  height: 37px;
  width: 100%;
  background-color: rgba(90, 158, 199, 0.81);
  margin: -37px 0px 0 0px;
  display: flex; }

@media (max-width: 770px) {
  .desktop {
    display: none; } }

@media (max-width: 770px) {
  #usr {
    margin: -93px 0 0 0;
    font-size: 57px; } }

/*LEADERBOARD*/
#replay-button {
  border-width: 0;
  border-radius: 2px;
  box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.44);
  color: #5A9EC7;
  background-color: white;
  width: 94px;
  font-size: 1em;
  margin: 12px 46px 0 0;
  padding: 0 0 0 0;
  height: 33px; }

#replay-button:active, #replay-button:focus {
  box-shadow: 0px 0px 0px 0px transparent;
  outline: none; }

#leaderboard {
  padding: 0;
  display: flex;
  width: 100%;
  flex-direction: column;
  height: 410px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6); }

#leaderboard-title {
  background-color: rgba(143, 186, 212, 0.92);
  color: white;
  height: 80px;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  order: 1; }

#high-scores {
  display: flex;
  flex-direction: column;
  padding: 22px 0 22px 0;
  order: 2; }

#player-score-container {
  display: flex;
  flex-direction: row; }

.players-names {
  margin-right: 10px; }

#column-header, #score-row {
  width: 100%;
  margin: 0 0 0 0; }

#players-ranking-header, #players-name-header, #players-score-header {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.25em;
  text-decoration: underline; }

#column-header, .score-row {
  display: flex;
  justify-content: center; }

.score-row {
  padding: 5px; }

.players-ranking, .players-name, .players-score {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.25em;
  padding: 5px; }

#new-high-score {
  height: 110px;
  width: 100%;
  display: flex;
  order: 0;
  flex-direction: column;
  padding: 10px 0 21px 0;
  align-items: center; }

#high-score-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 8px 0 0 45px; }

#submit-button {
  border-width: 0;
  color: #5A9EC7;
  background-color: white;
  width: 94px;
  font-size: 1em;
  margin: 0px 46px 0 0;
  padding: 0 0 0 0;
  height: 30px;
  border: .1px solid lightgrey; }