@use 'colors'as c;
@use 'utils'as u;

#regional-forecast-html.weather-display {
	background-image: url('../images/BackGround5_1.png');
}

.weather-display .main.regional-forecast {


	position: relative;

	.map {
		position: absolute;
	}

	.location {
		position: absolute;
		width: 140px;
		margin-left: -40px;
		margin-top: -35px;

		>div {
			position: absolute;
			@include u.text-shadow();
		}

		.icon {
			top: 22px;
			left: 42px;

			img {
				max-width: 42px;
			}
		}

		.temp {
			font-family: 'Star4000 Large Compressed';
			font-size: 28px;
			color: c.$title-color;
			top: 32px;
			text-align: right;
			width: 40px;
		}

		.city {
			font-family: Star4000;
			font-size: 20px;
		}
	}
}