* {
    font: 20px/160% Helvetica, sans-serif;
    background-color: var(--bg-color);
    color: var(--fg-color);
}


/***********
 * Toolbar *
 ***********/

div#toolbar {
    position: sticky;
    top: 0;
}

/* Top header */
div#header {
    display: flex;

    * + * {
        margin-left: 10px;
    }
}

/* Top right toolbar */
div#corner-toolbar {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1;
    padding: 0 5px;
    border: 2px solid var(--fixed-toolbar-border-color);
    margin: 8px 8px 0 0;
}


/*********
 * Input *
 *********/

/* Required indicator */
span.required-ind {
    color: var(--required-ind-fg-color);
}

/* Invalid */
span.invalid-input {
    color: var(--invalid-input-fg-color);
}


/******************
 * Title elements *
 ******************/

/* Header */
h2 {
    font-weight: bold;
    font-size: 1.5em;
}

/* Subtitle */
h3 {
    font-size: 1.25em;
}


/************
 * Sections *
 ************/

/* Sections */
div.section {
    border: 1px dashed var(--section-border-color);
    padding: 10px;
}

/* Sections after sections */
div.section + div.section {
    margin-top: 10px;
}

/* Title */
div.section > span {
    font-size: 0.6em;
}

/* Content */
div.section > div {
    margin-top: 10px;
    margin-left: 10px;
}


/***************
 * Collapsible *
 ***************/

/* Button */
button.coll {
    padding: 0;
    border: 0;
}

/* Closed */
button.coll:not(.opened) {
    margin-bottom: 10px;

    &::before {
        content: "\25b4";
    }

    /* Collapsed content */
    + * {
        display: none;
    }
}

/* Opened */
button.coll.opened {
    &::before {
        content: "\25be";
    }
}


/*********
 * Links *
 *********/

a {
    color: var(--link-fg-color);
    cursor: pointer;
    text-decoration: underline;
}

/*****************
 * Miscellaneous *
 *****************/

/* Buttons */
button {
    cursor: pointer;
    border: 3px outset var(--button-border-color);

    &:active {
        border-style: inset;
    }
}

/* Buttons after buttons */
button + button {
    margin-left: 7px;
}

/* Codespace */
code {
    background-color: var(--code-bg-color);
    color: var(--code-fg-color);
    font-family: "Courier New";
    padding: 0 0.2em;
}

ul {
    margin: 0;
}