html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: lightgrey; /* Sets a default background color for the entire page */
}

.body-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 90%; /* This sets the container's height to 90% of the viewport */
    background-color: lightgrey; /* Just for visibility */
}

#selector {
    width: 100%;
    height: 25%;
    background-color: aqua;
}

#results {
    width: 100%;
    height: 75%; /* Adjust height as necessary to fit within .body-container */
    overflow-y: auto; /* Allows vertical scrolling within the div */
    background-color: aquamarine; /* Ensures the scrolling area has the desired background */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    padding: 10px;
    box-sizing: border-box; /* Ensures padding is counted within the height */
}


.dragon-selector {
    float: left; /* Align selectors side-by-side */
    width: 33%; /* First two take up a third each */
    padding: 10px;
    box-sizing: border-box;
}

#breedButton {
    float: left;
    width: 33%;
    padding: 10px;
    box-sizing: border-box;
}

.suggestions {
    background-color: white;
    max-height: 150px;
    overflow-y: auto; /* Enable scrolling if there are many suggestions */
    display: none; /* Initially hidden */
}

/* Clear float */
.body-container::after {
    content: "";
    clear: both;
    display: table;
}

#results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Creates a responsive grid */
    gap: 10px; /* Spacing between grid items */
    padding: 10px;
}

.result {
    position: relative; /* Keeps .result as a positioned container */
    width: 105px; /* Set to the width of your images or container */
    height: 148px; /* Set to the height of your images or container */
    margin-bottom: 20px; /* Adjust as needed */
    padding-bottom: 20px; /* Reserve 20px space at the bottom for text */
    box-sizing: border-box; /* Ensures padding is included in the height */
}

.result img {
    position: absolute;
    top: 0;
    left: 0;
    width: 105px;
    height: 128px; /* Reduced height to prevent overlap with text */
    object-fit: cover; /* Adjust as needed */
}

.result .text-container {
    position: absolute;
    bottom: 0; /* Aligns the text container at the bottom */
    width: 100%; /* Ensures it spans the width of the parent .result div */
    text-align: center; /* Center-aligns the text, adjust as needed */
    background: rgba(255,255,255,0.5); /* Optional: adds a semi-transparent background to the text for readability */
}