:root {
    --color-text: #333;
    --color-background: #fff;
    --color-border: #333;

    --navigation-height: 2em;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;

    scroll-behavior: smooth;

    font-family: system-ui;
}

li {
    list-style-type: none;
}

a {
    color: currentColor;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;

    background-color: #fff;
    border-bottom: 2px solid #ddd;

    ul {
        display: flex;
    }

    li {
        padding: 0.5em 1em;
    }
}

main {
    padding-top: var(--navigation-height);

    grid-column-gap: 0;
}

@media screen and (max-width: 1000px) {
    .cm-scroller {
        overflow: auto;
    }

    .cm-content, .cm-gutter {
        min-height: 350px !important;
    }

    #preview {
        height: 100vh;
    }
}

@media screen and (min-width: 1000px) and (max-width: 1800px) {
    main {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 50vh;
        grid-template-areas:
            "top-left top-center top-right"
            "bottom-left bottom-center bottom-right";
        padding-top: 0;

        section {
            display: grid;
            grid-template-rows: 1.5rem calc(50vh - 1.5rem);
        }
    }

    #preview {
        grid-row-start: bottom-left;
        grid-row-end: bottom-right;
        grid-column-start: bottom-left;
        grid-column-end: bottom-right;
    }

    header {
        display: none;
    }
}

h1, h2 {
    font-size: 1rem;
}

@media screen and (min-width: 1800px) {
    main {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 2fr;
        padding-top: 0;

        section {
            display: grid;
            grid-template-rows: 1.5rem calc(100vh - 1.5rem);
        }
    }

    header {
        display: none;
    }

    #preview {
        border-left: 2px solid var(--color-border);

        iframe {
            border-top: none;
        }
    }
}


.cm-editor {
    height: 100%;
}

.cm-tooltip.cm-tooltip-error {
    color: darkred;
    padding: 0.5em;

    &::before {
        content: '⚠️ ';
    }
}

#preview {
    position: relative;
}

iframe {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-top: 2px solid var(--color-border);
}

#edit-button {
    display: none;
}

body.results-only {
    #edit-button {
        display: inline-block;
        position: fixed;
        right: 1em;
        top: 1em;
        padding: 0.5em 1em;
        z-index: 100;
    }

    nav {
        display: none;
    }

    main {
        display: block;
    }

    #html,#css,#js {
        display: none;
    }

    #preview {
        width: 100vw;
        height: 100vh;
    }
}