body {
    background-color: #1c1c1c; /* Dark background for a spooky atmosphere */
    color: #e0e0e0; /* Light grey text for contrast */
    font-family: 'Courier New', Courier, monospace; /* Monospace font for a classic adventure feel */
    text-align: center; /* Center text for a cohesive look */
}

.card {
    background-color: #333; /* Darker card to blend in with the theme */
    border: 1px solid #666; /* Subtle border for depth */
    border-radius: 10px; /* Rounded corners for a softer look */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.75); /* Ghostly shadow effect */
}

.card-title {
    font-size: 1.5em; /* Increased font size for the title */
    margin-bottom: 20px; /* Space below the title */
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8); /* Text shadow for a supernatural effect */
}

.btn {
    background-color: #444; /* Dark button color */
    color: #fff; /* White text on buttons */
    border: none; /* Remove default button border */
    transition: background-color 0.3s; /* Smooth background transition */
    padding: 10px 20px; /* Increased padding for larger touch area */
    font-size: 1.2em; /* Slightly larger font size for readability */
    margin: 15px 0; /* More vertical spacing between buttons */
    border-radius: 5px; /* Rounded corners for buttons */
    width: 80%; /* Full width for buttons */
}

.btn:hover {
    background-color: #666; /* Lighter color on hover */
}

input {
    background-color: #555; /* Dark background for the input field */
    color: #fff; /* White text in input field */
    border: 1px solid #888; /* Subtle border to indicate focus area */
    padding: 10px; /* Padding for input for better touch target */
    margin-bottom: 15px; /* Spacing below the input field */
    width: 80%; /* Full width for the input field */
}

input::placeholder {
    color: #bbb; /* Lighter color for placeholder text */
}

.output {
    margin-top: 20px; /* Space above output messages */
    font-weight: bold; /* Bold text for output */
    color: #ff6666; /* Red color for error messages */
}

#choices button {
    margin-top: 10px; /* Margin for button spacing */
}