:root {
  --black: #000;
  --white: #FCFCFC;
  --action-white:#ECF5FF;
  --light-gray: #ccc;
  --dark-gray: #5B5B5B;
  --red: #ea5455;
  --light-green: #00A600;
  --dark-green:#2D871A;
  --board-width: 90px;
  --board-height: 90px;
  --mobile-board-width: 55px;
  --mobile-board-height: 55px;
}

@font-face {
  font-family: masafont-Regular;
  src: url('../webfonts/MasaFont-Regular.woff2')
  , url('../webfonts/MasaFont-Regular.woff');
}

html,body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: masafont-Regular !important;
  background-image: linear-gradient(to bottom, #e6e9f0 0%, #eef1f5 100%);
}

#doodle {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

section {
  width: 100%;
  height: 100%;
  padding: 0 15px;
  position: relative;
  z-index: 1;
}

/* rank player */
.player {
  display: flex;
  align-items: center;
  justify-content: center;
}

.player img {
  width: 30px;
  margin-right: 5px;
  cursor: pointer;
}