#spellingArea {
    display: flex;
    justify-content: space-around; /* Spread out the letters evenly */
    align-items: center;
    padding: 20px;
    /* Additional styling as needed */
}

.spellingLetter {
    font-size: 36px; /* Larger font size */
    font-weight: bold; /* Bold font */
    margin: 0 10px; /* Add space between letters */
    color: black; /* Default color */
    transition: color 0.3s; /* Smooth color transition */
}

#appContainer {
    width: 80%;
    margin: auto;
    margin-bottom: 20px;
}

#scene {
    width: 100%;
    margin-bottom: 20px; /* Space between scene and interaction row */
}

#sceneImage, .sceneImage {
    width: 40%;
    display: block;
    margin: auto;
    height: auto;
}

#interactionContainer {
    display: flex;
    align-items: center; /* Align items vertically */
    justify-content: center; /* Center items horizontally */
}

#characterImage {
    width: 10%;
    cursor: grab;
    margin-right: 20px; /* Space between character and arrow */
}

#arrowContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px; /* Space between arrow and drop zone */
}

#arrowImage {
    width: 50px; /* Adjust size as needed */
}

#dropZone {
    border: 2px dashed #aaa;
    min-height: 200px;
    flex-grow: 1; /* Allows drop zone to take up remaining space */
    display: flex;
    justify-content: center;
    align-items: center;
}

#instruction {
    text-align: center;
    margin-top: 20px;
}

#storyMenu {
    display: flex;
    justify-content: space-around; // Evenly space out items
    align-items: center; // Align items vertically
    flex-wrap: wrap; // Allow items to wrap onto the next line on smaller screens

}

.story-menu-image {
	width: 200px;
	height: auto;
	margin: 5px;
	cursor: pointer;

	@media (min-width: 600px) {
		width: 200px;
	}
}