hypervisor/src/app/todo/todo.module.css

.todoContainer {
	height: 100vh;
	background: #1d1f27;
}

.todoHeader {
	display: grid;
	padding: 20px;
	color: #efefef;
	grid-row-gap: 0px;
	grid-column-gap: 0px;
	background: #c90f0c;
	width: calc(100%- 40px);
	grid-template-rows: 1fr;
	grid-template-columns: repeat(2, 1fr);
}

.title {
	width: 100%;
	display: block;
	font-size: 30px;
	font-weight: bold;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.location {
	font-size: 20px;
	letter-spacing: 2px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

	.version {
		font-size: 10pt;
		font-weight: light;
		color: rgba(255, 255, 255, 0.6);
	}
}

.right {
	text-align: right;
}

.time {
	width: 100%;
	display: block;
	font-size: 30px;
	font-weight: bold;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.date {
	font-size: 20px;
	letter-spacing: 2px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.container {
	display: flex;
	color: #fff;
	padding: 0 10px;
	margin-top: 15px;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: flex-start;
	width: calc(100% - 20px);
	align-content: flex-start;
	justify-content: flex-start;
}

.listContainer {
	order: 0;
	gap: 10px;
	flex: 1 1 70%;
	display: flex;
	align-self: auto;
	margin: 0 5px 0 0;
	flex-direction: row;

	.lists {
		padding: 10px;
		display: flex;
		flex: 1 1 auto;
		border-radius: 10px;
		background: #17171b;
		border: 1px solid rgba(200, 200, 200, 0.2);
	}
}

.weatherContainer {
	flex: 1 1 30%;
	margin: 0 0 0 5px;

	.weatherContainerInner {
		width: 100%;
		border-radius: 10px;
		background: #17171b;
		display: inline-block;
		border: 1px solid rgba(200, 200, 200, 0.2);

		.weatherHeader {
			font-weight: bold;
			margin: 5px 5px 0 5px;
			display: inline-block;
			width: calc(100% - 24px);
			padding: 6px 6px 4px 6px;
			border-radius: 5px 5px 2px 2px;
			border: 1px solid rgba(200, 200, 200, 0.2);
			background: rgba(255, 255, 255, 0.1);
		}

		.weatherAlerts {
			font-size: 18pt;
			font-weight: bold;
			border-radius: 2px;
			text-align: center;
			display: inline-block;
			margin: 5px 5px 0 5px;
			width: calc(100% - 24px);
			padding: 12px 6px 10px 6px;
			color: rgba(255, 255, 255, 0.95);
			background: rgba(255, 50, 50, 0.5);
			border: 1px solid rgba(255, 50, 50, 0.75);

			&:nth-last-child(1 of .weatherAlerts) {
				border-radius: 2px 2px 5px 5px;
			}

			.weatherAlertExpires {
				display: block;
				font-size: 10pt;
				margin-top: 5px;
				font-weight: bold;
				color: rgba(255, 255, 255, 0.75);
			}
		}

		.weatherTop {
			display: flex;
			padding: 10px;
			justify-content: stretch;

			.weatherTopLeft {
				display: flex;
				flex: 1 1 50%;
				text-align: center;
				flex-direction: column;
				justify-content: center;

				.weatherCondition {
					font-size: 15pt;
					font-weight: bold;
					margin: 10px 0 5px 0;
				}

				.weatherTemp {
					font-size: 55pt;
					font-weight: bold;
				}

				.weatherFeelsLike {
					font-size: 11pt;
					font-weight: bold;
					margin: 5px 0 5px 0;
				}

				.weatherHighLow {
					font-size: 15pt;
					margin: 15px 0 10px 0;
				}
			}

			.weatherTopRight {
				flex: 1 1 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.weatherDetails {
			display: flex;
			flex: 1 1 auto;
			justify-content: space-around;

			.detail {
				width: 100%;
				margin: 5px;
				font-size: 14pt;
				font-weight: bold;
				text-align: center;
				border-radius: 2px;
				padding: 15px 10px 10px 10px;
				background: rgba(255, 255, 255, 0.12);
				border: 1px solid rgba(200, 200, 200, 0.1);

				&:nth-child(1) {
					margin: 5px 0 5px 5px;
					border-radius: 5px 2px 2px 2px;
				}

				&:nth-child(3) {
					margin: 5px 5px 5px 0;
					border-radius: 2px 5px 2px 2px;
				}

				.detailUnit {
					font-size: 10pt;
					margin: 0 0 0 2px;
					display: inline-block;
				}

				.detailText {
					display: block;
					font-size: 10pt;
					margin: 5px 0 0 2px;
					color: rgba(200, 200, 200, 0.95);
				}
			}
		}

		.weatherFooter {
			padding: 5px;
			display: block;
			font-size: 10pt;
			font-weight: bold;
			text-align: center;
			margin: 0 auto 5px auto;
			width: calc(100% - 22px);
			border-radius: 2px 2px 5px 5px;
			color: rgba(200, 200, 200, 0.65);
			background: rgba(255, 255, 255, 0.05);
			border: 1px solid rgba(200, 200, 200, 0.1);
		}
	}

	.weatherFutureForecasts {
		display: flex;
		flex-direction: column;

		.futureForecast {
			display: flex;
			margin: 0 0 5px 0;
			align-self: center;
			border-radius: 2px;
			align-items: center;
			padding: 2px 2px 0 2px;
			justify-content: center;
			width: calc(100% - 16px);
			background: rgba(255, 255, 255, 0.1);
			border: 1px solid rgba(200, 200, 200, 0.2);

			.futureForecastDay {
				flex: 2 1 35%;
				font-size: 16pt;
				text-align: right;
				font-weight: bold;
				padding-right: 20px;
			}

			.futureForecastIconContainer {
				display: flex;
				flex: 1 1 10%;
				justify-content: right;
			}

			.futurePrecipChance {
				flex: 1 1 10%;
				font-size: 14pt;
				font-weight: bold;
				text-align: center;
			}

			.futureForecastTemp {
				flex: 2 1 40%;
				font-size: 16pt;
				font-weight: bold;
				padding-left: 25px;
			}
		}
	}
}