/***############### Beginning of Website-specific style sheet. ****/

/* Site Color Setup.  Adjancent color scheme 15 degrees apart. */

:root {
    --color-1: #4091b0;   /* Medium blue */
    --color-2: #ff9756;   /* Medium orange */
    --color-3: #ffbf56;   /* Golden yellow */
    
    --color-4: #64adc9;   /* Light blue */
}


/*General Styles*/
.body-wrapper { }

a { color: var(--color-1); transition: 0.1s; }
a:hover { color: var(--color-4); transition: 0.1s; }
input, textarea, button, select { display: block; padding: 5px 12px; border: 3px solid #d0d0d0; outline: none; border-radius: 4px; transition: 0.4s; }
button { font-weight: 600; background-color: var(--color-4); color: #000000; }
button:hover { background-color: var(--color-1); transition: 0.4s; }

.form-transmission-results { padding-bottom: 60px; }


/*Header*/
.header { padding-top: 60px; padding-bottom: 40px; background-color: var(--color-1); }
.main-title-container { padding-left: 30px; }
.main-title-container__main-title { }
.main-title-container__main-title__link { font-weight: bold; color: #333333; text-decoration: none; }
.main-title-container__main-title__link:hover { color: #333333; text-decoration: underline; }
.subtitle-container { padding-left: 30px; }
.subtitle-container__sub-title { font-weight: bold; color: #fcfcfc; }

#logo { position: absolute; }


/*Main Content*/
.main-content-container { position: relative; padding-top: 30px; padding-bottom: 30px; }


/*Location Search Form*/
.city-search { padding-bottom: 40px; font-size: 0; }
.city-search input, .city-search textarea, .city-search button { font-size: 16px; }
.city-search__city-name-label { padding-right: 15px; margin-bottom: 5px; font-size: 20px; font-weight: 600; }
.city-search__input { margin-bottom: 10px; }
.city-search__search-city-button { }


/*Set Unit Type Form*/
.set-unit-type { margin-bottom: 40px; }
.set-unit { margin-bottom: 10px; }


/*Location Search Results*/
.location-search__query { padding-bottom: 15px; }
.location-search__intro { padding-bottom: 40px; }
.location-search__results { }
.location-search__results__city { padding-bottom: 15px; font-weight: bold; }
.location-search__results__state-or-country { }


/*Weather section*/
.weather-city { }
.time-details { padding-bottom: 30px; }
.weather-day { padding: 15px 10px; margin-bottom: 60px; border: 3px solid #d0d0d0; border-radius: 5px; background-color: #f4f4f4; }
.weather-info .weather-day__date { padding-bottom: 12px; padding-left: 5px; padding-right: 5px; font-size: 18px; font-weight: bold; }
.weather-day__min-temp { display: inline-block; }
.weather-day__max-temp { display: inline-block; padding-left: 20px; }
.weather-day__conditions { padding-bottom: 20px; }
.weather-day__image-container { padding-bottom: 20px; }
.weather-day__wind { }
.weather-day__air-pressure { }
.weather-day__humidity { }
.weather-day__visibility { }
.weather-day__image { display: block; margin-left: auto; margin-right: auto; }


/*Footer*/
.footer { padding: 60px 0 60px 0; background-color: var(--color-1); color: #f9f9f9; }



@media only screen and (min-width: 768px){
    
    /*General Styles*/
    input, textarea, button, select { display: inline-block; }

    
    /*Weather section*/
    .weather-day { }
    
    
    /*Location Search Form*/
    .city-search__city-name-label { margin-bottom: 0; }
    .city-search__input { margin-bottom: 0; }
    .city-search__search-city-button { margin-left: 6px; }
    
    
    /*Set Unit Type Form*/
    .set-unit { margin-bottom: 0; }
    
}



@media only screen and (min-width: 1200px){
    
    .container { width: 80%; max-width: 1540px; }
    
    /*Header*/
    .main-title-container { padding-left: 50px; }
    .subtitle-container { padding-left: 50px; }
    
    
    /*Set Unit Type Form*/
    .set-unit-type { position: absolute; top: 30px; right: 15px; }
    
     
    /*Weather section*/
    .weather-day { }
    
}


@media only screen and (min-width: 1500px) { 
    
    /*Weather section*/
    .weather-day { }
    .weather-info .weather-day__date { padding-left: 12px; padding-right: 12px; font-size: 20px; }      
    
}