h1{
    color: white;
    background-image: linear-gradient(to left, rgb(25, 25, 122) ,rgb(45,45,255));
    font-weight: bold;
    text-align: center;
    padding: 20px;
    font-size: 2em;
    mix-blend-mode:overlay;
}

.current-weather-card{
    border-width: thin;
    border-color: black;
    border-style: solid;
    padding: 5px;
}
.weather-page{
    width: 70%;
    float:right;
    padding: 5px;
}
.city-name{
    font-weight: bold;
}

.submit-search{
    float: left;
    width: 28%;
    display: flex;
    flex-direction: column;
    padding: 5px;
}

.search-btn{
    width: 100%;
    padding:2%;
    background-color: rgb(59, 160, 255);
    color: white;
    font-weight: bold;
    border-radius: 7px;
    border-color: unset;
}

.search-btn:hover{
    cursor:pointer;
    opacity: 85%;
}

.five-day-cards{
    color: white;
    background-color: rgb(21, 44, 70);
    width: 17%;
    margin-top: 2%;
    margin-right: auto;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
}
.five-day-forecast{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.five-day-forecast-txt{
    font-size: 1.5em;
}

#condition-1{
    height: 1em;
    width: 100%;
}

.weather-main-header{
    display: flex;
    flex-direction: row;
    font-size: 2em;
    font-weight: bold;
}

div img{
    width: 70%;
}

.search-city-txt{
    margin-bottom: 5px;
    font-size: 1.5em;
}

.main-margin{
    margin-top: 10px;
    margin-bottom: 10px;
}

.favorable{
    background-color: rgb(0, 197, 0);
}
.moderate{
    background-color: yellow;
}
.severe{
    background-color: red;
}

#uv{
    padding: 2px;
    border-radius: 5px;
}

.history-Btn{
    width: 100%;
    margin-top: 5px;
    font-size: large;
}