body {
    font-family: Arial, sans-serif;
    text-align: center;
}

#app {
    width: 80%;
    margin: auto;
}

#legend td {
    padding-right: 20px; /* adjust as needed */
}

#legend {
    width: 40%;
    margin: auto;
    text-align: center;
}

#filter-legend td {
    padding-right: 20px; /* adjust as needed */
}

#filter-legend {
    width: 40%;
    margin: auto;
    text-align: center;
}

table {
    width: 100%;
    margin-bottom: 20px;
}

th {
    text-align: center;
}

.city-state-column {
    width: 30%;  /* adjust this value as needed */
}

.weather-emoji {
    font-size: 2em; /* 2em will be twice the size of the current font size */
}

table td, table th {
    padding: 5px;
}

#addCity, #thisWeekend, #nextWeekend, #dates, #presets, #bulkAddForm, #shareButton {
    margin: 10px 0; /* 10px top and bottom, 0 left and right */
}

.button-emoji {
    font-size:  1.5em;
    border:     none;
    background: none;
    cursor:     pointer;
}

.button-remove {
    border:     none;
    background: none;
    cursor:     pointer;
}

.button-mobile {
    font-size: 1em;         /* Larger text */
    padding:   5px 10px;    /* Padding around the text */
    margin:    5px;         /* Space around the button */
    border:    1px solid black; /* Make the button boundaries clear */
    background-color: #ddd; /* Light grey background */
    color:     black;       /* Black text */
    cursor:    pointer;     /* Change cursor on hover */
}

@media (max-width: 1199px) {
    .state-name {
        display: none;
    }

    .weather-emoji {
        display: none;
    }

    .temp {
        display: block;
        font-size: 0.8em;
        line-height: 1em;  /* adjust as needed */
        height: 1em;  /* adjust as needed */
        overflow: hidden;  /* hide anything that exceeds the height */
        padding: 3px;
    }

    .rain-data div {
        font-size: 0.8em; /* adjust as needed */
    }

    .city-name {
        font-size: 0.8em;
    }

    .city-state-column {
        width: 40%;  /* adjust this value as needed */
    }

    table td, table th {
        padding: 2px;
    }

    .button-mobile {
        font-size: 0.8em; /* Smaller text */
    }

    .loading-box {
        background-color: rgb(130, 130, 130);
    }
    
    .city-weather-row.loading {
        background-color: rgb(255, 255, 255);
    }

    #filter-legend {
        width: 80%;
        margin: auto;
        text-align: center;
        font-size: 0.8em;
    }
    #legend {
        width: 80%;
        margin: auto;
        text-align: center;
        font-size: 0.8em;
    }
    #legend td {
        padding-right: 5px; /* adjust as needed */
    }
    #presetList {
        font-size: 0.8em;
    }
    #dates {
        font-size: 0.8em;
    }
    #instructions {
        width: 90%; /* adjust as needed */
        max-width: 80%;
        margin: auto;
        text-align: left;
        font-size: 0.8em;
    }
}

@media (min-width: 1200px) {
  td .temp {
    display: inline-block;
    width: 50%;
  }

  td .rain-data div {
    display: inline-block;
    width: 50%;
  }
}