* {
    font-family: 'Segoe UI Light', Tahoma, Geneva, Verdana, sans-serif;
}


/* Start tag styles */
header {
    background-image: linear-gradient(to right, #3463BC, #2D3E50);
    color: #FFFFFF;
    /* was #20094B */
}



/* Start class styles */
.btnSearchHistory {
    background-color: #AEAEAE;
    color: black;
    width: 100%;
    margin: 5px 0;
}

.btnSearchHistory:hover {
    background-color: #2D3E50;
    color: white;
}

.btn-primary {
    
    width: 45%;
}

.five-day {
    font-size: 1rem;
    background-color: #2D3E50;
    color: white;
    padding: 10px;
    box-shadow: 3px 4px 5px black;
    border-radius: 10px;
}

.five-day h4 {
    margin: 0;
    padding: 0;
}

.today {
    border: 1px solid black;
    font-size: 1.2rem;
    box-shadow: 3px 4px 5px black;
    border-radius: 10px;
}

.today h1 {
    background-color: #2D3E50;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
}

.weather-info h3 {
    margin-top: 40px;
}




/* start UVI customizations */
.low span {
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #58B423;
    color: white;
}

.medium span {
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #F5B422;
    color: white;
}

.high span {
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #EF5809;
    color: white;
}

.very-high span {
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #D2151B;
    color: white;
    
}

.extreme span {
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #988FFC;
    color: white;
}




/* Start Media Queries */

@media screen and (max-width: 820px) {

    .container {
        flex-direction: column;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .main-content {
        flex-direction: column;
        margin: 0;
        padding: 0;
        width: 85%;
    }

    .five-day-container {
        justify-content: center;
        width: 100%;
        border: 1px solid black;
        margin: 0;
    }

    .five-day {
        width: 100%;
    }

    .search-history {
        border: 1px solid black;
        width: 100%;
        margin: 0 auto;
    }

    .today h1 {
        font-size: 1.3rem;
    }
    
}