@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/dm-sans-400.woff2) format('woff2');
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/dm-sans-500.woff2) format('woff2');
}

#logo {
    height: 8em;
    width: 100%;
    margin-bottom: 2em;
    background: url(../img/Urbicon_Pipe.svg) no-repeat center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

body {
    background-color: #FAF9F6;
    transition: background-color 200ms ease, color 200ms ease;
}

html.dark {
    color-scheme: dark;
}

html.dark body {
    background-color: #18181b;
}

html.dark .text-neutral-800 {
    color: #a1a1aa;
}

html.dark .text-neutral-500 {
    color: #a1a1aa;
}

html.dark .text-neutral-400 {
    color: #71717a;
}

html.dark .hover\:text-neutral-800:hover {
    color: #f4f4f5;
}

#theme-menu {
    transition: opacity 150ms ease;
}

html.dark #theme-menu {
    background-color: #27272a;
    ring-color: rgba(255, 255, 255, 0.1);
}

html.dark .theme-option {
    color: #a1a1aa;
}

html.dark .theme-option:hover {
    background-color: #3f3f46;
}