 body {
  margin: 0;
  font: 100%/1.5 AvenirNext-Regular, "Lucida Grande", "Segoe Ui", "Trebuchet Ms", sans-serif;
  background: inherit;
  color: #111;
  min-height: 100%;
  box-sizing: border-box;
}

.bg-dark,
.bg-dark body {
  background-color: #726d8b;
  color: #fff;
}

.header {
  background: hsl(240,50%,96%);
}

.header {
  padding: 2em 1em;
  text-align: center;

  @media(min-width: 640px) {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 67%, 80% 75%, 75% 100%, 25% 100%, 20% 75%, 0 67%);
    clip-path: polygon(0 0, 100% 0, 100% 67%, 80% 75%, 75% 100%, 25% 100%, 20% 75%, 0 67%);
    padding-top: .5em;
    padding-bottom: 5em;
  }
}

.header a,
.footer a {
  color: #515167;
}

.header p {
  font-size: 1em;
  padding-top: 1em;
  margin: 0;
  letter-spacing: 1px;
  word-spacing: -1px;

  @media(max-width: 639px) {
    font-size: .875em;
  }

  @media(min-width: 860px) {
    position: absolute;
    bottom:0;left:0;right:0;
    padding-bottom: 2em;
  }
}

[id="logo-glyphs-base"] {
  color: #e66e33;
}

// .bg-dark .header a {
//   color: #ffa142;
//   transition: all .3s;
//   &:hover {
//     color: #ffc285;
//   }
// }
h1 {
  margin: 0;
  display: inline-block;
  font-size: 2.5rem;
}
//
 // logo
.logo {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  // background-color: salmon;
  // outline: 1px dotted grey;

  @media(min-width: 320px) {
    width: 288px;
    height: 0;
    padding-bottom: 20%;
  }
  @media(min-width: 690px) {
    min-width: 555px;
    width: 90vw;
  }
}

img,
svg {
  max-width: 100%;
}

.logo svg {
  @media(max-width: 319px) {
    display: none;
  }
  @media(min-width: 320px) {
    position: absolute;
    top:0;right:0;bottom:0;left:0;
  }
}

// .bg-dark [id*="logo-glyphs"],
// .bg-dark [id="logo-glyphs-2"] {
//   fill: #d9d2fe;
// }
//
// .bg-dark [id="logo-glyphs-2"] {
//   fill: #d9d2fe;
// }

// [class*="bg-"] [id*="-inner"],
// [class*="bg-"] [id*="-gt-"] path {
//   fill: currentColor;
// }

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

// .github-corner svg[style] {
//   color: #545167 !important;
// }
//
.nav-themes-hidden {
  width: 0;
  overflow: hidden;
}

// [class*="bg-"] [id="logo-glyphs-gt-1"] path,
nav,
.container-flex,
h3,
section {
  opacity: 0;
}
