/* Base text styles */
.small-text{
    margin: 0;
    font-size: small;
    color: rgba(255, 255, 255, 0.927);
}
.mediam-text{
    margin: 0;
    font-size: medium;
    color: white;
}
.large-text{
    margin: 0;
    font-size: larger;
    color: white;
}

body {
    background-color: rgb(37, 113, 151);
    margin: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll; 
    width: 100%;
    min-height: 100vh;
}

main {
    height: 100%;
}

.main-container {
    padding: 10px;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto 1fr auto; 
    gap: 15px; 
    min-height: 100vh;
}

.video-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

/* Search Bar */
.search-container {
    grid-column: 1 / 3; 
    display: flex; 
    height: 100%;
    width: 55%;
    background-color: transparent;
    border: 1px solid rgba(180, 206, 212, 0.388);
    border-radius: 13px;
    padding: 10px 15px;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(rgba(128, 170, 234, 0.071),rgba(136, 171, 217, 0.159));
}

#search-icon {
    margin-right: 10px;
}

#search-input {
    flex-grow: 1;
}

#search-input input {
    padding: .3em;
    width: 100%;
    border: none;
    outline: none;
    background: none;
    color: white;
    -webkit-appearance: none; 
    border-radius: 0;
}

#search-input input::placeholder {
    color: rgba(255, 255, 255, 0.744);
}

/* Cards */
.condition-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px; 
}

.card {
    border: 1px solid rgba(180, 206, 212, 0.386);
    border-radius: 16px;
    margin-top: 15px;
    padding: 15px;
    background-image: linear-gradient(rgba(128, 170, 234, 0.153),rgba(136, 171, 217, 0.367));
}

#location {
    display: flex;
    align-items: center; 
}
#location p {
    margin: 0;
    margin-left: 5px;
}

#today-tamp {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#left-side-temp {
    display: flex;
    align-items: center;
}

#weather-icon {
    margin-right: 10px;
}

.temp-deg h1 {
    margin: 0px;
    font-size: 55px;
}

#totay-more-details-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 13px;
}

.more-details-card {
    border: 1px solid rgba(180, 206, 212, 0.386);
    border-radius: 10px;
    padding: 5px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.more-deatails {
    display: flex;
    align-items: center;
   
}
.more-deatails > div:first-child {
    margin-right: 5px; 
}

/* 7-day forecast */
.dayforecast {
    grid-column: 2 / 3;
    grid-row: 2 / 4;
    width: 100%;
}

#seven-days {
    width: 100%;
}

.days {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    width: 100%;
    margin-bottom: 10px; 
}

.day-icon, .low-temp, .high-temp {
    display: flex;
    justify-content: center;
}

/* Hourly Forecast */
#hourforecast {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    margin-bottom: 11px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#hours {
    display: flex;
   
    overflow-x: auto; 
    padding-bottom: 10px; 
    
}

.time {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px; 
    margin-right: 15px; 
    flex-shrink: 0; 
}
.time:last-child {
    margin-right: 0;
}

/* Responsive Styles */
@media (max-width: 1100px) {
    .main-container {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .search-container {
        width: 100%;
        box-sizing: border-box;
    }

    .dayforecast {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 600px) {
    .video-bg {
        display: none;
    }
    
    body {
        background-image: url("images/clear-day.jpg"); 
        background-attachment: scroll; 
    }
    
    #totay-more-details-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .temp-deg h1 {
        font-size: 40px;
    }
}

@media (max-width: 500px) {
    #totay-more-details-container {
        gap: 10px;
    }
}