html {
  background-color: #f2f4f5;
  font-family: XfinityStandard, Helvetica, Arial, sans-serif;
  font-size: 62.5%;
  min-height: 100vh;
  -ms-text-size-adjust: 100%; /* normalize.css */
  -webkit-text-size-adjust: 100%; /* normalize.css */
}

body {
  display: flex;
  flex-direction: column;
  font-size: 1.6rem;
  margin: 0; /* normalize.css */
  min-height: 100vh;
}

xc-header {
  background: #000;
  display: block;
  flex: 0 1 auto;
}

xc-footer {
  display: block;
  flex: 1 0 auto;
}

/* pages */
main {
  min-height: 80vh;
}

section + section {
  padding-top: 3.2rem;
}

/* layout */
.card {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 0.3rem;
  padding: 1.8rem 1.8rem 2.4rem;
}

/* typography */
a {
  color: var(--color-blue-sky);
  outline: none;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #2b9cd8; /* var(--color-blue-ocean) was not reaching into the polaris header component */
}

a:active {
  color: var(--color-blue-moon);
}

a:focus {
  text-decoration: underline;
}

h2 {
    color: #191919;
    font-size: 2rem;
    font-weight: var(--font-weight-extralight);
    letter-spacing: var(--letter-spacing-wide);
    line-height: 1.5;
    margin: 1.2rem 0;
    text-transform: none;
}

@media only screen and (min-width: 102.4rem) {
    h2 {
        font-size: 2.4rem;
        line-height: 1.5
    }
}

h3 {
    color: #191919;
    font-size: 1.8rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
    line-height: 1.5;
    margin: 0;
    text-transform: none;
}

p {
  margin-top: 0.4rem;
}

@media only screen and (min-width: 102.4rem) {
    h3 {
        font-size: 2rem;
        line-height: 1.5
    }
}

@font-face {
  font-family: XFINITYStandard;
  font-weight: 100;
  font-style: normal;
  src: url("https://sdx.xfinity.com/fonts/latest/Xfinity_Standard/XfinityStandard-Thin.woff2") format("woff2"),
      url("https://sdx.xfinity.com/fonts/latest/Xfinity_Standard/XfinityStandard-Thin.woff") format("woff"),
      url("https://sdx.xfinity.com/fonts/latest/Xfinity_Standard/XfinityStandard-Thin.ttf") format("truetype");
}

@font-face {
  font-family: XFINITYStandard;
  font-weight: 200;
  font-style: normal;
  src: url("https://sdx.xfinity.com/fonts/latest/Xfinity_Standard/XfinityStandard-ExtraLight.woff2") format("woff2"),
      url("https://sdx.xfinity.com/fonts/latest/Xfinity_Standard/XfinityStandard-ExtraLight.woff") format("woff"),
      url("https://sdx.xfinity.com/fonts/latest/Xfinity_Standard/XfinityStandard-ExtraLight.ttf") format("truetype");
}

@font-face {
  font-family: XFINITYStandard;
  font-weight: 300;
  font-style: normal;
  src: url("https://sdx.xfinity.com/fonts/latest/Xfinity_Standard/XfinityStandard-Light.woff2") format("woff2"),
      url("https://sdx.xfinity.com/fonts/latest/Xfinity_Standard/XfinityStandard-Light.woff") format("woff"),
      url("https://sdx.xfinity.com/fonts/latest/Xfinity_Standard/XfinityStandard-Light.ttf") format("truetype");
}

@font-face {
  font-family: XFINITYStandard;
  font-weight: normal;
  font-style: normal;
  src: url("https://sdx.xfinity.com/fonts/latest/Xfinity_Standard/XfinityStandard-Regular.woff2") format("woff2"),
      url("https://sdx.xfinity.com/fonts/latest/Xfinity_Standard/XfinityStandard-Regular.woff") format("woff"),
      url("https://sdx.xfinity.com/fonts/latest/Xfinity_Standard/XfinityStandard-Regular.ttf") format("truetype");
}

@font-face {
  font-family: XFINITYStandard;
  font-weight: 500;
  font-style: normal;
  src: url("https://sdx.xfinity.com/fonts/latest/Xfinity_Standard/XfinityStandard-Medium.woff2") format("woff2"),
      url("https://sdx.xfinity.com/fonts/latest/Xfinity_Standard/XfinityStandard-Medium.woff") format("woff"),
      url("https://sdx.xfinity.com/fonts/latest/Xfinity_Standard/XfinityStandard-Medium.ttf") format("truetype");
}

@font-face {
  font-family: XFINITYStandard;
  font-weight: bold;
  font-style: normal;
  src: url("https://sdx.xfinity.com/fonts/latest/Xfinity_Standard/XfinityStandard-Bold.woff2") format("woff2"),
      url("https://sdx.xfinity.com/fonts/latest/Xfinity_Standard/XfinityStandard-Bold.woff") format("woff"),
      url("https://sdx.xfinity.com/fonts/latest/Xfinity_Standard/XfinityStandard-Bold.ttf") format("truetype");
}