@font-face {
  font-family: 'JetBrains Mono Nerd Font';
  src: url('/fonts/JetBrainsMonoNerdFont-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  font-family: 'JetBrains Mono Nerd Font', monospace;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  background: var(--base);
  color: var(--text);

  /* Accents */
  --rosewater: #f2d5cf;
  --flamingo:  #eebebe;
  --pink:      #f4b8e4;
  --mauve:     #ca9ee6;
  --red:       #e78284;
  --maroon:    #ea999c;
  --peach:     #ef9f76;
  --yellow:    #e5c890;
  --green:     #a6d189;
  --teal:      #81c8be;
  --sky:       #99d1db;
  --sapphire:  #85c1dc;
  --blue:      #8caaee;
  --lavender:  #babbf1;

  /* Text */
  --text:      #c6d0f5;
  --subtext-1: #b5bfe2;
  --subtext1:  #b5bfe2;
  --subtext_1: #b5bfe2;
  --subtext-0: #a5adce;
  --subtext0:  #a5adce;
  --subtext_0: #a5adce;

  /* Overlays */
  --overlay-2: #949cbb;
  --overlay2:  #949cbb;
  --overlay_2: #949cbb;
  --overlay-1: #838ba7;
  --overlay1:  #838ba7;
  --overlay_1: #838ba7;
  --overlay-0: #737994;
  --overlay0:  #737994;
  --overlay_0: #737994;

  /* Surfaces */
  --surface-2: #626880;
  --surface2:  #626880;
  --surface_2: #626880;
  --surface-1: #51576d;
  --surface1:  #51576d;
  --surface_1: #51576d;
  --surface-0: #414559;
  --surface0:  #414559;
  --surface_0: #414559;

  /* Backgrounds */
  --base:   #303446;
  --mantle: #292c3c;
  --crust:  #232634;

  /* Prefixed aliases (ctp-frappe-*) */
  --ctp-frappe-rosewater: #f2d5cf;
  --ctp-frappe-flamingo:  #eebebe;
  --ctp-frappe-pink:      #f4b8e4;
  --ctp-frappe-mauve:     #ca9ee6;
  --ctp-frappe-red:       #e78284;
  --ctp-frappe-maroon:    #ea999c;
  --ctp-frappe-peach:     #ef9f76;
  --ctp-frappe-yellow:    #e5c890;
  --ctp-frappe-green:     #a6d189;
  --ctp-frappe-teal:      #81c8be;
  --ctp-frappe-sky:       #99d1db;
  --ctp-frappe-sapphire:  #85c1dc;
  --ctp-frappe-blue:      #8caaee;
  --ctp-frappe-lavender:  #babbf1;
  --ctp-frappe-text:      #c6d0f5;
  --ctp-frappe-subtext1:  #b5bfe2;
  --ctp-frappe-subtext0:  #a5adce;
  --ctp-frappe-overlay2:  #949cbb;
  --ctp-frappe-overlay1:  #838ba7;
  --ctp-frappe-overlay0:  #737994;
  --ctp-frappe-surface2:  #626880;
  --ctp-frappe-surface1:  #51576d;
  --ctp-frappe-surface0:  #414559;
  --ctp-frappe-base:      #303446;
  --ctp-frappe-mantle:    #292c3c;
  --ctp-frappe-crust:     #232634;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--base);
}

button,
a {
  font: inherit;
}

a {
  color: inherit;
}

:root {
  --bg:            var(--base);
  --bg-secondary:  var(--mantle);
  --fg:            var(--text);
  --link:          var(--blue);
  --success:       var(--green);
  --warning:       var(--yellow);
  --error:         var(--red);
  --cursor:        var(--text);
}