@font-face {
  font-family:HelveticaNowText;
  src:url(/static/assets/font/regular.otf)format("opentype");
  font-weight:400;
  font-style:normal
}
@font-face {
  font-family:HelveticaNowText;
  src:url(/static/assets/font/bold.otf)format("opentype");
  font-weight:700;
  font-style:normal
}
@font-face {
  font-family:HelveticaNowText;
  src:url(/static/assets/font/bold-italic.otf)format("opentype");
  font-weight:700;
  font-style:italic
}
@font-face {
  font-family:HelveticaNowText;
  src:url(/static/assets/font/italic.otf)format("opentype");
  font-weight:400;
  font-style:italic
}
:root {
    --link-color: DodgerBlue;
    --dark-color: black;
    --light-color: white;
    --disabled-bg-color: gray;
    --disabled-fg-color: #ccc;
}
[data-theme="dark"] {
    --link-color: DodgerBlue;
    --dark-color: white;
    --light-color: black;
    --disabled-bg-color: #222;
    --disabled-fg-color: #555;
}

a {
    text-decoration: none;
    color: var(--link-color) !important;
}
a:visited {
    text-decoration: none;
    color: var(--link-color) !important;
}
html *, ::file-selector-button {
    font-family: HelveticaNowText,Helvetica Now,HelveticaNow,Inter,Helvetica,Arial,sans-serif;
    color: var(--dark-color)
}
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--light-color);
}

input {
    display: block;
}
progress {
    display: block;
}
h2 {
    margin-bottom: 0;
}
.title {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    width: 75%;
    margin-block: 24px;
}
.title > h1 {
    margin-inline: 10px;
    margin-block: 0;
}
a.github-link {
    color: var(--disabled-fg-color) !important;
    font-size: small;
}
.theme-btn-svg {
    width: 32px;
    height: 32px;
    cursor: pointer;
    fill: var(--dark-color);
}

p {
    width: 80%;
    text-align: center;
    margin-top: 0;
}
.form-title {
    background-color: var(--dark-color);
    color: var(--light-color);
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.form {
    width: 75%;
    border-radius: 4px;
    border: 4px solid var(--dark-color);
    border-top: 0px;
    margin-bottom: 32px;
}
.form-contents {
    display: flex;
    flex-direction: column;
}
.form-file-entry-container {
    flex-wrap: wrap;
    flex-grow: 1;
    display: flex;
    flex-direction: row;
}
.form-file-entry {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    padding: 10px;
}

.form-submit {
    width: 100%;
    border: none;
    border-radius: 0;
    border-top: 4px solid var(--dark-color);
}
.form-submit:disabled {
    color: var(--disabled-fg-color);
    background-color: var(--disabled-bg-color);
    cursor: progress;
}

label {
    font-weight: 100;
}

ul {
    margin-top: 0px;
}
::file-selector-button, button {
    background-color: var(--light-color);
    padding: 10px;
    border-radius: 0 6px 6px 6px;
    border: 4px solid var(--dark-color);
    cursor: pointer;
}


.folder-tab::before {
    content: "";
    display: block;
    cursor: pointer;
    width: 42px;
    height: 4px;
    border-radius: 4px 4px 0 0;
    background-color: var(--dark-color);
}

::file-selector-button:hover, button:hover {
  background-color: var(--dark-color);
  color: var(--light-color);
}


footer * {
    display: inline-block;
}

br {
    margin: 16px;
}