@use './variables' as *;

@font-face {
  font-family: 'title font';
  src: url('@/assets/fonts/syncopate.woff2') format('woff2'),
       url('@/assets/fonts/syncopate.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html {
  font-size: $base-font-size;
  font-family: Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  color: $primary;
  margin-top: 6 * $base-increment;
  margin-bottom: 2 * $base-increment;
  font-size: 2rem;
  font-weight: 400;
}
.w-app h1.headline {margin-bottom: 30px;}

h2 {
  color: $primary;
  margin-top: 12 * $base-increment;
  margin-bottom: 3 * $base-increment;
  font-size: 1.6rem;
  font-weight: 400;
}

h3 {
  margin-top: 6 * $base-increment;
  margin-bottom: 2 * $base-increment;
  font-size: 1.25rem;
  font-weight: 400;
}

h4 {font-size: 1rem;}

.headline {
  margin-top: 10 * $base-increment;
  margin-bottom: 5 * $base-increment;
}

.title2 {
  margin-top: 4 * $base-increment;
  margin-bottom: 2 * $base-increment;
}

.title3 {margin-bottom: 2 * $base-increment;}

.title4 {margin-bottom: 2 * $base-increment;}

.title5 {margin-bottom: 2 * $base-increment;}

code, .code, kbd {
  display: inline-block;
  font-family: monospace;
}

code {
  padding: 1px 4px;
  background-color: rgba(130, 130, 130, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: $border-radius;
  color: #2a4459;
  font-size: 0.9em;
}

.code {color: #000;}

kbd {
  padding: 1px 5px 2px;
  background-color: rgba(130, 130, 130, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: $border-radius;
  color: rgba(0, 0, 0, 0.55);
  box-shadow: inset -1px -1px 1px rgba(0, 0, 0, 0.1), inset 1px 1px 2px rgba(255, 255, 255, 1);
}
