@font-face {
  font-family: 'MaterialIcons';
  src: url('/assets/fonts/MaterialIcons-Regular.ttf');
}
@font-face {
  font-family: 'Open Sans';
  src: url('/assets/fonts/OpenSans-Regular.ttf');
}
@font-face {
  font-family: 'Roboto';
  src: url('/assets/fonts/Roboto-Regular.ttf');
}

.h1, h1, .h2, h2, .h3, h3 {
  font-family: Roboto;
}
.h1, h1 {
  font-size: 2rem;
}
.h2, h2 {
  font-size: 1.5rem;
}
.h3, h3 {
  font-size: 1.25rem;
}
.body, body {
  background-color: #f5f1ed;
}
.bg-base {
  background-color: #f5f1ed;
}
.code {
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
}
.btn {
  font-family: Roboto;
  font-size: 1rem;
  border-radius: .375rem;
  padding: 0.5rem 1rem;
}
.btn:hover {
  cursor: pointer;
}
.btn-primary {
  background-color: #4e4b4a;
  color: #f5f1ed;
  border: #7a7675;
}
.btn-primary:hover {
  background-color: #252323;
}
.btn-secondary {
  background-color: #9ba1af;
  color: #252323;
  border: #e0e0e0;
}
.btn-secondary:hover {
  background-color: #7e8698;
}
.divide {
  background-color: #252323;
}
.divide-x {
  width: 0.2rem;
}
.divide-y {
  height: 0.2rem;
}