/* Set some variables */
:root {
    --navbar-height: calc(29px + 2rem);
    --navbar-bg-color-light: gray;
    /*#ed8383*/
    --navbar-bg-color-dark: #333;

}


body,
html {
    margin: 0;
    padding: 0;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    background-color: var(--document-background-color);
    min-height: 100vh;
}

button {
    padding: 5px;
    font-size: larger;
    background-color: var(--panel-color);
    color: var(--color);
    border: 1px solid var(--color);
}

#inputimage {
    padding: 5px;
    font-size: larger;
    background-color: var(--panel-color);
    color: var(--color);
    border: 1px solid var(--color);
}

#contents {
    width: 70%;
    max-width: 900px;
    margin-inline: auto;
    margin-top: 5em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7);
    padding-inline: 4em;
    /* h1 has default of 0.67em */
    padding-bottom: 4em;
    padding-top: calc(4em - 0.67em);

}
#outputFrame h2,
#contents h2 {
    margin-top: 2.5em;
}

#outputFrame h3,
#contents h3 {
    margin-top: 2em;
}
#outputFrame h4,
#contents h4 {
    margin-top: 1.5em;
}

#outputFrame h5,
#contents h5 {
    margin-top: 1em;
}

#contents p,
#contents ul,
#contents ol,
#contents table {
    line-height: 1.3em;
    letter-spacing: 0.05em;
}

#contents img {
    max-width: calc(100% - 4em);
    height: auto;
    margin: 2rem;
}



#contents>table,
#outputFrame>table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
    background-color: var(--contrast-color-a25);
    color: var(--color);
    margin: 1em;
}

#contents>table th,
#contents>table td,
#outputFrame>table th,
#outputFrame>table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid var(--color);
}

#contents>table th,
#outputFrame>table th {
    font-weight: bold;
}

#contents>table tr:last-child td,
#outputFrame>table tr:last-child td {
    border-bottom: none;
}

#outputFrame img {
    max-width: 40vw;

}




pre {
    background: var(--panel-color);
    padding: 10px;
    border-radius: 5px;
    border: 1px solid var(--color);
    overflow-x: auto;
    font-size: 14px;
    color: var(--color);
}

pre code {
    font-family: "Courier New", monospace;
}

/*login form css*/
#login-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--panel-color);
    border-radius: 10px;
    border: 1px solid var(--color);
    /* Center  */
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#login-wrapper form {
    padding: 10px;
}

#login-wrapper input {
    margin: 5px;
    padding: 5px;
    font-size: larger;
    background-color: var(--panel-color);
    color: var(--color);
    border: 1px solid var(--color);
}



.nav-bar {
    background-color: var(--bgcolor);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    padding-block: 8px;
    margin-top: calc(var(--header-height));
    max-width: 100%;
    flex-wrap: wrap;
    background-color: var(--bgcolor);
}

#logoAndBurgerWrapper {
    display: flex;
    gap: 2em;
    align-items: center;
}

#logo>h1 {
    margin: 0;
    padding: 0;
    color: var(--color);
    display: inline;
    font-size: 2em;
}


/* Adjust layout for screens less than 800px wide */
@media only screen and (max-width: 800px) {
    .custom-file-upload {
        display: block !important;
        /* force block layout */
        font-size: 12px !important;
        /* reduce font size */
        padding: 0 !important;
        /* remove padding */
        width: 100%;
        /* make full width */
    }

    .custom-file-upload::file-selector-button {
        display: block !important;
        /* force the button to be on its own line */
        font-size: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100%;
        /* let it fill the container */
    }


    #contents {
        padding-inline: 1em;
        width: inherit;

    }

    #logo>h1 {
        font-size: 1.5em;
    }

    main {
        padding: 0em;
    }

    #editor-btns button {
        font-size: 0.8em;
    }



    #outputFrame img {
        max-width: 80vw;

    }





}