@charset "UTF-8";
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg); }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg); }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg); }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg); }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg); } }
@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg); }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg); }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg); }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg); }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg); } }
.swing {
  position: relative; }

.swing:hover i {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
  animation-duration: 1s; }

.navbar-brand img {
  max-height: 25px; }

#keyboard {
  /* zoom: 0.8; */
  padding: 1%;
  width: 100%;
  margin: 0 auto;
  display: block;
  display: block;
  color: black;
  height: 18vmax; }
  @media (max-width: 575.98px) {
    #keyboard {
      height: 20vmax; } }

#shareDialog .shareLink img {
  max-width: 100%;
  height: auto; }
#shareDialog a {
  display: block;
  text-align: center; }
#shareDialog h7 {
  font-size: 70%;
  display: block;
  text-align: center;
  margin-top: 0.5rem; }
#shareDialog [name="gameUrl"] {
  text-align: center; }

.tooltip-red .tooltip-inner {
  background-color: var(--danger);
  font-size: 120%; }
.tooltip-red .arrow::before {
  border-top-color: var(--danger); }

.blockquote {
  font-size: 0.75rem;
  border-left: solid 3px silver;
  padding-left: 15px;
  margin-bottom: 0rem;
  margin-top: 1rem; }

.modal-body ol li {
  margin-bottom: 0.75rem; }

.modal-body .blockquote-footer {
  margin-left: 20%; }

.navbar .navbar-brand {
  margin-right: 0; }

/* Extra small devices (phones, 480px and down) */
.dark-theme .actionWrap h1 {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black; }

.light-theme .actionWrap h1 {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white; }

@media only screen and (max-width: 480px) {
  body.main .allWrap {
    background-position: -19vw -25vw;
    background-size: 130vw; }

  .actionWrap {
    margin-bottom: 15vh;
    align-self: flex-end !important; }
    .actionWrap h1 {
      font-size: 3rem !important; } }
body, html {
  width: 100%;
  height: 100%;
  overflow: auto;
  scroll-behavior: smooth; }

/* Medium devices (landscape tablets, 480px and up) */
@media screen and (min-width: 480px) {
  body.main .allWrap {
    background-position: right top;
    background-size: 50vh; }

  .actionWrap {
    margin-top: 50vh; } }
/* Large devices (laptops/desktops, 768px and up) */
@media only screen and (min-width: 768px) {
  body.main .allWrap {
    background-position: 20vw -15vw !important;
    background-size: 85vw !important; }

  .actionWrap {
    margin-top: 40vh; } }
/* Large devices (laptops/desktops, 1200 and up) */
@media only screen and (min-width: 1200px) {
  body.main .allWrap {
    background-position: right -35vh !important;
    background-size: 120vh !important; }

  .actionWrap {
    margin-top: 0vh; } }
body.main .allWrap {
  background-repeat: no-repeat; }
  body.main .allWrap .home h1 {
    font-size: 5.5em;
    font-weight: bold; }

body.main.light-theme .allWrap {
  background-image: url(/images/mainbg-light-01.webp); }
  body.main.light-theme .allWrap #StayHome .stayHomeImg {
    background-image: url("/images/stayhome-light.webp"); }
  body.main.light-theme .allWrap .rulesImg {
    background-image: url("/images/rules-light.webp"); }
  body.main.light-theme .allWrap .howToPlayText {
    background-image: url("/images/tile-light.webp");
    background-color: #3b4c93; }
  body.main.light-theme .allWrap .makingAMove {
    background-color: #3b4c93; }

body.main.dark-theme .allWrap {
  background-image: url(/images/mainbg-dark-01.webp); }
  body.main.dark-theme .allWrap #StayHome .stayHomeImg {
    background-image: url("/images/stayhome-dark.webp"); }
  body.main.dark-theme .allWrap .rulesImg {
    background-image: url("/images/rules-dark.webp"); }
  body.main.dark-theme .allWrap .howToPlayText {
    background-image: url("/images/tile-dark.webp");
    background-color: #2a3a42; }
  body.main.dark-theme .allWrap .makingAMove {
    background-color: #2a3a42; }

body.main .makingAMove ul {
  list-style: none; }
  body.main .makingAMove ul li::before {
    content: "•";
    font-size: 33px;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    align-self: center;
    position: relative;
    top: 0.15em; }
body.main .stayHomeWrap {
  min-height: 70vh; }
  body.main .stayHomeWrap .container-fluid {
    height: 100%; }
body.main #StayHome {
  height: 100%; }
  body.main #StayHome > div {
    align-self: center; }
  body.main #StayHome .stayHomeImg {
    width: 100%;
    height: 100%;
    background-image: url("/images/stayhome-dark.webp");
    background-size: contain;
    background-repeat: no-repeat; }
body.main #baldaRules ul {
  font-size: 120%; }
  body.main #baldaRules ul li {
    margin-bottom: 7px; }
body.main #baldaRules .rulesImg {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center; }
body.main #customSettings .rounded-lg {
  border-radius: 0.7rem !important; }

.joinGame .illustration {
  width: 100%; }
  @media only screen and (min-width: 450px) {
    .joinGame .illustration {
      width: 50%; } }

.howToPlayText {
  background-repeat: no-repeat;
  background-size: 890px 269px;
  background-position: center top; }

[aria-expanded="true"] .fa-caret-down:before {
  content: "\f0d8" !important; }

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