:root {
        --dark: #17202a;
        --white: #FFF;
        --light: #85c1e9;
        --lightgrey: #d0d3d4;
        --grey: #808080;
	--green: #27ae60;
	--yellow: #d68910;
	--red:#c0392b;
	--purple: #af7ac5;
	--steelblue: #21618c;
	--lastcgm: 2.75vw;
	--textshadowgreen: 
		0 0 1px #0fa,
		0 0 2px #0fa,
		0 0 5px #0fa; 
	--textshadowred:
                0 0 1px #E30,
                0 0 2px #E30,
                0 0 5px #E30;
	--textshadowyellow:
                0 0 1px #ff0,
                0 0 2px #ff0,
                0 0 5px #ff0;

        --textshadowblue:
                0 0 1px #00f,
                0 0 2px #00f,
                0 0 5px #00f;
	--textshadowpurple:
                0 0 1px #800,
                0 0 2px #800,
                0 0 5px #800;
        --textshadowwhite:
                0 0 1px #ffc,
                0 0 2px #ffc,
                0 0 5px #ffc;
        --textshadowwhitesmall:
                0 0 1px #ffc,
                0 0 1px #ffc,
                0 0 1px #ffc;

}

body, html { 
	padding:0;
	margin: 0;
	background-color:var(--dark);
}

#page {
	display: grid;
	grid-template-areas: 
		'clock clock clock clock clock photo'
		'cgm cgm cgmavg1hr cgmavg3d cgmavg60d photo'
		'cgm cgm cgmavg3hr cgmavg7d cgmavg90d photo'
		'cgm cgm cgmavg12hr cgmavg14d cgmavg120d news'
		'a1c inrange_last24 cgmavg24hr cgmavg30d cgmavg180d news'
		'cgm3hr cgm3hr cgm3hr cgm3hr cgm3hr news'
		'weather weather weather weather weather weather';
	grid-template-rows: 7% 11% 11% 11% 11% 16% auto;	
	grid-template-columns: auto 12% 12% 12% 12% auto;	
	width: 100%;
	height: 100%;
	overflow:hidden;
        border:0px solid yellow;
}

#cgm {
        grid-area: cgm;
        display:grid;
        grid-template-areas:
                'readingtime readingtime'
                'value trend';
	margin:auto;
	width:100%;
        border:0px solid yellow;
}

#value{
        grid-area: value;
        border:0px solid blue;
        font-size: 14vw;
        margin:auto;
	margin-right:.25vw;
}

#trend{
	border:0px solid blue;
        grid-area: trend;
        font-size: 2.75vw;
        text-align:left;
        margin:auto;
	margin-left:1em;
	width:100%;
}

#readingtime{
        grid-area: readingtime;
        font-size: 2.75vw;
        text-align:right;
        margin:auto;
}





.CurrentReading{
        color: var(--green);
	text-shadow: var(--textshadowgreen);
}
.OverDueReading{
        color:  var(--yellow);
	text-shadow: var(--textshadowyellow);
}
.OldReading{
        color: var(--red);
	text-shadow: var(--textshadowred);
}

.inRange{
        color: var(--green);
	text-shadow: var(--textshadowgreen);
}
.midRange{
        color: var(--yellow);
	text-shadow: var(--textshadowyellow);
}
.outRange {
        color: var(--red);
	text-shadow: var(--textshadowred);
}

.GoodTrend{
        color:  var(--green);
	text-shadow: var(--textshadowgreen);

}
.MidTrend{
        color: var(--yellow);
	text-shadow: var(--textshadowyellow);
}

.BadTrend{
        color: var(--red);
	text-shadow: var(--textshadowred);
}

#inrange_last24{
	grid-area: inrange_last24;
        font-size: 2.75vw;
        color: var(--steelblue);
        margin:auto;
	text-shadow: var(--textshadowblue);
        border:0px solid yellow;
}




#a1c{
	grid-area: a1c;
	font-size: 2.75vw;
	color: var(--purple);
	margin:auto;
	text-align:center;
	text-shadow: var(--textshadowpurple);
        border:0px solid yellow;
}

#cgmavg1hr{
        grid-area: cgmavg1hr;
        font-size: var(--lastcgm);
}

#cgmavg3hr{
        grid-area: cgmavg3hr;
        font-size: var(--lastcgm);
}

#cgmavg12hr{
        grid-area: cgmavg12hr;
        font-size: var(--lastcgm);
}


#cgmavg24hr{
        grid-area: cgmavg24hr;
	font-size: var(--lastcgm);
}
#cgmavg3d{
        grid-area: cgmavg3d;
        font-size: var(--lastcgm);
}

#cgmavg7d{
        grid-area: cgmavg7d;
        font-size: var(--lastcgm);
}

#cgmavg14d{
        grid-area: cgmavg14d;
        font-size: var(--lastcgm);
}

#cgmavg30d{
        grid-area: cgmavg30d;
        font-size: var(--lastcgm);
}

#cgmavg60d{
        grid-area: cgmavg60d;
        font-size: var(--lastcgm);
}

#cgmavg90d{
        grid-area: cgmavg90d;
        font-size: var(--lastcgm);
}

#cgmavg120d{
        grid-area: cgmavg120d;
        font-size: var(--lastcgm);
}

#cgmavg180d{
        grid-area: cgmavg180d;
        font-size: var(--lastcgm);
}


#cgm3hr {
        grid-area: cgm3hr;
	background-color: var(--dark);
        border:0px solid green;
}

#photo{

	grid-area: photo;
	margin:auto;
}
#photocount{
	color: var(--black);
	text-shadow: var(--textshadowwhite);
	position:relative;
	top: -20px;
	left: 5px;
}

#meme {
	max-height:300px;;	
	max-width:390px;
}

.data_label {
	color: var(--lightgrey);
	font-size:1vw;
	margin-left:5px;
	white-space: nowrap;
        text-shadow: var(--textshadowwhite);
}



#news { 
	height: 100%
	grid-area: news;
        border:0px solid blue;
	margin:auto;
	margin-left:2em;
	margin-right:2em;
}

#news a{
	display:grid;
	text-decoration: none;
        font-size:1.25vw;
        color: var(--light);
	margin:auto;
}

#news img{
        margin:auto;
max-height:370px;
max-width:370px;
width: 30vw;
}



#clock {
        grid-area: clock;
        display:grid;
        grid-template-areas:
	        'time date';
        border:0px solid blue;
        font-size: 2vw;
	white-space: nowrap;
	color: var(--lightgrey);
        text-shadow: var(--textshadowwhite);
}


#time{
        grid-area time;
        border:0px solid green;
        font-size: 4vw;
	margin:auto;
}

#date{
        grid-area date;
        border:0px solid red;
	margin:auto;
}






/*Note Area*/


#note {
	font-size: 1.55vw; 
	grid-area: note;
        color: var(--lightgrey);
	border:0px solid green;
	display:none;
}


/*Weather Area */

#weather {
	display:grid;
	grid-area: weather;
	grid-template-areas:
	        'weathertemp radar localradar weatherhourly';
	border:0px solid green;
	color: var(--lightgrey);
	text-align:left;
	margin:auto;
	width:100%;
	height:100%;
}

#weathertemp {
	display:grid;
	grid-area: weathertemp;
	font-size:7vw;
	border:0px solid green;
	margin:auto;
        text-shadow: var(--textshadowwhite);
}
#weatherhourly{
	grid-area: weatherhourly;
	display:grid;
	border:0px solid red;
	font-size: 2vw;
	margin:auto;
}

#localradar{
        grid-area: localradar;
	display:grid;
        border:0px solid red;
        width:400px;
        height:300px;
	overflow:hidden;
	margin:auto;
}

#radar{
        grid-area: radar;
	display:grid;
        border:0px solid red;
	width:400px;
	height:300px;
	overflow:hidden;
	margin:auto;
}

#radar iframe {
	margin-top:-100px;
}

#localradar iframe {
        margin-top:-100px;
}


.humidity{
	font-size: 2vw;
	margin:auto;
}
.period{
	border:0px solid blue;
	white-space: nowrap;
        text-shadow: var(--textshadowwhitesmall);
	line-height: .95;
}
.weatherhourlytime {
	border:0px solid pink;
	color: var(--grey);
        display:inline-block;
	text-align:right;
	margin-right:1em;
	font-size: 1.5vw;
	width:17%;
}
.shortforecast {
        border:0px solid yellow;
        white-space: nowrap;
        color: var(--grey);
        display:inline-block;
	font-size: 1.5vw;
	margin-left:1em;
}

.BelowFreezing{
	color:var(--white);
	display:inline-block;
}
.Cool{
	color:var(--light);
	display:inline-block;
}
.Moderate{
	color:var(--steelblue);
	display:inline-block;
}
.Normal{ 
	color: var(--green);
	display:inline-block;
}
.Warm{ 
	color: var(--yellow);
	display:inline-block;
}
.Hot{ 
	color:var(--red);
	display:inline-block;
}