/* Styles for Carbon (CO2)
 * Copyright 2022, Robert Wolff. All rights reserved.
 */
@font-face { font-family: "Museo Slab"; src: url('../font/Museo_Slab_500.otf'); }
@font-face { font-family: "Museo Sans 300"; src: url('../font/Museo300-Regular.otf'); }
@font-face { font-family: "Museo Sans 500"; src: url('../font/Museo500-Regular.otf'); }
body { color: #eee; background-color: #192223; background-size: 100% 100%; }
#container { color: #eee; margin: 0 auto; width: 100%; background-image: none no-repeat 0 0;}

/* title */ 
header { font-family: "Museo Slab", Helvetica, sans-serif; text-align: left; font-size: 3em; line-height: 1em; position: absolute; top: 25px; left: 39px; }

/* value */ 
#main { font-family: "Museo Slab", "Myriad Pro", Helvetica, sans-serif; font-size: 2.4em; line-height: 1.3; text-align: left; position: absolute; width: auto; left: 10px; top: 5em; z-index: 999; }
#main .unit { font-size: 1.25em; font-variant: small-caps; }

/* graph */ 
svg { display: block; margin: 0 auto; }
.axis--x, .axis--x path,
.axis--y, .axis--y path { stroke: beige; opacity: 0.5; }
.line { fill: none; stroke-width: 2px; }
.tick line { fill: none; stroke-width: 1px; stroke: beige; }
.tick text { font-size: 2em; fill: beige; stroke: beige; }
.focus circle { fill: none; stroke: steelblue; }
.focus text { font-size: 2em; fill: beige; stoke: beige; font-family: "Museo Sans 300", Helvetica, sans-serif; }
#meanLine { stroke: wheat; opacity: 0.6; }
#trendLine { stroke: wheat; }
#threeFiftyLine { stroke: lightskyblue; }
#upperBoundLine { stroke: brown; }
#lowerBoundLine { stroke: slategray; }

#graph { clear: both; width: 100%; height: 48em; margin: 0 auto; }
#graph .xAxis { font-size: 1.5em; color: #ddd !important; }
#graph .yAxis { font-size: 1.5em; color: #ddd !important; }
#graph .tickLabels { font-family: "Museo Sans 300", "Myriad Pro", Helvetica, sans-serif; }

.legend .label { font-family: sans-serif; }
.label { color: #ccc; margin: 0 18px 0 3px; }

footer { font-family: Verdana, sans-serif; color: #888; font-size: 0.8em; text-align: left; margin-top: 2em; }

/* Primary Styles for mobile */
@media only screen and (max-width: 800px) {
  /*
  #container { max-width: 320px; text-align: center; }
   */
  #main { width: 100%; margin: 0 auto;}
  header { font-size: 2em; }
}/*/mediaquery*/

.hidden { display: none; visibility: hidden; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }