/* latin-ext */
@font-face {
  font-family: 'Audiowide';
  font-style: normal;
  font-weight: 400;
  src: local('Audiowide Regular'), local('Audiowide-Regular'), url(../fonts/audiowide_ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Audiowide';
  font-style: normal;
  font-weight: 400;
  src: local('Audiowide Regular'), local('Audiowide-Regular'), url(../fonts/audiowide.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(../fonts/lato_ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(../fonts/lato.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*
{
	box-sizing:				border-box;
}

html,
body
{
	margin:					0;
	padding:				0;
	height:					100%;
}

body
{
	min-height:				100%;
	background-color:		black;
	color:					white;
	font-family:			Lato, sans-serif;
	display:				flex;
	flex-direction:			column;
}

#forecast,
#nowPlaying
{
	flex:					1;
}

#date
{
	text-align:				center;
	font-size:				6.2vh;
	margin-top:				-.1em;
	margin-bottom:			-.2em;
}

#topRow
{
	display:				flex;
	font-family:			Audiowide, sans-serif;
	font-size:				16vw;
	padding-left:			.1ex;
	padding-right:			.1ex;
}

#clock
{
	white-space:			nowrap;
	text-align:				center;
	flex:					1 1 45%;
}

#hour::after
{
	content:				':';
	margin-right:			-0.3em;
	top:					-1.3vh;
	position:				relative;
}

#weather
{
	flex:					1 1 content;
	align-self:				center;
	display:				flex;
	font-size:				10vh;
}

#todayData,
#weatherIcon
{
	flex:					1 0 content;
}

#todayData
{
	white-space:			nowrap;
}

#weatherIcon
{
	align-self:				center;
	text-align:				center;
	padding-right:			1ex;
}

#weatherIcon svg
{
	width:					1.5em;
	height:					auto;
}

#weatherIcon path,
.icon path
{
	fill:					white;
}

#weatherIcon g#Grid,
.icon g#Grid
{
	display:				none;
}

#forecast
{
	margin-top:				5vh;
	display:				flex;
}

#forecast > div
{
	flex:					1;
	font-size:				6vh;
	text-align:				center;
}

.icon
{
	margin-top:				.5em;
	margin-bottom:			.5em;
}

.icon svg
{
	width:					80%;
	height:					auto;
}

#forecast > div .humidity
{
	font-size:				3.5vh;
}

#nowPlaying
{
	display:				flex;
	font-size:				16vw;
	padding:				0 .1ex .1ex .1ex;
}

#nowPlaying > div
{
	align-self:				center;
}

#coverArt
{
	height:					100%;
	flex:					1 1 40%;
	position:				relative;
}

#coverArt img
{
	max-width:				100%;
	max-height:				100%;
	display:				block;
	position:				absolute;
	top:					0;
	left:					0;
}

#mediaInfo
{
	flex:					1 1 60%;
	padding-left:			.4ex;
}

#title
{
	font-size:				10vh;
	margin:					.2em 0;
}

#album,
#artist
{
	font-size:				6vh;
	color:					orange;
}