body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; flex-direction: column; } h1 { margin-bottom: 20px; } a { color: #007bff; } #hiraganaBoxes { display: grid; grid-template-columns: repeat(10, 1fr); grid-gap: 10px; margin: 20px 0; } .hiraganaBox { border: 1px solid #333; padding: 10px; margin: 0 10px; cursor: pointer; border-radius: 0.5rem; font-weight: bold; width: 2rem; text-align: center; } .hiraganaBox:hover { background-color: lightblue; } .hiraganaBox.selected { background-color: rgb(106, 96, 250); } #canvas { border: 1px solid #333; display: block; margin: 0 auto 20px; border-radius: 0.5rem; } .btn { background-color: #007bff; border: none; color: #fff; padding: 10px 20px; font-size: 16px; cursor: pointer; margin: 0.5rem 0; border-radius: 5px; } .btn:hover { background-color: #0056b3; } #predictionResult { margin-top: 20px; font-size: 18px; } dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; border: 1px solid #333; padding: 20px; } dialog img { max-width: 100%; height: auto; } dialog button { margin-top: 10px; }