:root{ 
    --nav-hover-color: rgb(16, 21, 114);
    --button-dark-blue: rgb(9, 17, 103);
    --submit-button-hover: #2f31b5;
    --hover-transition: background-color 0.1s;
}

.courier-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1em;
}

body {
    background-color: rgb(243, 248, 252);   
    min-height: 100vh;
    margin: 0px;
    display: flex;
    flex-direction: column;
}

body > * {
    margin-left: 10px;
}

body section {
    font-family: Lato, sans-serif;
}

header {
    margin-left: 0px;
}

header nav {
    background-color: rgb(5, 10, 65);
    height: 3em;
    margin: 0px;

    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

header nav a {
    color: white;
    font-family: Montsserat, sans-serif;
    font-size: 1.2rem;
    text-decoration: none;

    transition: var(--hover-transition);
    
    padding: 0 0.75rem;

    display: flex;
    flex-direction: row;
    align-items: center;
}

header nav a:hover {
    background-color: var(--nav-hover-color);
}

main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 0;
}

footer {
    background-color: rgb(5, 10, 65);
    height: 2em;

    color: white;
    font-family: Montsserat, sans-serif;
    margin: 0px;
}
footer div {
    padding: 0.5em;
}

h1, h2 {
    font-family: Montserrat, sans-serif;
    font-weight: bold;
}

body > h2 {
    margin-bottom: 0.25em;
}

.command-dialog {
    border: none;
    border-radius: 5px;
    margin: auto;

    background-color: rgb(251, 255, 255);
    width: 50%;
    font-family: Lato, sans-serif;
}

.command-dialog table {
    table-layout: fixed;
    border-collapse: collapse;
    border-radius: 5px;
}

.command-dialog table tbody tr:nth-child(odd) {
    background-color: rgb(238, 242, 246);
}

.command-dialog table th, td {
    padding: 5px;
}

.command-dialog code {
    background-color: rgb(89, 92, 96);
    color: white;
    padding-left: .25em;
    padding-right: .25em;
    padding-bottom: .10em;
    border-radius: 2px;
}

.command-dialog li {
    margin-bottom: 0.5em;
}


button {
    transition: var(--hover-transition);
    color: white;
    border-width: 0px;
    border-radius: 5px;
}

#command-form button {
    background-color: rgb(9, 17, 103);
    transition: var(--hover-transition);
    color: white;
    border-width: 0px;
    border-radius: 5px;
}

#command-form button:hover {
    background-color: var(--submit-button-hover);
}

#command-form input {
    width: 20em;
}

#command-form * {
    height: 2em;
}



/* Command dialog */

.dialog-open-button {
    background-color: #5c77ff;
    font-size: 1.5rem;

    height: 3rem;
    margin: 1rem;
}
.dialog-open-button:hover {
    background-color: rgb(9, 17, 103);
}



.dialog-close-button {
    background-color: var(--button-dark-blue);
    width: 4.2rem;
    font-size: 1.25rem;
}
.dialog-close-button:hover {
    background-color: var(--submit-button-hover);
}



/* Output sections */

.display-section {
    display: block;
}


#home-display {
    width: 60vw;
}

#home-display-window {
    background-color: rgb(30, 28, 40);
    min-height: 10rem;

    padding-top: 10px;
    padding-bottom: 10px;

    border-radius: 7px;
    margin: 0.5em 0px;
}

#home-display-window pre {
    padding: 0 0.65rem;
    white-space: pre-line;

    margin-top: 5px;
    margin-bottom: 5px;
    color: white;
    font-size: 1rem;
}



#math-display {
    width: 50vw;
}

#math-display-window {
    background-color: white;
    min-height: 20rem;
    border-radius: 1rem;

    font-family: serif;
    font-size: 1.5rem;
    margin: 0.5rem 0;
}

#math-display-window > * {
    padding: 0.5rem;
}