html {
    font-family: sans-serif;
    box-sizing: border-box;
}

#title {
      font-size: clamp(8pt, 12vw, 48pt);
      text-align: center;
      margin-bottom: 4vmax;
}

#intro {
      font-size: 1.5vmax;
      font-style: italic;
      margin: 2vmax;
}

#ciphertext {
      width: 100%;
      height: 100px;
      box-sizing: border-box;
      color: #000;
}

#cluesdiv {
    display: flex;
    width: 100%;
    margin-bottom: 0.5em;
}

#clues {
    width: 100%;
    flex-grow: 1;
}

#canvas {
      margin-top: 20px;
      width: 100%;
      height: 100px;
}

#buttons {
      display: flex;
      justify-content: space-between;
}

#undo_button {
      display: none;
}

.button {
      background: #ddd;
      border-radius: 4px;
      padding: 8px;
      display: inline-block;
      cursor: pointer;
}

.button:hover {
      background: #88f;
}

#canvas-container {
      position: relative;
      width: 100%; /* Adjusts to the size of the canvas; can set explicitly if necessary */
      height: fit-content; /* Adjusts to the size of the canvas */
}

#logp {
      position: absolute;
      bottom: 0;
      right: 0;
      padding: 10px;
      background-color: #dddddd; /* Semi-transparent black */
      font-size: 12px;
      color: black;
      border-radius: 5px;
}