/* GENERAL SETTINGS */
body {
    background-color: hsl(195, 25%, 72%);
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    margin: 0; /* Remove default margin */
    padding: 0; /* Optional: Remove padding if needed */
    display: flex;
    flex-direction: column;
}
hr {
    border: none;
    height: 2px;
    background-color: #516f72; /* Line color */
    margin: 20px 0; /* Space around the line */
  }


/* NAVIGATION BAR - START*/
.nav { /* Bar itself */
    width: 98.8%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    background-color: rgb(27, 50, 56);
    color: #c0c0c0;
    font-family: 'Times New Roman', Times, serif;
    align-items: center;

}
.nav .right { /* Search + Button */
    display: flex;
    align-items: center;
    gap: 5px;
    padding-right: 10px;
}
.city_search { /* Search Bar */
    background-color:#e1eaeb;
    width: 350px; 
    border-radius: 15px; 
    padding: 5px; 
    border: 1px solid #ccc;
}
.get_weather { /* Button */
    background-color:#e1eaeb;
    color: rgb(13, 37, 38);
    border-radius: 15px; 
    padding: 5px; 
    border: 1px solid #ccc;
}
.select_unit { /* Dropdown */
    width: 150px; 
    padding: 5px; 
    border-radius: 5px; 
    border: 1px solid #ccc; 
    background-color:#e1eaeb;
    color: rgb(13, 37, 38);
}
/* NAVIGATION BAR - END */


/* MAIN HEADINGS */
.heading {
    line-height: 15px;
}
h1 {
    color: rgb(13, 37, 38);
}
h3 {
    color: rgb(66, 109, 110);  
}

/* MAIN IMAGE */
.styled-image {
    width: 99.8%; /* Adjust width */
    height: auto; /* Maintain aspect ratio */
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow */
  }  

/* REST OF BODY SETTINGS */
.page {
    /* Spacings */
    margin-left: 100px;
    margin-right: 100px;
    padding: 10px; /* Inside spacing */
}
#page {
    display: none;
}
#current_dateTime {
    display: contents;
}

#hourly-container {

    background-color: #90acaf;
    margin: 20px auto; /* Center the box horizontally */
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px; /* Optional: Add padding for aesthetics */

    width: 95%; /* Adjust as needed */
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Prevent wrapping of child elements */
}

#hourly {
    display: inline-block; /* Ensure child elements are treated inline */
}

.hourly-item {
    display: inline-block; /* Each hourly data block will be inline */
    margin-right: 20px; /* Add spacing between hourly items */

    background-color: #90acaf;
    border-radius: 10px;
    text-align: center; /* Center-align text for readability */
}
  
.box {
    padding: 20px;
    background-color: #90acaf;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.weather {

    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    text-align:justify;
    justify-content: center;
  }
.weather h3 {
    color: rgb(25, 54, 54);  
    word-spacing: normal;
}
.weather h4 {
    color: rgb(25, 54, 54);  
    word-spacing: normal;
}

/* FOOTER - START */
.footer {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(27, 50, 56);
    color: #c0c0c0;
    font-family: 'Times New Roman', Times, serif;
}

.footer-content ul {
    display: flex;
    gap: 15px;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.footer-content a {
    text-decoration: none;
    color: #c0c0c0;
}

.footer-content a:hover {
    color: #e1eaeb;
}
/* FOOTER - END */

@media screen and (max-width: 481px) {
    .page {
        /* Spacings */
        margin-left: 20px;
        margin-right: 20px;
        padding: 10px; /* Inside spacing */
    }
    h1 {
        size: 20px;
        color: rgb(13, 37, 38);
    }
    h3 {
        size: 16px;
        color: rgb(66, 109, 110);  
    }

    .nav .right { /* Search + Button */
        display: flex;
        align-items: center;
        gap: 5px;
        padding-right: 10px;
    }
    .city_search { /* Search Bar */
        background-color:#e1eaeb;
        width: 100px; 
        border-radius: 15px; 
        padding: 5px; 
        border: 1px solid #ccc;
    }
    .get_weather { /* Button */
        background-color:#e1eaeb;
        color: rgb(13, 37, 38);
        border-radius: 15px; 
        padding: 5px; 
        border: 1px solid #ccc;
    }
    .select_unit { /* Dropdown */
        width: 75px; 
        padding: 5px; 
        border-radius: 5px; 
        border: 1px solid #ccc; 
        background-color:#e1eaeb;
        color: rgb(13, 37, 38);
    }

    .box {
        padding: 10px;
        background-color: #90acaf;
        border-radius: 10px;
        width: 90%;
        margin: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .weather {
        display: grid;
        grid-template-columns: 1fr;
        text-align:justify;
        justify-content: center;
      }
    .weather h3 {
        color: rgb(25, 54, 54);  
        word-spacing: normal;
    }
    .weather h4 {
        color: rgb(25, 54, 54);  
        word-spacing: normal;
    }
    
  }