#reveal-button {
    background-color: #00690577;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#revealed-character {
    font-size: 24px;
    font-weight: bold;
    margin-top: 20px;
}

.character-revealed #reveal-button {
    display: none;
}

.revealed-image {
    max-height: 300px;
    height: auto; /* Maintain aspect ratio */
}

#reset-button {
    background-color: #00690577;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: none;
}

.character-revealed #reset-button {
    display: block;
}

.character-revealed #reveal-button {
    display: none;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
    .revealed-image {
        max-height: 150px;
        height: auto; /* Maintain aspect ratio */
    }
    .character-revealed {
        font-size: 12px;
    }
}