body {
    font-family: 'PT-Sans', sans-serif;
    line-height: 1;
}

p {
    padding: 1% 0;
    font-size: 1.2rem;
}

h3 {
    margin: 5% 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.jumbotron {
    text-align: center;
    text-shadow: #4B0082;
    background-color: #4B0082;
    background-image: linear-gradient(to right, #4B0082 , #900C3F , yellow);
    color: #fff;
    border-radius: 0;
}

.display-4 {
    font-weight: 600;
}

.main-cont {
    margin-top: 15px;
}

/* Search Container */
.card {
    border: none;
}
.search-cont{
    margin-left: -45px;
    margin-right: 15px;
}

.input-group {
    margin: 6% 0;
}

/* buttons */
.searchbtn {
    margin-bottom: 8%;
}

ul {
    list-style-type: none;
}

button {
    width: 100%;
}

.btnhistory {
    margin: 5% 0;
}

.btn-primary:hover {
    box-shadow: 0 0.3rem 1.3rem 0 #6791f1e3;
    color: white;
}

.btn-secondary {
    width: 110%;
   margin: 20px 0 10px -22px;

}

.search-history {
    border-top: solid black;
    width: 99%;
    margin: 0 0.1%;
    padding: 5% 0;
}

/* forecast */
.current {
    display: flex;
    align-items: flex-end;
    border: solid #050A30;
    margin-right: -45px;
    border-radius: 5px;
    width: 108%;
}

.current h2 {
    font-weight: 700;
    margin-bottom: 20px;
}


.forecast {
    margin-left: 1%;
}

.details {
    margin-top: -3%;
}

/* 5day forecast */
.future {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0;
    padding-top: 5px;
    width: 108%;
    background-color: #cdedf8;
    margin-left: -10px;
}

.futureFC {
    border: solid #050A30;
    border-radius: 5px;
    margin: 1% 1%;
    background-color: #fff;
    width: 2rem;
}

.futureFC .details {
    padding: 20% 0 10% 0;
}

.futureFC p {
    padding: 5% 0;
}

/* icons */
.futureFC .icons {
    padding: 7% 0;
}

.fa-solid{
    font-size: 2.5rem;
}

.futureFC .fa-solid {
    padding: 7% 0;
}

.current .fa-solid {
    padding: 2% 0;
}

/* UV Index */

.greyI { /* 0 no risk*/
    background-color: grey;
    color: #fff;
    padding: 0.5% 2%;
    border-radius: 3px;
    border: solid grey;
}

.greenI { /* 0 - 2 favorable*/
    background-color: green;
    color: #fff;
    padding: 0.5% 2%;
    border-radius: 3px;
    border: solid green;
}

.yellowI { /* 3 - 5 moderate*/
    background-color: yellow;
    color: black;
    padding: 0.5% 2%;
    border-radius: 3px;
    border: solid yellow;
}

.orangeI { /* 6 - 7 high*/
    background-color: orange;
    color: black;
    padding: 0.5% 2%;
    border-radius: 3px;
    border: solid orange;
}

.redI { /* 8 - 10 severe*/
    background-color: red;
    color: #fff;
    padding: 0.5% 2%;
    border-radius: 3px;
    border: solid red;
}

.purpleI { /* 11+ purple */
    background-color: purple;
    color: #fff;
    padding: 0.5% 2%;
    border-radius: 3px;
    border: solid purple;
}

/* mode */
.nighttime {
    background-color: #050A30;
    background-image: linear-gradient(to right, #050A30 , #000C66);
    color: #fff;
}

/* font-family: 'Nunito', sans-serif; */
/* font-family: 'PT-Sans', sans-serif; */