@import url("https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@100;300;400;500;700;800;900&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Alegreya Sans", sans-serif;
    color: white;
}

body {
    background-color: #343541;
  background-size: cover;
  background-repeat: no-repeat;
}

body .container .row .col-md-6 h1 {
    color: white;
}

#accordion .card {
    background-color: #40414F;
    color: white;
}
#settingsHeading  {
    background-color: #40414F;
    border: none;
    color: white;
}

#settingsHeading .text-align-center {
    background-color: #40414F;
    color: white;
}

#settingsHeading .btn {
    background-color: #40414F;
    color: white;
}

#search-depth, #search-depth-white {
    background-color: #343541;
}

#accordion .btn {
    color: white;
}

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

#myBoard {
    max-width: 110%;
    height: auto;
    overflow: none;
}

.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;
}

@media (max-width:912px) {
body .container {
    display: inline;
    flex-wrap: wrap;
    overflow: auto; 
    padding-left: 1%;
    padding-right: 1%;
}
.container .col-md-6 {
    width: 90%;
    overflow: auto;
}
}