html {
  box-sizing: border-box;
  font-size: 62.5%;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  color: $text-color;
  font-family: 'Noto Sans', sans-serif;
  line-height: 1.58;
}

body,
.grid__cell {
  font-size: 1.8rem;

  @include respond-to( 'medium' ) {
    font-size: 2.1rem;
  }
}

hr {
  border-bottom: 1px solid $text-color;
  border-top: 0;
}

a {
  color: $theme-color;
  text-decoration: none;

  &:hover,
  &:focus {
    text-decoration: underline;
  }
}

code {
  background-color: rgb(238, 238, 238);
}

pre {
  background-color: rgb(238, 238, 238);
  font-size: 1.2rem;
  overflow-x: auto;
  padding: 20px;
}

h3 {
  margin-bottom: 1em;
  margin-top: 1.5em;
}

h5 {
  margin-bottom: 0.3em;
  margin-top: 1em;
}

.description {
  font-size: 1.4rem;
  margin-bottom: 30px;
}

.badge {
  display: inline-block;
  height: 30px;
  margin-left: 10px;
  vertical-align: middle;
  width: auto;
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;

  @include respond-to( 'medium' ) {
    max-width: 740px;
  }
}

.section {
  padding-bottom: 60px;
  padding-top: 60px;
}

.section.-no-top-padding {
  padding-top: 0;
}

.section.-no-bottom-padding {
  padding-bottom: 0;
}

.cover {
  color: rgb(255, 255, 255);
}

.cover__overlay {
  background-color: transparentize($theme-color, 0.2);
}

.demo-bg {
  height: 300px;
}

.demo-el {
  padding-top: 56.25%;
}