@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
*,
::after,
::before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background: 0 0;
  text-decoration: none;
  outline: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: "onum", "kern", "liga", "clig", "calt";
  font-feature-settings: "onum", "kern", "liga", "clig", "calt";
}
  @font-face {font-family: 'Basel Neue';
    src: local('Basel Neue'),
	url('fonts/Basel Neue.eot'), /* IE9*/
  	url('fonts/Basel Neue.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('fonts/Basel Neue.woff2') format('woff2'), /* chrome、firefox */
	url('fonts/Basel Neue.woff') format('woff'), /* chrome、firefox */
	url('fonts/Basel Neue.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
	url('fonts/Basel Neue') format('svg'); /* iOS 4.1- */
	font-weight: 400;
    font-style: normal;
}

:root {
  --c-bg: hsl(0, 0%, 0%);
  --c-text: hsl(0, 0%, 90%);
  --c-decoration: #7e7e7e;
  --f-family: Basel Neue, sans-serif;
  --f-size: 13px;
  --f-height: 22px;
  --f-weight: 500;
  font-size: var(--f-height);
  font-family: var(--f-family);
  font-weight: var(--f-weight);
  background: var(--c-bg);
  color: var(--c-text);
}
@media (prefers-color-scheme: light) {
  :root {
    --c-bg: hsl(0, 0%, 100%);
    --c-text: hsl(0, 0%, 15%);
    --c-decoration: #9e9e9e;
  }
}
body {
  font-size: var(--f-size);
  line-height: var(--f-height);
}
html.inverted {
  --c-bg: hsl(0, 0%, 100%);
  --c-text: hsl(0, 0%, 15%);
  --c-decoration: hsl(0, 0%, 95%);
}
@media (prefers-color-scheme: light) {
  html.inverted {
    --c-bg: hsl(0, 0%, 0%);
    --c-text: hsl(0, 0%, 90%);
    --c-decoration: hsl(0, 0%, 15%);
  }
}
body,
html {
  width: 100%;
  height: 100%;
}
main {
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem 1.5rem;
  align-content: start;
  align-items: start;
}
@media (min-width: 900px) {
  main {
    grid-template-columns: repeat(2, 1fr);
  }
}
.column {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem 1.5rem;
  align-content: start;
  align-items: start;
}
@media (min-width: 1400px) {
  .column {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1399px) {
  .block:first-child::after {
    content: "—";
    margin: 1rem 0 0;
    display: block;
  }
}
@media (max-width: 899px) {
  .column:last-child .block:first-child::before {
    content: "—";
    margin: 0 0 1rem;
    display: block;
  }
}
dd:not(:last-child),
dt,
h1,
h2,
p:not(:last-child) {
  margin-bottom: 1rem;
}
dl,
section {
  max-width: 50ch;
}
a {
  cursor: pointer;
  transition: color 150ms ease-out;
}
a:hover {
  color: var(--c-decoration);
}
.arrowed::after,
dd a::after {
  content: "→";
  display: inline-block;
  margin-left: 0.25rem;
  transition: color 200ms, transform 200ms;
  transition: color 200ms, transform 200ms, -webkit-transform 200ms;
  color: var(--c-decoration);
}
.arrowed:hover::after,
dd a:hover::after {
  color: var(--c-text);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.arrowed_2::before,
 a_2::before {
  content: "←";
  display: inline-block;
  margin-right: 0.25rem;
  transition: color 200ms, transform 200ms;
  transition: color 200ms, transform 200ms, -webkit-transform 200ms;
  color: var(--c-decoration);
}
.arrowed_2:hover::before,
 a_2:hover::before {
  color: var(--c-text);
}

@media (max-width: 1399px) {
  .features dd {
    margin-bottom: 0;
  }
}
.features dd {
  margin-bottom: 0;
}
.features {
  margin-bottom: 1rem;
}
.block {
  opacity: 0;
  -webkit-animation: fade-in 2000ms forwards linear;
  animation: fade-in 2000ms forwards linear;
}
.column:first-child .block:first-child {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.column:first-child .block:last-child {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.column:last-child .block:first-child {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.column:last-child .block:last-child {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}