body {
    background-color: linear-gradient( #606c88, #3f4c6b );
}

.text-align-center {
    text-align: center;
}

#myBoard {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  height: auto;
  border: 2px solid #333;
}

@supports not (aspect-ratio: 1 / 1) {
  #myBoard::before {
    content: "";
    float: left;
    padding-top: 100%; /* Maintains square ratio */
  }
  #myBoard::after {
    content: "";
    display: table;
    clear: both;
  }
}

.highlight-white {
    box-shadow: inset 0 0 3px 3px yellow;
}

.highlight-black {
    box-shadow: inset 0 0 3px 3px blue;
}

.highlight-hint {
    box-shadow: inset 0 0 3px 3px red;
}

.no-underline {
    text-decoration: none;
}

.no-outline:focus {
    outline: none;
    box-shadow: none;
}

.btn-header {
    font-size: 20px;
    font-weight: bold;
}

.btn-icon {
  font-size: 1.2rem;
  padding: 0.25rem 0.5rem;
}

/* Default */
.theme-default {
  background: linear-gradient(#f8f9fa, #dee2e6);
  color: #000;
}

/* Dark */
.theme-dark {
  background: #121212;
  color: #e0e0e0;
}

/* Wood */
.theme-wood {
  background: #deb887; /* Burlywood */
  color: #3e2c1c;
}

/* Green */
.theme-green {
  background: #e0f2e9;
  color: #0a3d2c;
}

/* Blue */
.theme-blue {
  background: #e3f2fd;
  color: #0d47a1;
}

/* Minimal */
.theme-minimal {
  background: #ffffff;
  color: #000000;
}

    /* Column fix */
.left-column, .right-column {
  min-height: 100vh;
}

.left-column {
  width: 500px;
}

.right-column {
  width: 520px;
}

.dropdown-menu a {
  cursor: pointer;
}

.btn-history {
  background-color: #6c63ff; /* nice violet-blue tone */
  color: white;
  border: none;
}

.btn-history:hover {
  background-color: #5548e0; /* darker on hover */
  color: white;
}

.glow {
  color: #00ffff; /* Aqua or use any glowing color */
  text-shadow:
    0 0 5px #00ffff,
    0 0 10px #00ffff,
    0 0 20px #00ffff,
    0 0 30px #00ffff;
  animation: pulse-glow 2s infinite ease-in-out;
}

@keyframes pulse-glow {
  0% {
    text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff;
  }
  50% {
    text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;
  }
  100% {
    text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff;
  }
}