body {
    font-family: 'Space Mono', monospace; 
    display: flex;
}
#elements-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; 
  justify-content: flex-start; /* Start adding elements from the left */
  
}
.element {
    border: 1px solid black; 
    padding: 10px; 
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease; /* For the feedback effect and springy animation */
    text-transform: uppercase; 
    user-select: none;

}
.selected {
    background-color: darkgrey; 
}

.element:hover {
    background-color: lightgray;
}

.element:active {
    background-color: black; /* Change the background color when the element is clicked */
}


.held {
    z-index: 100; /* Ensure held element is on top of other elements */
}
.spring-effect {
    transform: scale(1.1); /* Make the element slightly bigger when being dragged */
}
h1 {
    position: fixed;
    bottom: 10px;
    left: 10px;
    font-size: 1.3em;
}

#combinations-area {
    position: fixed;
    bottom: 10px;
    right: 10px;
    font-size: .5em;
}