* { box-sizing: border-box; color: inherit; font-size: inherit; font-family: inherit }

:root {
    --color: white;
    --color-disabled: #888888;
    --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --bg-1: #212121;
    --bg-b: #1890ff; 
    --bg-b-disabled: #fafafa; 
}

button { padding: .5em 1em; width: fit-content; background: var(--bg-b); border: none; border-radius: .25em; transition: .2s }
button:disabled { background: var(--bg-b-disabled); color: var(--color-disabled); opacity: .5 }
button:hover { cursor: pointer; filter: brightness(1.15) }
button:active { filter: brightness(1.3) }
button:disabled:hover { cursor: not-allowed }

body { color: var(--color); margin: 0; background: var(--bg-1); font-family: var(--font-family) }
main { display: flex; margin: auto; padding: 1em; width: min(500px, 100vw); gap: 2em; flex-direction: column }
main h1 { text-align: center; font-size: 1.5em; font-weight: 400 }
.section { display: flex; gap: .5em; flex-direction: column }
.section h2 { font-weight: 400; margin: 0 }
.section p { margin: 0; opacity: .5 }


.select-file button { display: flex; padding: 1em; width: 100%; color: var(--bg-1); background: var(--bg-b-disabled); flex-direction: column; align-items: center; gap: 1em }
.select-file button svg { color: var(--bg-b); width: 3em; height: 3em }
.select-file .file { display: flex; align-items: center; gap: .5em}



.github a { display: flex; margin: auto; padding: .6em 2em; width: fit-content; font-size: .9em; align-items: center; gap: .5em; text-decoration: none }
.github a:hover { text-decoration: underline }
.github a svg { width: 1.5em; height: 1.5em }