@charset "utf-8";
/* RS Astro Skycam CSS Document */

* {
	padding: 0;
	margin:  0;
}
:root {
	--header-bkg: rgba(0,0,0,1);
	--theme-colour: rgba(0,3,27,1);
}
body {
	background-color: #1A1A1A;
}
.moon-tile-container {
	display: block;
	margin: 2em 5em 0 auto;
	right: 5em;
	width: 30%;
	border: 1px var(--theme-colour) solid;
	color: #fff;
	border-radius: 1em;
	background-color: #000;
}
.moon-tile-container .moon-title {
	text-align: center;
	background-color: var(--theme-colour);
	padding: .8em 0;
	border-radius: 1em 1em 0 0;
}
/* New Moon Styles */
.moon-grid-container {
	display: inline-grid;
	grid-template-columns: auto auto;
	align-items: center;
	width: 100%;
	font-size: 1rem;
}
.moon-grid-item {
	
}
.moon-grid-container .moon-info {
	padding: 0 .5em;
	font-size: 1rem;
	color: #8D8D8D;
	line-height: 1.3rem;
}
.moon-grid-container .moon-info:nth-child(odd) {
	text-align: right;
	color: #626262;
}
.moon-grid-container .riseset {
	text-align: center;
	margin-bottom: 1em;
}
.moon-text {
	font-size: 1em;
}
/* End Moon styles */
.moon-tile-container img {
	display: block;
	margin: 1em auto;
	max-width: 100%;
	height: auto;
}
.southern {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}
.tile-container {
	display: grid;
	max-width: 90%;
	margin: 2em auto 0 auto;
	grid-template-columns: auto auto auto auto auto auto auto auto;
	column-gap: 0.2em;
}
.tile:first-of-type {
	background-color: #000;
}
.tile {
	color: #fff;
	border: 1px 1px 0 1px solid #ccc;
	border-radius: 10px 10px 0 0;
	padding: 1em 0;
	text-align: center;
	/* background-color: #1A1A1A; */
	cursor: default;
}
.day {
	background-color: #0083C3;
}
.night {
	background-color: #000E23;
}
.tile img {
	max-height: 3em;
	width: auto;
}
.tile-time {
	font-size: .8rem;
}
.tile-info {
	font-size: .7rem;
}
.tile-pop:after {
	content: "%";
}
header {
	background: var(--header-bkg);
	display: flex;
	align-items: center;
	padding: .2em;
}
header #rsalogo {
	max-height: 2em;
	width: auto;
	padding: 0.5em;
	display: inline-block;
}
header p {
	color: #fff;
	margin: 0 1em;
	font-size: 1.1em;
}
header .redlight {
	display: inline-block;
	background: rgba(255,0,0,0);
	width: .8em;
	height: .8em;
	border-radius: 50%;
	animation: flash 2s infinite ease-in-out;
}
@keyframes flash {
	to	{background: rgba(255,0,0,1);}
}
.image-container {
	display: block;
	margin: 0 auto 2em auto;
	max-width: 90%;
}
.image-container .image-header {
	padding: 0.5em;
	color: #fff;
	background: rgba(0,0,0,1);
	/* font-size: 1em; */
}
.container-text {
	font-size: 0.9em;
}
.image-container .weather-strip {
	display: flex;
	align-items: center;
	font-size: 1.1em;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}
.image-container .weather-strip .temp {
	font-size: 2.9em;
	margin-right: .7em;
}
.image-container .weather-strip .small_temp {
	font-size: 2em;
}
.image-container .weather-strip .small_percentage {
	font-size: 2em;
}
.image-container .weather-strip .small_info {
	font-size: 2rem;
}
.image-container .weather-strip .small_percentage::after {
	content: "%";
}
.image-container .weather-strip .temp::after, .image-container .weather-strip .small_temp::after {
	content: "°C";
}
.image-container .weather-strip .emp {
	font-weight: bold;
	font-size: 1.3em;
}
.wind, .real_feel, .humidity, .dewpoint {
	text-align: center;
	margin-left: 2em;
}
.image-container .weather-strip .small_label {
	font-size: .7em;
}
.image-container .image-header img {
	width: 4em;
	height: auto;
	margin: 0 1.5em;
}
.image-container {
	background-color: #111111;
}
.image-container .latest {
	border: 1px solid rgba(255,255,255,.2);
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}
.cachecheck {
	color: #fff;
}