html {
  font-size: 13px;
  background: #0253A7 url(../images/grain.jpg);
}

header {
  margin-bottom: 10px;
}

header p {
  margin-bottom: 0;
}

.mg-chart-title {
  font-family: 'Open Sans',sans-serif,Arial;
  font-size: 1.5rem;
  font-weight: 400;
}

.container-charts {
  background-image: url(../images/alpha.png);
  margin: 0 auto;
  padding: 40px;
  position: relative;
  top: 40px;
}

.container-prose {
  background-color: #fff;
  color: #3b3b3b;
  opacity: .9;
  margin: 0 auto 40px;
  padding: 20px;
}

.credits {
  margin: 0 auto 20px;
  font-size: .9rem;
}

.credits img {
  width: 100px;
}

svg {
  margin-top: 30px;
}

body {
  font-family: 'Open Sans',sans-serif,Arial;
  background: url(../images/bg3.jpg) 50% -70px no-repeat;
  background-size: 1920px auto;
  margin: 0;
  padding: 0;
}

p {
  font-family: 'Open Sans',sans-serif,Arial;
  font-size: 1.1rem;
  line-height: 24px;
}

.it {
  font-style: italic;
}

a,a:active,a:visited {
  color: #70b6f1;
  text-decoration: none;
}

a:hover {
  color: #70b6f1;
}

.footer {
  border-top: 0;
  font-size: .9rem;
}

h1 {
  font-family: 'Open Sans',sans-serif,Arial;
  font-size: 46px;
  font-weight: 300;
  margin: 5px auto 10px auto;
  text-align: center;
}

h2 {
  font-size: 24px;
  font-weight: 400;
  margin-top: 0;
}

h3 {
  font-size: 20px;
  font-weight: 400;
}

.profile-photo img {
  filter: grayscale(100%);
}

.profile-photo img:hover {
  filter: grayscale(0);
}

.team .name, .team .role {
  display: block;
}

.team .name {
  font-weight: bold;
}

.alumni {
  margin-top: 20px;
}

.transparent-rollover-rect {
  fill: #fff;
}

.mg-missing-background {
  stroke: #ccc;
}

.hr {
  border-bottom: 1px solid #3b3b3b;
  height: 24px;
  margin: 20px 0 10px;
}

.buttons {
  position: absolute;
  right: -10px;
}

.btn-group {
  display: inline-block;
  margin-left: 3px;
  margin-right: 3px;
  padding-bottom: 15px;
}

.btn-group span.which-button {
  font-weight: 300;
  color: #a9a9a9;
}

.btn-group span.title {
  margin-left: 4px;
  margin-right: 4px;
}

.mg-active-datapoint {
  font-size: .85rem;
}

.mg-line-legend text {
  font-size: .88rem;
}

#gpu-model .mg-chart-title,#processor-cores-speeds .mg-chart-title {
  cursor: pointer;
}

.showing.intel-toggle {
  background-color: #87CEFA;
  text-shadow: 1px 1px 4px #588dad;
}

.showing.amd-toggle {
  background-color: #f57070;
  text-shadow: 1px 1px 4px #a34444;
}

.showing.nvidia-toggle {
  background-color: #18ff00;
  text-shadow: 1px 1px 4px #14bb03;
}

.vendor-intel {
  fill: #87CEFA !important;
}

.vendor-amd {
  fill: #f57070 !important;
}

.vendor-nvidia {
  fill: #18ff00 !important;
}

.vendor-intel-line {
  stroke: #87CEFA !important;
}

.vendor-amd-line {
  stroke: #f57070 !important;
}

.vendor-nvidia-line {
  stroke: #18ff00 !important;
}

#detail-processor .mg-area2-color {
  fill: #f57070;
}

#detail-processor .mg-line2-color {
  stroke: #f57070;
}

#detail-processor .mg-hover-line2-color {
  fill: #f57070;
}

#detail-processor .mg-line2-legend-color {
  color: #f57070;
  fill: #f57070;
}

#detail-processor .mg-area2-color {
  fill: #f57070;
}

#detail-processor .mg-area2-color {
  fill: #f57070;
}

#detail-processor .mg-line1-color {
  stroke: #87CEFA;
}

#detail-processor .mg-hover-line1-color {
  fill: #87CEFA;
}

#detail-processor .mg-line1-legend-color {
  color: #87CEFA;
  fill: #87CEFA;
}

#detail-processor .mg-area1-color {
  fill: #87CEFA;
}

#detail-pc-video-card .mg-line1-color {
  stroke: #87CEFA !important;
}

#detail-pc-video-card .mg-hover-line1-color {
  fill: #87CEFA !important;
}

#detail-pc-video-card .mg-line1-legend-color {
  color: #87CEFA !important;
  fill: #87CEFA !important;
}

#detail-pc-video-card .mg-area1-color {
  fill: #87CEFA !important;
}

.mg-line6-color {
  stroke: #ffc0cb;
}

.mg-hover-line6-color {
  fill: #ffc0cb;
}

.mg-line6-legend-color {
  color: #ffc0cb;
  fill: #ffc0cb;
}

.mg-area6-color {
  fill: #ffc0cb;
}

.mg-line7-color {
  stroke: #cb5cff;
}

.mg-hover-line7-color,.mg-area7-color {
  fill: #cb5cff;
}

.mg-line7-legend-color {
  color: #cb5cff;
  fill: #cb5cff;
}

.mg-line8-color {
  stroke: #9edae5;
}

.mg-hover-line8-color,.mg-area8-color {
  fill: #9edae5;
}

.mg-line8-legend-color {
  color: #9edae5;
  fill: #9edae5;
}

.mg-line9-color {
  stroke: #17becf;
}

.mg-hover-line9-color,.mg-area9-color {
  fill: #17becf;
}

.mg-line9-legend-color {
  color: #17becf;
  fill: #17becf;
}

.mg-line10-color {
  stroke: #dbdb8d;
}

.mg-hover-line10-color,.mg-area10-color {
  fill: #dbdb8d;
}

.mg-line10-legend-color {
  color: #dbdb8d;
  fill: #dbdb8d;
}

.mg-line11-color {
  stroke: #bcbd22;
}

.mg-hover-line11-color,.mg-area11-color {
  fill: #bcbd22;
}

.mg-line11-legend-color {
  color: #bcbd22;
  fill: #bcbd22;
}

.profile-photo {
  border-radius: 100%;
  background-clip: padding-box;
  border: 5px solid #fff;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
  width: 150px;
  height: 150px;
  display: block;
  margin: 24px auto 6px;
}

.profile-photo img {
  border-radius: 100%;
  background-clip: padding-box;
  width: 100%;
  height: auto;
}

.team {
  margin: 0 auto 20px;
}

#date-options {
  display: flex;
  justify-content: space-between;
  width: 40%;
  font-size: 120%;
  margin: 20px auto;
}

#date-options a {
  text-decoration: none;
}

#date-options a:hover {
  color: #bde1ff;
}

#date-select-box {
  color: #000;
  font-size: 1rem;
  min-width: 50px;
  text-align: center;
}

.detail-prose {
  color: #a0a0a0;
  margin-top: 80px;
  background-color: #131313;
  padding-top: 12px;
  padding-bottom: 12px;
}

.mg-x-axis text,.mg-y-axis text {
  font-size: .85rem;
  font-family: 'Open Sans';
}

.detail-header {
  color: #484848;
  font-size: 24px;
  font-weight: 400;
  border-top: 1px solid #1f1f1f;
  margin: 50px 0 20px;
  padding-left: 0;
}

path {
  stroke: #fff;
}

circle {
  fill: #fff;
}

.mg-line-legend text {
  font-size: .75rem;
  font-family: 'Open Sans';
}

.hero-p {
  padding-left: 80px;
}

.legal {
  margin-top: 20px;
}

.pill {
  margin: auto 10px auto 10px;
}

a.pill {
  color: white;
  text-decoration: none;
  padding: 2px 8px 2px 8px;
}

a.active {
  border: 0;
  color: #fff;
  text-decoration: none;
}

.mg-missing-text {
  transform: translate(-62px);
}

@media (max-width:450px) {
  .mg-x-axis text,.mg-y-axis text {
    font-size: .8rem;
  }

  .mg-active-datapoint,
  .mg-line-legend text {
    font-size: .65rem;
  }
}

@media (max-width:1200px) {
  .detail-prose {
    margin-top: 10px;
    border-left: 0;
  }

  .hero-p {
    padding-left: 15px;
  }
}

.data-last-updated {
  font-size: 0.9rem;
  font-style: italic;
  margin-top: 40px;
}

.error {
  text-align: center;
  margin: 80px auto;
}

.error h2 {
  color: #e99695;
}