:root {
    --hilight: #f1e1f7;
}

#beatdle-container {
    font-family:'Lucida Console', monospace;
    font-size: 12px;
}

#suggestions {
    width: 200px;
    position:absolute;
/*     z-index: 2; */
    text-align: left;
    margin: -5px 0;
}
#suggestions:not(:empty) {
/* pad bottom of list so it doesn't hit the bottom of the page */
    padding: 0 0 40px 0;
}

#input {
    width: 200px;
}

#how-to-play {
    float:right;
}

@media (width <= 600px) {
#how-to-play {
    visibility:hidden;
    position:fixed;
/*     text-align:right; */
    left: 0;
    right: 0;
    margin-inline: auto;
    width: fit-content;
    padding: 4px;
    border: 2px #000;
    border-style: solid;
    border-radius: 4px;
}
}

.suggestion {
    cursor: pointer;
    padding: 2px;
    border: 0.8px #000;
    border-style: none solid solid solid;
}

.suggestion:hover {
    background: var(--hilight);
}

.suggestion:focus {
    outline: none;
    background: var(--hilight);
}

.hilight {
/*     todo */
    background: var(--hilight);
}

button {
/*     todo: no pointer if disabled */
    border: 1px solid #000;
    border-radius: .25em;
    padding: .5em;
    font-family:'Lucida Console', monospace;
    font-size: 10px;
}

button:enabled {
    cursor: pointer;
}

button:hover {
  background-color: var(--hilight);
}

button:disabled{
  border: 1px solid #ccc;
  background-color: #eee;
  color: #aaa;
}

@media (prefers-color-scheme: dark) {
:root {
    --hilight: #5B3473;
}
.suggestion {
    border-color: #fff;
}
button:disabled {
  background: #aaa;
  color: #eee;
}
input {
    background: #fff;
    color: #15161b;
}
}