@font-face {
  font-family: "JetBrains";
  src: 
      local("JetBrainsMono-Medium.ttf"),
      url("../fonts/JetBrainsMono/JetBrainsMono-Regular.woff2") format("woff2"),
      url("../fonts/JetBrainsMono/JetBrainsMono-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}

@font-face {
    font-family: "JetBrains";
    src:
        local("JetBrainsMono-MediumItalic.ttf"),
        url("../fonts/JetBrainsMono/JetBrainsMono-Italic.woff2") format("woff2");
    font-style: italic;
    font-weight: normal;
}

@font-face {
    font-family: "JetBrains";
    src:
        local("JetBrainsMono-Bold.ttf"),
        url("../fonts/JetBrainsMono/JetBrainsMono-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: "JetBrains";
    src:
        local("JetBrainsMono-BoldItalic.ttf"),
        url("../fonts/JetBrainsMono/JetBrainsMono-BoldItalic.woff2") format("woff2");
    font-style: italic;
    font-weight: bold;
}

@font-face {
    font-family: "JetBrains";
    src:
        local("JetBrainsMono-ExtraBold.ttf"),
        url("../fonts/JetBrainsMono/JetBrainsMono-ExtraBold.woff2") format("woff2");
    font-style: normal;
    font-weight: bolder;
}

@font-face {
    font-family: "JetBrains";
    src:
        local("JetBrainsMono-ExtraBoldItalic.ttf"),
        url("../fonts/JetBrainsMono/JetBrainsMono-ExtraBoldItalic.woff2") format("woff2");
    font-style: italic;
    font-weight: bolder;
}

@font-face {
    font-family: "JetBrains";
    src:
        local("JetBrainsMono-Light.ttf"),
        url("../fonts/JetBrainsMono/JetBrainsMono-Light.woff2") format("woff2");
    font-style: normal;
    font-weight: lighter;
}

@font-face {
    font-family: "JetBrains";
    src:
        local("JetBrainsMono-LightItalic.ttf"),
        url("../fonts/JetBrainsMono/JetBrainsMono-LightItalic.woff2") format("woff2");
    font-style: italic;
    font-weight: lighter;
}


:root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-background: #191921;
    --color-text: #E0D4A4;
    --error-color: #FF2A1E;
    --color-code-background: #3D3D3D;
    --color-th-background: #3D3D3D;
    --color-code: white;
    --color-link-visited: #E496E7;
    --color-link-normal: #4880E7;
    --color-select-background:#EAE3C4;
    --color-optional-input:#B8B8B8;
    --color-button-background:#645822;
    --color-button-background-disabled:#645822;
    --color-button-border:#EAE3C2;
    --color-button-text: #E7E0BA;
    
    /* fonts */
    --font-family: "JetBrains";
    
    --font-size-standard: 20px;
    --font-size-h6: 24px;
    --font-size-h5: 28px;
    --font-size-h4: 32px;
    --font-size-h3: 36px;
    --font-size-h2: 40px;
    --font-size-h1: 48px;
    --font-size-td: 20px;
    --font-size-th: 24px;
    
    --font-weight-th: bolder;
    --font-weight-strong: bolder;
    
    --font-style-em: italic;
}

html {
    padding:0px;
    margin:0px;
}

body {
    padding:0px;
    margin:0px;
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: 16px;
}

.header {
    margin:0px;
    /*padding:10px;*/
}

main {
    padding:0px 10px 0px 10px;
}

h6 {
    font-family: var(--font-family);
    font-weight: bold;
    font-size: var(--font-size-h6);
    text-decoration: none;
}

h5 {
    font-family: var(--font-family);
    font-weight: bold;
    font-size: var(--font-size-h5);
    text-decoration: none;
}

h4 {
    font-family: var(--font-family);
    font-weight: bold;
    font-size: var(--font-size-h4);
    text-decoration: none;
}

h3 {
    font-family: var(--font-family);
    font-weight: bold;
    font-size: var(--font-size-h3);
    text-decoration: none;
}

h2 {
    font-family: var(--font-family);
    font-weight: bolder;
    font-size: var(--font-size-h2);
    text-decoration: none;
}

h1 {
    font-family: var(--font-family);
    font-weight: bolder;
    font-size: var(--font-size-h1);
    text-decoration: none;
}

em {
    font-style: var(--font-style-em);
}

strong {
    font-weight: var(--font-weight-strong);
}

th {
    background-color: var(--color-th-background);
    color: var(--color-text);
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: var(--font-size-th);
    font-weight: var(--font-weight-th);
}


td {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: var(--color-text);
    font-size: var(--font-size-td);
}

tr {
    margin: 0px;
    padding: 0px;
}

hr {
    color: var(--color-text);
}

a,a:hover {
    text-decoration: underline;
    color: var(--color-link-normal);
}
a:visited {
    text-decoration: underline;
    color: var(--color-link-visited);
}


.left {
    text-align: left;
}


.center {
    text-align: center;
    align-self: center;
    align-items:center;
}

.right {
    text-align: right;
}

.error {
    color: var(--error-color);
}

.frame {
    border-width: 2px;
    border-radius: 5px;
    border-style: solid;
    border-color: var(--color-text);
}

.frame-table th,
.frame-table td {
    padding: 5px;
    border-width: 0px;
}
.center-box {
  align-content:center;
  text-align: center;
  width: 100%;
}

.login-box {
    min-width: 400px;
    max-width: 600px;
    position: relative;
    display: inline-block;
    padding: 20px;
}

.full-width {
    width: 100%;
}

label {
    font-size: 16px;
}

input[type=email],
input[type=password],
input[type=text],
input[type=number]
{
    --color-text: #E0D4A4;
    height: 20px;
    font-size: 16px;
    background-color: var(--color-text);
    color: var(--color-background);
    border-radius: 3px;
    border-width: 0px;
}

input[type=submit],
button,
.button
{
    background-color: var(--color-button-background);
    border: 1px solid var(--color-button-border);
    border-radius: 3px;
    padding:4px;
    font-size: 16px;
    color: var(--color-button-text);
}

input[type=submit]:disabled,
input[type=submit]:invalid,
button:disabled,
button:invalid,
.button:disabled,
.button:invalid
{
    background-color: var(--color-button-background-disabled);
}


select {
    height:20px;
    font-size:16px;
    background-color: var(--color-select-background);
    color: var(--color-background);
    border-radius:4px;
    border-width: 0px;
}

.optional-input {
    background-color: var(--color-optional-input);
}

code {
    background-color: var(--color-code-background);
    color: var(--color-code);
}

.td-color {
    background-color: var(--color-background);
    color: var(--color-text);
}

.shrink-to-fit {
    width:0.1%;
    white-space:nowrap;
}

.standard-background {
    background-color: var(--color-background);
}

fieldset {
    border: 3px solid var(--color-text);
    border-radius: 8px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.margin-5 {
    margin: 5px;
}

.margin-10 {
    margin: 10px;
}

.command-output {
    padding:10px;
    height:20em;
    width:800px;
    background-color:var(--color-code-background);
    color:white;
}


.icon-back {
    content:url('../icons/back.svg');
}

.icon-delete {
    content:url('../icons/delete.svg');
}

.icon-directory {
    content:url('../icons/directory.svg');
}

.icon-empty {
    content: url('../icons/empty.svg');
}

.icon-file {
    content: url('../icons/file.svg');
}

.list-icon {
    width: 24;
    height: 24;
}

.toolbar-button {
    background-color: var(--background-color);
    border: 1px solid var(--color-text);
}

.toolbar-item {
    margin-right: 5px;
}