@font-face {
  font-family: 'Futura';
  src: url('./Futura.ttc');
}

:root {
    color-scheme: light dark;
    --bg-color: #FFFFFF;
    --content-bg-color: #F5F5F7;
    --font-color: rgba(0,0,0,1);
    --p-font-color: rgba(0,0,0,0.6);
    --footer-font-color: rgba(0,0,0,0.6);
    --footer-font-color-lighter: rgba(0,0,0,0.3);
    --input-font-color: rgba(0,0,0,0.7);
    --input-font-color-focus: rgba(0,0,0,1);
    --border-color: rgba(0,0,0,0.12);
    --border-color-focus: #44D7B6;
    --border-color-active: #3BBC9F;
    --qr-opacity: calc(1);
    --qr-opacity-hover: calc(1);
    --upload-color: rgba(102,102,102,1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #000000;
        --content-bg-color: #1D1D1F;
        --font-color: rgba(255, 255, 255, .9);
        --p-font-color: rgba(255,255,255,0.6);
        --footer-font-color: rgba(255,255,255,0.6);
        --footer-font-color-lighter: rgba(255,255,255,0.3);
        --input-font-color: rgba(255,255,255,0.7);
        --input-font-color-focus: rgba(255,255,255,.9);
        --border-color: rgba(255,255,255,0.18);
        --border-color-focus: #44D7B6;
        --qr-opacity: calc(0.5);
        --qr-opacity-hover: calc(0.65);
        --upload-color: rgba(150,150,150,1);
    }
}

body {
    background-color: var(--bg-color);
  margin: 0;
  font-family: 'Futura', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}