/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~ Product and property of Titan Informatics LLC ~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
html,
body {
	height: 100%;
}

body {
	font-family: "The US Daily News";
	font-size: clamp(0.938rem, 1vw + 0.5rem, 1rem);
	color: var(--text-color);
}

[data-name="weather"] {
	position: relative;
	float: left;
	display: flex;
	flex-flow: row wrap;
	width: 100%;
	max-width: 350px;
	height: 100%;
	max-height: 130px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

[data-name="weather"]::before {
	font-weight: 500;
	content: attr(data-city);
	position: absolute;
	top: 10px;
	right: 15px;
	text-transform: capitalize;
}

[data-name="weather"] li {
	display: flex;
}

[data-name="weather"] li span {
	/*font-weight: 500;*/
	position: relative;
	float: left;
}

[data-name="weather"] li:first-of-type {
	flex: 0 0 100%;
	flex-direction: row;
	font-size: 1.375rem;
}

[data-name="weather"] li:nth-of-type(n+2) {
	flex: 0 0 calc(100% / 6);
	max-width: calc(100% / 6);
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

[data-name="weather"] [data-name="icon"] {
	position: relative;
	float: left;
	width: 30px;
	height: 30px;
	margin: 3px 0 5px;
	background: no-repeat center/cover;
	align-self: center;
}

[data-name="weather"] li:first-of-type [data-name="icon"] {
	width: 40px;
	height: 40px;
	margin: 0;
}

[data-name="weather"] [data-name="icon"][data-forecast="cloudy"] { background-image: url("../icons/cloudy.png"); }
[data-name="weather"] [data-name="icon"][data-forecast="cyclone"] { background-image: url("../icons/cyclone.png"); }
[data-name="weather"] [data-name="icon"][data-forecast="flurries"] { background-image: url("../icons/flurries.png"); }
[data-name="weather"] [data-name="icon"][data-forecast="fog"] { background-image: url("../icons/fog.png"); }
[data-name="weather"] [data-name="icon"][data-forecast="heavy-rain"] { background-image: url("../icons/heavy-rain.png"); }
[data-name="weather"] [data-name="icon"][data-forecast="night-clear"] { background-image: url("../icons/night-clear.png"); }
[data-name="weather"] [data-name="icon"][data-forecast="night-partly-cloudy"] { background-image: url("../icons/night-partly-cloudy.png"); }
[data-name="weather"] [data-name="icon"][data-forecast="partly-cloudy"] { background-image: url("../icons/partly-cloudy.png"); }
[data-name="weather"] [data-name="icon"][data-forecast="rain"] { background-image: url("../icons/rain.png"); }
[data-name="weather"] [data-name="icon"][data-forecast="showers"] { background-image: url("../icons/showers.png"); }
[data-name="weather"] [data-name="icon"][data-forecast="sleet"] { background-image: url("../icons/sleet.png"); }
[data-name="weather"] [data-name="icon"][data-forecast="snow"] { background-image: url("../icons/snow.png"); }
[data-name="weather"] [data-name="icon"][data-forecast="snow-windy"] { background-image: url("../icons/snow-windy.png"); }
[data-name="weather"] [data-name="icon"][data-forecast="sunny"] { background-image: url("../icons/sunny.png"); }
[data-name="weather"] [data-name="icon"][data-forecast="thunderstorms"] { background-image: url("../icons/thunderstorms.png"); }
[data-name="weather"] [data-name="icon"][data-forecast="wind"] { background-image: url("../icons/wind.png"); }
[data-name="weather"] [data-name="icon"][data-forecast="windy"] { background-image: url("../icons/windy.png"); }

[data-name="weather"] li:first-of-type [data-name="day"] {
	display: none;
}

[data-name="weather"] li [data-name="temprature"] {
	align-self: center;
}

[data-name="weather"] li:first-of-type [data-name="temprature"] {
	margin-left: 5px;
}

[data-name="weather"] li [data-name="temprature"]::before {
	content: "\f111";
	font-family: "Font Awesome 6 Sharp";
	font-weight: 300;
	font-size: 0.375rem;
	color: var(--degree-color);
	position: relative;
	float: right;
	top: -1px; left: -9px;
}

[data-name="weather"] li:first-of-type [data-name="temprature"]::before {
	font-size: 0.5rem;
	left: -13px;
}

[data-name="weather"] li [data-name="temprature"]::after {
	/*font-weight: 500;*/
	position: relative;
	float: right;
	margin: 0 -6px 0 6px;
}

[data-name="weather"] li:first-of-type [data-name="temprature"]::after {
	margin: 0 -8px 0 8px;
}

[data-name="weather"] li [data-name="temprature"][data-scale="celsius"]::after {
	content: "C";
}

[data-name="weather"] li [data-name="temprature"][data-scale="fahrenheit"]::after {
	content: "F";
}