@font-face {
  font-family: 'FK Grotesk';
  font-style: normal;
  font-weight: 700;
  src: url('FKGrotesk-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Saans Mono';
  font-style: normal;
  font-weight: 400;
  src: url('saansmono-regular.woff2') format('woff2');
}

:root {
  --colors-bg: #fff;
  --colors-foreground: #1e1e1e;
  --colors-secondary: rgb(30 30 30 / 40%);
}

html,
body {
  box-sizing: border-box;
  margin: 0;
  overflow-x: hidden;
  padding: 0;
  width: 100%;
}

html {
  background-color: var(--colors-bg);
  color: var(--colors-foreground);
}

body {
  align-items: center;
  display: flex;
  font-family:
    'Saans Mono', ui-monospace, Menlo, Consolas, 'Liberation Mono',
    'DejaVu Sans Mono', 'Noto Sans Mono', 'Courier New', Monaco, monospace;
  font-size: 14px;
  font-weight: 400;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1.5;
  min-height: 100vh;
}

p,
h1 {
  margin: 0;
}

.container {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 100%;
  min-height: 100dvh;
  width: 100%;
}

.content-container {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 48rem;
  padding: 3rem;
  padding-bottom: 6rem;
  width: 100%;
}

.logo {
  height: 2rem;
  width: 2rem;
}

.title {
  font-family:
    'FK Grotesk',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.05rem;
  line-height: 110%;
  margin-top: 3rem;
  text-align: center;
}

.description {
  margin-top: 1.5rem;
  text-align: center;
}

.date {
  color: var(--colors-secondary);
  margin-top: 1.5rem;
  text-align: center;
}

@media (width <= 359px) {
  .content-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}