extended forecast as html

server/styles/scss/_colors.scss

@@ -5,4 +5,6 @@ $column-header-text: yellow;
 $column-header: rgb(32, 0, 87);
 
 $gradient-main-background-1: #102080;
-$gradient-main-background-2: #001040;
+$gradient-main-background-2: #001040;
+
+$extended-low: #8080FF;

server/styles/scss/_extended-forecast.scss

@@ -0,0 +1,73 @@
+@use 'colors'as c;
+@use 'utils'as u;
+
+#extended-forecast-html.weather-display {
+	background-image: url('../images/BackGround2_1.png');
+}
+
+.weather-display .main.extended-forecast {
+	.day-container {
+		margin-top: 16px;
+		margin-left: 27px;
+	}
+
+	.day {
+		@include u.text-shadow();
+		padding: 5px;
+		height: 285px;
+		width: 155px;
+		display: inline-block;
+		margin: 0px 15px;
+		font-family: 'Star4000';
+		font-size: 24pt;
+
+		.date {
+			text-transform: uppercase;
+			text-align: center;
+			color: c.$title-color;
+		}
+
+		.condition {
+			text-align: center;
+			height: 74px;
+			margin-top: 10px;
+		}
+
+		.icon {
+			text-align: center;
+			height: 75px;
+
+			img {
+				max-height: 75px;
+			}
+		}
+
+		.temperatures {
+			width: 100%;
+			margin-top: 5px;
+
+			.temperature-block {
+				display: inline-block;
+				width: 44%;
+
+				>div {
+					text-align: center;
+					;
+				}
+
+				.value {
+					font-family: 'Star4000 Large';
+					margin-top: 4px;
+				}
+
+				&.lo .label {
+					color: c.$extended-low;
+				}
+
+				&.hi .label {
+					color: c.$title-color;
+				}
+			}
+		}
+	}
+}

server/styles/scss/compiled.scss

@@ -3,4 +3,5 @@
 @use '_current-weather';
 @use '_local-forecast';
 @use '_latest-observations';
-@use '_regional-forecast';
+@use '_regional-forecast';
+@use '_extended-forecast';