/* Common styles */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

h1 {
    text-align: center;
}

.container {
    display: flex;
    flex-wrap: wrap;
}

/* Styles for horizontal screens (landscape orientation) */
@media (orientation: landscape) {
    .map {
        flex: 1;
        height: 100vh;
    }

    .sidebar {
        flex: 1;
        height: 100vh;
        overflow-y: auto;
        background-color: #f0f0f0;
    }
}

/* Styles for vertical screens (portrait orientation) */
@media (orientation: portrait) {
    .map {
        flex: 1;
        width: 100%;
        height: 50vh;
    }

    .sidebar {
        flex: 1;
        width: 100%;
        overflow-y: auto;
        background-color: #f0f0f0;
    }
}

.description {
    margin-top: 20px; /* Add some spacing between checkboxes and description */
    padding: 20px;
    background-color: #f9f9f9;
    overflow-y: auto; /* Add scroll if content exceeds height */
}

/* Style for keyword list */
ul.keyword-list {
    list-style-type: none; /* Remove bullets */
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

ul.keyword-list li {
    flex: 0 0 30%; /* Set each list item to take up 50% of the width (2 columns) */
    padding: 1px; /* Add padding between list items */
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Stack elements vertically on smaller screens */
    }
    .map, .description, .sidebar {
        flex: none;
        width: 100%;
    }
}