@font-face {
    font-family: 'monoubuntu';
    src: url('/font/ubuntumono-b-webfont.woff2') format('woff2'),
    url('/font/ubuntumono-b-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'monoubuntu';
    src: url('/font/ubuntumono-r-webfont.woff2') format('woff2'),
    url('/font/ubuntumono-r-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

:root {
    --color-bg: #3c3836;
    --color-bg-darker: #1d2021;
    --color-fg: #ebdbb2;
    --color-red: #cc241d;
    --color-green: #b8bb26;
    --color-yellow: #fabd2f;
    --color-blue: #458588;
    --color-purple: #b16286;
    --color-aqua: #8ec07c;
    --color-gray: #a89984;
    --color-orange: #fe8019;
    --color-orange-dark: #f65d0e;
    --page-max-width: 120ch;
}

html, body {
    background-color: var(--color-bg-darker);
    color: var(--color-fg);
    height: 100%;
}

html, body, h1, h2, h3, h4, h5, h6, p, i, table, code, ul, ol, li, input, textarea {
    font-family: 'monoubuntu', monospace;
    font-size: 1rem;
    font-weight: normal;
}

html, body, h1, h2, h3, h4, h5, h6, pre {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    margin-bottom: 1rem;
}

h1, h2, h3, h4 {
    color: var(--color-yellow);
    font-weight: bold;
}

h3, h4 {
    color: var(--color-green);
    font-weight: normal;
}

h5, h6 {
    color: var(--color-orange);
    font-weight: normal;
}

h1:before, h2:before, h3:before, h4:before, h5:before, h6:before {
    color: var(--color-orange-dark);
}

h1:before {
    content: "# ";
    color: var(--color-orange-dark);
}

h2:before {
    content: "## ";
    color: var(--color-orange-dark);
}

h3:before {
    content: "### ";
    color: var(--color-orange-dark);
    font-weight: bold;
}

h4:before {
    content: "#### ";
    color: var(--color-orange-dark);
    font-weight: bold;
}

h5:before {
    content: "###### ";
    color: var(--color-orange-dark);
}

h6:before {
    content: "####### ";
    color: var(--color-orange-dark);
}

body {
    display: grid;
    place-items: center; /* Centers content both horizontally and vertically */
    height: 100vh; /* Full viewport height */
    margin: 0; /* Remove default margin */
    text-align: left; /* Resets text alignment for child elements */
}


input {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--color-fg);
    color: var(--color-fg);
    /*margin: 0 5px;*/
    line-height: 1.2rem;
    outline: none;
}

input[type=submit] {
    border: 1px solid var(--color-fg);
}



code {
    display: inline;
    background: var(--color-bg-darker);
    color: var(--color-red);
    padding: 0 .1rem;
}

pre {
    white-space: pre-wrap;
    word-break: break-all;
}

pre code {
    display: block;
    margin: 1rem 0;
    padding: 1rem 0;
    border-left: none;
    border-right: none;
    color: var(--color-aqua);
    overflow-x: auto;
    background: var(--color-bg-darker);
    border-left: 1rem solid var(--color-bg-darker);
    border-right: 1rem solid var(--color-bg-darker);
}


img {
    max-width: 100%;
    height: auto;
    margin-bottom: 1rem;
    background: #ffffff;
}

table {
    margin-bottom: 1rem;
}

table, tr, th, td {
    border: 1px solid var(--color-fg);
}

th, td {
    padding: .25rem;
    text-align: start;
}

a, a:visited, a:active {
    color: inherit;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 800px;
    background: #3c3836;
}

.term-body {
    flex-grow: 1; /* This makes the shell body expand to fill available space */
    overflow-y: auto; /* Adds scroll if content overflows */
    /* Add additional styling as needed */
}

.term-input {
    position: sticky;
    bottom: 0;
    padding: 10px 0;
    background: #3c3836;
    /* Add additional styling as needed */
}

.term-input input[type="text"] {
    width: max-content; /* Makes the input stretch to the full width of its container */
    padding: 5px;
    /* Add additional styling as needed */
}

#input {
    outline: none;
    background: none;
    border: none;
    resize: none; /* Disables the user's ability to manually resize */
    overflow: hidden; /* Prevents scroll bar */
    width: 100%; /* Adjust as needed */
    padding: 20px 20px 10px 20px; /* Optional, for better text visibility */
    box-sizing: border-box; /* Includes padding in width calculation */
    min-height: 1rem; /* Minimum height */
    color: var(--color-fg);
}
#submit {
    background: none;
    border: none;
    color: var(--color-fg);
    font-size: 2rem;
    cursor: pointer;
}
#alert {
    font-size: 1rem;
    margin-top: 1rem;
    padding: 0 1.2rem ;
}

.alert-error {
    color: var(--color-red);
}
.alert-success {
    color: var(--color-green);
}

#root {
    padding: 1rem;
}