/************************************************************/
/* Widget */
/************************************************************/

.forecast-widget {
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #fff;
}

.forecast-widget__background {
	background-size: cover;
	background-repeat: no-repeat;
	padding: 1rem 1.5rem 1.5rem;
	color: #fff;
}
.forecast-widget__background--sunny {
	background-image: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ),
		url('../img/widget-sunny.png');
}
.forecast-widget__background--mostly-cloudy {
	background-image: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ),
		url('../img/widget-mostly-cloudy.png');
}
.forecast-widget__background--partly-cloudy {
	background-image: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ),
		url('../img/widget-partly-cloudy.png');
}
.forecast-widget__background--stormy {
	background-image: url("../img/widget-stormy.png");
}

.forecast-widget__location {
	font-size: 1.25rem;
	padding-bottom: 0.5rem;
}

.forecast-widget__current-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding-bottom: 1.25rem;
}

.forecast-widget__current-icon .weather-icon {
	font-size: 3.25rem;
}

.forecast-widget__current-temp {
	font-size: 3.25rem;
	font-weight: lighter;
}

.forecast-widget__current-date {
	border-left: 1px solid #fff;
	padding-left: 0.5rem;
}

.forecast-widget__todays-date {
	font-weight: bold;
}

.forecast-widget__day-of-week {
	font-weight: lighter;
	font-size: 1.25rem;
}

.forecast-widget__link {
	display: flex;
	justify-content: center;
}

.forecast-widget__link a,
.forecast-widget__link input[type=submit] {
	color: #fff;
	font-size: 0.75rem;
	text-transform: uppercase;
	background-color: transparent;
	padding: 0.5rem;
	border: 2px solid #fff;
	border-radius: 0.35rem;
}

.forecast-widget__link a:hover {
	text-decoration: none;
}

.forecast-widget__link input[type=submit]:hover {
	cursor: pointer;
}