@font-face {
    font-family: 'Signika Negative', sans-serif;
    src: url(SignikaNegative-Regular.ttf);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0px;
}

:root {
    --background: #704000;
    --active-background: #a06000;
    --backdrop: #302000;
    --text-color: #ffd966;
    --highlight: #b02870;
    --border: #000000;
    font-family: 'Signika Negative', sans-serif;
}

.page {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.page-layout {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: grid;
    resize: none;
    grid-template:
    "game prop" 50%
    "game glob" 20%
    "cons glob" auto / auto minmax(400px, 30%);
    gap: 10px;
    background-color: var(--backdrop);
}


.game-layers {
    width: 100%;
    height: 100%;
    position: relative;
    grid-area: game;
}
.properties-editor,.global-properties-editor,.game-layers,.console{
    box-sizing: border-box;
    border: 1px solid var(--border);
    margin: 0;
    padding: 0;
}

::-webkit-scrollbar {
    width: 15px;
}
::-webkit-scrollbar-corner {
    background:  var(--background);
}
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px var(--backdrop);
    background:  var(--background);
}

::-webkit-scrollbar-thumb {
    border-radius: 7px;
    background:  var(--text-color);
}

.properties-editor {
    grid-area: prop;
    color: var(--text-color);
    overflow: scroll;
    box-sizing: border-box;
    border: 1px solid var(--border);

}
.global-properties-editor label {
    display: block;
    margin: 0.5em;

}

.global-properties-editor input,
.global-properties-editor select {
    margin-left: 1em;
}


.global-properties-editor {
    grid-area: glob;
    color: var(--text-color);
    overflow: scroll;
    padding: 1em;
}
.console {
    grid-area: cons;
    color: var(--text-color);
    white-space: pre;
    overflow: scroll;
    scrollbar-color: blue green;
}
.game-screen {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    display:block;
}
.game-debug-overlay {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display:block;
    color: aqua;
}

@media (max-width: 920px) {
    .properties-editor {
        display: none;
    }
    .global-properties-editor {
        display: none;
    }

    .page-layout {
        grid-template:
    "game game" 50%
    "game game" 20%
    "cons cons" auto / auto minmax(400px, 30%);
    }
}
/* Definitions for built in inputs */

input[type="checkbox"] {
    display: inline-flex;
    cursor: pointer;
    position: relative;
    height: 1.4em;
    width: 1.4em;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    outline: none;
    background-color: var(--background);
    cursor: pointer;
    padding: 0;
    margin: 0 0 -0.2em 0.5em;

}

input[type="checkbox"]:checked {
    border: 1px solid var(--background);
    background-color: var(--background);
}

input[type="checkbox"]:checked::before {
    content: '\2714';
    display: block;
    text-align: center;
    color: var(--text-color);
    position: absolute;
    left: 0.3em;
    top: 0.0em;
}

input[type="checkbox"]:focus {
    background-color: var(--active-background);
}

input[type="text"] {
    display: inline-flex;
    cursor: pointer;
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    border: 1px solid var(--border);
    color: var(--text-color);
    border-radius: 4px;
    outline: none;
    background-color: var(--background);
    cursor: pointer;
    padding: 0.2em 0.5em;
    margin: 0 0 0 0.5em;
}

input[type="text"]:focus {
    background-color: var(--active-background);
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--background);
    color: var(--text-color);
    border: 1px solid var(--border);
    padding: 0 1em 0 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
    padding: 0.2em 0.5em;
    margin: 0 0 0 0.5em;


    background-image: rgba(0,255,0,0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='292.4' height='292.4'%3E%3Cpath fill='%23333' d='M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 9px;

}

select>option{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: inherit;
    color: var(--text-color);
    background-color: var(--background);
    background-image: none;
    height: 50px;
    padding: 15px;
    border: 1px solid var(--border);
}

select:focus {
    background-color: var(--active-background);
}
label > select::after {
    content: "lkj";
    display: block;
}