html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Baloo 2', sans-serif;
}

header {
  display: block;
  position: fixed;
}

header > div {
  display: inline-block;
  vertical-align: middle;
}

.logoHolder {
  margin: 20px;
  font-size: 0;
  position: relative;
}

.logoHolder > div {
  display: inline-block;
  cursor: pointer;
}

.logoHolder .logo {
  width: 50px;
  height: 50px;
  background-image: url('/static/img/logo_circle.png');
  background-size: 50px;
}

.logoHolder .brandName {
  font-size: 30px;
  font-family: 'Baloo 2 Bold';
  vertical-align: text-bottom;
  color: #01061b;
  margin-left: 20px;
}

.pages {
  display: inline-block;
}

.page-link {
  cursor: pointer;
  cursor: pointer;
  font-size: large;
  display: inline-block;
  margin: 0 20px;
  color: #000;
  text-decoration: none;
}

.page-link:hover {
  text-decoration: underline;
}

main {
  display: flex;
  position: absolute;
  top: 80px;
  bottom: 0;
  width: 100%;
  overflow-y: scroll;
}

right-sidebar {
  width: 600px;
  flex-shrink: 0;
  background: #fff4;
  box-shadow: -7px 7px 8px 0 #0004;
}

overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 99;
  display: none;
  background: #fff3
}

body {
  background: linear-gradient(132deg, #ffd6f1, #d6f5ff);
}

.board-prev-move-p1 {
  box-shadow: inset 0 0 20px 3px #6bd5fd;
}

.board-prev-move-p2 {
  box-shadow: inset 0 0 20px 3px #be4fff;
}

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/baloo2.woff2') format('woff2');
}

@font-face {
  font-family: 'Baloo 2 Bold';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/baloo2_bold.woff2') format('woff2');
}