body, ::backdrop {
    background: #d9ebfc;
}

#clax-main:fullscreen {
    overflow: scroll;
}

.solutions-N-letters {
    margin-bottom: 2ex;
}

.solutions-N-letters a {
    color: black;
    text-decoration: none;
}

.approche-block {
    margin-left: 5em;
}

.top-header {
    font-weight: bold;
}

.approche:hover {
    color: red;
    cursor: pointer;
}

.mot-container, .compte-container, .compte-container-top, .compte-container-bottom {
    display: flex;
    justify-content: center;
}

.compte-container {
    flex-direction: column;
}

.plaque-lettre, .plaque-chiffre, .plaque-intermediaire {
    border: solid;
    border-width: thin;
    margin: 1vmin;
    height: min(6vw, 12vh);
    line-height: min(6vw, 12vh);
    text-align: center;
    font-size: min(5vw, 10vh);
    font-family: sans-serif;
    font-weight: bold;
    background: white;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.plaque-lettre {
    height: min(8vw, 20vh);
    line-height: min(8vw, 20vh);
    width: min(8vw, 20vh);
    font-size: min(6vw, 18vh);
}

.plaque-chiffre {
    width: min(12vw, 24vh);
}

.plaque-intermediaire {
    width: min(17.5vw, 35vh);
}

.plaque-active:hover {
    cursor: pointer;
}

.plaque-agonize {
    background: lightblue;
}

.plaque-dead {
    background: lightgrey;
}

.detail-box {
    position: fixed;
    border: solid;
    border-width: thin;
    background: lightyellow;
    bottom: 0;
    right: 0;
    width: 12em;
    height: 15ex;
    text-align: center;
    display: flex;
    justify-content: center;
}

.detail-box td {
    width: 2em;
}

.compte-solution:hover {
    background: lightblue;
    cursor: pointer;
}

.detail-intermediaire {
    text-align: center;
    font-size: min(3vw, 6vh);
    height: min(3vw, 6vh);
}

.key-5, .key-4, .key-6, .key-7 {
    font-size: 3vw;
}

.key-5 { width: 16.8vw; }
.key-4 { width: 21vw; }
.key-6 { width: 14vw; }
.key-7 { width: 12vw; }

.keyboard-container {
    display: flex;
    justify-content: center;
    text-align: center;
}

.keyboard-container select {
    font-size: 3vw;
}

button:hover {
    color: white;
    background-color: grey;
}

.clear {
    clear: both;
}

.clock, .score {
    background: white;
    border: solid;
    border-width: thin;
    margin: 0.5vmin;
    width: min(12vw, 24vh);
    height: min(6vw, 12vh);
    line-height: min(6vw, 12vh);
    text-align: center;
    font-size: min(5vw, 10vh);
}

.clock {
    float: right;
}

.score {
    float: left;
}

.control-buttons {
    display: flex;
    justify-content: center;
    margin: 1vw;
}

.control-buttons select {
    font-size: 3vw;
}

.control-button {
    font-size: 3vw;
}

.round-container {
    font-size: min(5vw, 8vh);
    text-align: center;
}

.own-score {
    font-size: min(3vw, 5vh);
    text-align: center;
}

.sabot-detail {
    margin-left: 2em;
    border: solid;
    border-width: thin;
    background: lightyellow;
}

.sorted-box {
    position: fixed;
    border: solid;
    border-width: thin;
    background: lightyellow;
    bottom: 0;
    right: 0;
    width: max-content;
    height: max-content;
    text-align: center;
    font-family: monospace;
    font-size: 3vw;
}

.sorted-box pre, .sorted-box div {
    margin: 1vw;
}

.title {
    text-align: center;
    font-size: 20px;
    margin-bottom: 35px;
}

h1 {
    font-size: 50px;
    margin-bottom: 0px;
}

.motscroises {
    background: white;
    text-align: center;
    font-size: 6vmin;
    font-family: sans-serif;
    font-weight: bold;
}

.motscroises td {
    border: solid;
    border-width: thin;
    width: 7vmin;
    height: 7vmin;
}

.problem {
    margin-bottom: 35px;
}

.announce {
    background: lightyellow;
    text-align: center;
    padding: 0.5em;
}