* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial';
}

body {
    background: #16394c;
    color: #e1e1e3;
}

h1 {
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    color: #e1e1e3;
    padding: 18px 0;
    text-align:center;
    font-size: 1.75rem;
    background: #16394c;
}

.container {
    
    display: flex;
    gap: 35px;
    padding: 30px;
}

.weather-input input {
    width: 100%;
    height: 45px;
    outline: none;
    margin: 10px 0 20px 0;
    padding: 0 15px;
    font-size: 1.07rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.weather-input .seperator{
    height: 1px;
    width: 100%;
    margin: 25px 0;
    background: #f7f6f668;
    display: flex;
    align-items: center;
    justify-content: center;
}

.weather-input .seperator::before{
    content: "or";
    /* color: #e1e1e3; */
    font-size: 1.18rem;
    padding: 0 15px;
    margin-top: -4px;
    background: #a9b2b9;
}

.weather-input button{
    width: 100%;
   cursor: pointer;
    outline: none;
    color: #e1e1e3;
    padding:  10px 0;
    background: #16394c;
   font-size: 1rem;
    border:none;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.weather-input  .lbtn{
    background: #16394c;
}

.weather-data{
    width: 100%;
}

.current-weather{

    color:#e1e1e3 ;
    display: flex;
    border-radius: 5px;
    padding: 20px 70px 20px 20px ;
    background: #16394c;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.current-weather  h2{
    font-size: 1.7rem;
}

.current-weather  h4{
    margin-top: 12px;
    font-size: 1rem;
    font-weight: 500;
}
.current-weather .icon{
    text-align: center;
}

.current-weather .icon img{
    max-width: 120px;
    margin-top: -15px;
    text-transform: capitalize;
}

.forecast  h2{
    font-size: 1.5rem;
    margin: 20px 0;
}

.weather-cards{
    display: flex;
    gap: 20px;
}

.weather-cards  .card{
   list-style: none;
   color: #e1e1e3;
   padding: 18px 16px;
   border-radius:5px ;
   background: #16394c;
   width: calc(100% /5);
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.weather-cards  .card img{
    max-width: 70px;
    margin: 5px 0 -12px 0;
}


/* 
General styles for smaller screens */
@media (max-width: 1200px) {
    .container {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }

    .weather-data .current-weather {
        flex-direction: column;
        padding: 20px;
    }

    .current-weather .icon img {
        max-width: 100px;
    }

    .weather-cards {
        flex-wrap: wrap;
    }

    .weather-cards .card {
        width: calc(50% - 10px);
        margin: 5px 0;
    }
}

/* Styles for tablets and smaller screens */
@media (max-width: 768px) {
    h1 {
        font-size: 1.5rem;
        padding: 15px 0;
    }

    .weather-input input {
        font-size: 1rem;
        padding: 0 10px;
    }

    .weather-input button, .weather-input .lbtn {
        font-size: 0.9rem;
    }

    .current-weather h2 {
        font-size: 1.5rem;
    }

    .current-weather h4 {
        font-size: 0.9rem;
    }

    .weather-cards .card {
        width: calc(100% - 10px);
    }
}

/* Styles for mobile phones */
@media (max-width: 480px) {
    h1 {
        font-size: 1.2rem;
        padding: 10px 0;
    }

    .weather-input h3 {
        font-size: 1rem;
    }

    .weather-input input {
        font-size: 0.9rem;
        padding: 0 8px;
    }

    .weather-input button, .weather-input .lbtn {
        font-size: 0.8rem;
        padding: 8px 0;
    }

    .current-weather {
        flex-direction: column;
        padding: 15px;
    }

    .current-weather h2 {
        font-size: 1.2rem;
    }

    .current-weather h4 {
        font-size: 0.8rem;
    }

    .weather-cards {
        flex-direction: column;
        gap: 10px;
    }

    .weather-cards .card {
        width: 100%;
    }
}