*, *::before, *::after{
    box-sizing: border-box;
    font-family: 'Alatsi', sans-serif;

}

.navbar{
    padding: 15px;
    color:#f5f5f5;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);

}
body{
    background-color: #f5f5f5;
}

img {
    width: 2.5em;
    height: 2.5em;
}

button{
    background-color: #8cc0df ;
    margin: 10px;
    text-align: center
}
.card-body{
    font-size: medium;
    padding:0.5rem;
}

p{
    padding:5px;
    padding-left:10px;
    margin-bottom: 0px;
    font-size: 1.2em;
}

h2{
    margin-bottom: 10px;
}

#searchHeader{
    padding-left:0;
}

#forecast{
    margin-top:5px;
    color: black;
} 
    
nav{
    color: #eaeaea;
    text-align: center;
    justify-content: center;
    margin-bottom: 40px;
    background: #33363b;
}

h1{
    justify-content: center;
}

.list-group-item{
    font-size: 1em;
}

.form-group{
    padding-bottom: 20px;
}

#left-panel{
    background-color:f5f5f5;
    padding: 20px;

}

#upperRightPanel{

    background-color: white;
    /* color: white; */
        /* #E9DAD6; */
     /* #e2e5de; */
    font-size: 1.2em;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);

}

#lowerRightPanel{
    background-color:whitesmoke;
    color: black;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);

}

li{
    background-color: whitesmoke;
}

#UV{
    padding: 0 5px 0 5px;
}


.panel{
    text-align: left;
    margin: 15px;
    justify-content: left;
    padding: 10px;

}

.panel-title{
    margin-top:auto;
}

.list-group{
    font-size: 1.2em;
}

.card-deck{
    margin:20px 0px 5px 0px;
}

.btn{
    background-color: #8cc0df;
    /* color: white; */
 
}


.list-group-item:hover{
    background-color: #8cc0df;
    color: #fff;

}

.icon1,
.icon2,
.icon3,
.icon4,
.icon5{
    font-size: 2em
}


@media (max-width: 768px) and (min-width:300px){
    h2{
        font-size:44px!important;

    }
    #searchHeader{
        font-size: 44px!important;

    }
    .list-group-item{
        font-size: 30px!important;
    }
    #upperRightPanel{
        font-size:1.6em!important;
    }
    .card{
        width:100%!important;
    }
    h1{
        font-size: 60px;
        padding: 30px;
    }

}

@media (max-width: 414px) and (min-width:300px){
    h2{
        font-size:30px!important;

    }
    #searchHeader{
        font-size: 30px!important;

    }
    .list-group-item{
        font-size: 20px!important;
    }
    #upperRightPanel{
        font-size:1.2em!important;
    }
    .card{
        width:100%!important;
    }
    h1{
        font-size: 40px;
        padding: 10px;
    }

    p,
    .card-title,
    {
        font-size: 3em;
    }

    nav{
        margin-bottom: 0;
        width:100%
    }

}