@font-face {
  font-family: 'Geist';
  src:  url('../geist/statics-woff/Geist-Light.woff2') format('woff2'),
        url('../geist/statics-woff/Geist-Light.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src:  url('../geist/statics-woff/Geist-SemiBold.woff2') format('woff2'),
        url('../geist/statics-woff/Geist-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Geist', sans-serif;
  color: #49576D;
  font-size: 16px;
  line-height: 1.5;
}

a {
  color: #0f00ef;
  text-decoration: none;
  transition: all 0.5s ease 0s;
}
a.alt {
  color: #3a4657;
}
.card a.alt {
  color: #929aa7;
}
a:hover {
  color: #540bad;
}

h1, h2, h3 {
  font-family: 'Space Grotesk', sans-serif;
}
h1, h2, h3, .text-gray {
  color: #161a21
}


.tag {
  white-space: nowrap;
  background-color: #eee;
  color: #444;
  border-radius: 50px;
  padding: 3px 8px;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.5;
}
.highlight {
  background-color: #fef6cc;
  color: #161a21
}
.fade {
  color: #929aa7
}
.break {
  word-break: break-all;
}
.no-break {
  white-space: nowrap;
}

.w-800 {
  max-width: 800px;
}
.w-600 {
  max-width: 600px;
}
.w-500 {
  max-width: 500px;
}
.w-400 {
  max-width: 400px;
}

pre {
  margin: 0
}
.code, code {
  font-family: 'Space Mono', monospace;
  background-color: #eee;
  padding: 0 5px;
  border-radius: 3px;
  display: inline-block;
}
code {
  display: block;
  padding: 10px;
  overflow-x: scroll
}