/* global stylings */
*{
    font-weight: bold;
}

/* setting background image to html document */
html { 
    background: url("/images/background-photo-2.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  /* stylings for header element */
.jumbotron{
    display:flex;
    justify-content: center;
    background-image: 
    linear-gradient(
        to right,
        rgb(76, 76, 247, 0.65), rgb(136, 49, 136, 0.65)
        );
    color: white;
    font-size:x-large;
}

/* putting the whole application into a row to have left and right columns */
.applicationStage{
    display: flex;
    flex-direction: row;
    margin-top: 3vh;
}

/* flex direction positioning for search stage area */
.searchArea{
    display: flex;
    flex-direction: column;
    width: 30%;
}

/* flex direction positioning for main weather information stage area */
.informationArea{
    display: flex;
    flex-direction: column;
    width:100%
}

/* positioning for city search box */
.searchInputArea{
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ositioning of search bar elements */
.searchBar{
    display: flex;
    flex-direction: row;
}

/* stylings for button that fires api call */
.searchBtn{
    background-color: rgb(166, 242, 243);
    cursor: pointer;
}

/* darkers the search button on hover */
.searchBtn:hover{
    background: rgb(111, 207, 209);
}

/* hides the city list staging area until changed in JS */
.cityListStage{
    display: none;
}

/*stylings for city list stage header*/
/* .cityListHeader{
    
} */

/* stylings for list of previously searched cities */
.cityList{
    display:flex;
    flex-direction: column;
}

/* removes bullet points from city list */
.cities{
    list-style-type: none;
    margin-bottom: .8vh;
}

/* stylings for the city list buttons */
.searchAgainBtn{
    width: 35%;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

/* stylings for dates on future weather cards */
.dates{
    font-size: x-large;
}

/* stylings and positioning for forcast card info */
.forecast-card-info{
    padding-left: 2vw;
}

/* stylings for main weather card for current city */
.currentCity{
    border-style: solid;
    border-color: black;
    background-color: rgba(150, 238, 238, 0.85);
    width: 80%;
    float:right;
    display: none;
    width: 95%;
}

/* centers up the current day weather card */
.mainWeather{
    display:flex;
    justify-content: center;
}

/* city heading title */
.cityHead{
    display: flex;
    justify-content: center;
    font-size: xxx-large;
}

/* curent day weather info positioning and styles */
.mainDate{
    display: flex;
    justify-content: center;
    font-size: x-large;
}

/* stylings for current weather description on current forecast */
.mainWeath{
    display: flex;
    justify-content: center;
    font-size: xx-large;
    padding-top: 2vh;
}


/* stylings for the main body of current weather card information */
.currentBody{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

/* stylings for each element of information in current weather card */
.currentel{
    margin:1%;
}

/* weekly forcast weather cards positioning */
.forecast{
    display: flex;
    flex-direction: row;
    align-self: center;
    flex-wrap: wrap;
    width: 95%;
}

/* styling for specifically the future general weather */
.futureWeath{
    font-size: larger;
}

/* stylings for future weather cards */
.card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.7);
    transition: 0.3s;
    background-color: rgba(157, 207, 236, 0.85);
    border-style: solid;
    border-width: 1px;
    margin: 5px;
  }