/* Global variables */
:root {
    --green: #087455;
    --yellow: #f4d950;
    --red: #bf4640;

    --blue: #1c3471;

    --white: #f5f5f5;
    --black: #141414;
    --grey: #1e1e1e;

    --black-button-hover: #202020;
    --black-button-active: #272727;

    --disabled-button-white: #bebebe;

    --panel-border-grey: #555;
    --border-grey: #4d4d4d;

    --markdown-code-inline: #bc5a5a;
    --markdown-code-block: #e6e6e6;

    --font-size: 1.8rem;
    --font-weight: 400;

    --small-font-size: 1.2rem;
    --small-font-weight: 350;

    --markdown-code-font-size: 1.1rem;
    
    --button-font-size: 1.5rem;

    --font-name: "Cascadia Code";
}

/* Global settings */
body {
    margin: 0;
    background-color: var(--grey);

    /* Font settings */
    color: var(--white);
    font-family: var(--font-name), sans-serif;
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    font-style: normal;
    font-optical-sizing: auto;
}

button, input, select, textarea, a, pre {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-optical-sizing: inherit;
    color: inherit;
}

* {
    box-sizing: border-box;
}

/* Navbar settings */
.navbar {    
    display: flex;
    overflow: hidden;
    background-color: black;
    border-bottom: 1px solid var(--white);
}

.navbar a {
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar a:first-child {
    margin-right: auto;
    transform: scale(0.85);
    border: 2px solid var(--white);
}

.navbar a:hover {
    background-color: var(--white);
    color: var(--black);
}

.navbar a:active {
    background-color: white;
    color: var(--black);
}

.navbar a.active {
    background-color: var(--blue);
    color: white;
}

/* CodeMirror settings */
.CodeMirror {
    border: none;
    outline: none;

    resize: auto;
    padding: 0;
    line-height: 1.1;
}

.CodeMirror-code {
    font-family: var(--font-name), sans-serif;
    font-optical-sizing: auto;
    font-size: var(--small-font-size);
    font-weight: var(--small-font-weight);
    font-style: normal;
}

.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
    background: transparent !important;
}

/* Error popup settings */
.error-message {
    background: #ffc2c2;
    border: 1px solid var(--grey);
    visibility: hidden;

    z-index: 9999;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1rem;

    color: var(--black);
    font-size: var(--small-font-size);
    font-weight: var(--small-font-weight);
    text-align: center;
}

.error-visible {
    visibility: visible;
}

#dismiss-button {
    background: none;

    color: var(--black);
    font-size: var(--small-font-size);
    font-weight: var(--small-font-weight);

    border: 1.5px solid var(--grey);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    
    padding: 10px;

    cursor: pointer;
}

#dismiss-button:hover {
    background-color: #fbb2b2;
}

#dismiss-button:active {
    background-color: #f5a0a0;
}