html,

header {
    position: absolute;
    background-color: white;
    left: 0;
    top: 0;
    width: 100vw;
    height: 40.3px;
    z-index: 2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

header img {
    position: flex;
    margin-left: 3px;
    margin-top: 5px;
    margin-bottom: 5px;
    height: 30.3px;
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

div#pyramid-wrapper {
    position: fixed;
    display: flex;
    top: 40.3px;
    width: 100%;
    height: 100%;
}

div#tutorial {
    position: relative;
    width: 40%;
    height: 100vh;
    background-color: white;
    z-index: 1;
}

main#tutorial-container {
    overflow-y: scroll;
    height: calc(100vh - 30.3px);
    padding-bottom: 10px;
}

img.tutorialimg {
    max-width: 480px;
}

div#playground {
    position: relative;
    width: 60%;
    height: 100vh;
}

div#workspace {
    position: absolute;
    background-color: #f6f6f6;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
}

.pyramid-block,
.pyramid-menublock {
    position: absolute;
    color: rgba(0, 0, 0, 0.6);
    width: auto;
    display: flex;
    flex-flow: column;
    align-items: center;
    user-select: none;
}

#block-eval-result {
    outline: 3px #99b3db;
    outline-style: solid;
    outline-offset: 3px;
    width: 160px;
    animation: moveresult 0.224s ease-out;
}
@keyframes moveresult{
    0% {
        opacity: 0;
        transform: translateY(100%) rotateX(90deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0%) rotateX(0deg);
    }
}
div.pyramid-function-wrapper {
    position: absolute;
    background-color: black;
    z-index: -1;
}

pyramid-empty-block {
    background-color: rgba(15, 23, 42, 0.1);
}
pyramid-literal-block {
    background-color: #5d8cd4;
}
pyramid-symbol-block,
pyramid-add-block,
pyramid-sub-block,
pyramid-mul-block,
pyramid-int-div-block,
pyramid-float-div-block,
pyramid-mod-block,
pyramid-pow-block {
    background-color: #40a5a8;
}
pyramid-define-block {
    background-color: #f09ecb;
    outline: white solid 2px;
}
pyramid-list-block {
    background-color: #99a9c2;
}
pyramid-if-block {
    background-color: #ea7f90;
}
pyramid-map-block,
pyramid-push-block,
pyramid-pop-block,
pyramid-rest-block,
pyramid-length-block {
    background-color: #66bbaa;
}

span.content {
    color: white;
    font-weight: bold;
}

.pyramid-invalid-block>div.content-wrapper>span.content {
    color: #d20519;
}

.pyramid-invalid-block>span.type {
    font-style: italic;
}

span.type {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    box-sizing: border-box;
    order: -1;
}

span.pyramid-argument {
    color: white;
    margin-left: 16px;
}

.pyramid-menutab {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    user-select: none;
}
.pyramid-menutab:hover {
    opacity: 0.9;
    outline: solid;
    outline-color: #fcfefe;
    translate: 2px;
    transition-duration: 0.2s;
}

.pyramid-block-disable {
    display: none;
}

.pyramid-block-folding {
    outline: solid #64748b 2px;
    box-shadow: 3px 3px 0px 0 #64748b;
    outline-offset: -2px;
}

.pyramid-block-variable {
    border: dotted 4px #cc1a2c;
    box-sizing: border-box;
}

div#menu {
    position: absolute;
    width: 200px;
    height: 100vh;
}

div#menu-tab {
    position: absolute;
    background-color: rgb(232, 236, 236);
    left: 0;
    top: 0;
    width: 70px;
    height: 100vh;
}

div#menu-items {
    position: absolute;
    float: left;
    background-color: rgb(226, 230, 230);
    left: 70px;
    top: 0;
    width: calc(200px - 70px);
    height: calc(100vh - 30.3px);
    box-shadow: inset 1px 0 2px rgba(0, 0, 0, 0.1);
    padding-bottom: 10px;
    overflow-x: hidden;
    overflow-y: auto;
}

div#console {
    position: absolute;
    background-color: #40475E;
    color: white;
    right: 0;
    bottom: 0;
    width: calc(100% - 190px);
    height: 200px;
    resize: vertical;
    overflow: hidden;
    transform: rotate(180deg);
}

div#console-content {
    transform: rotate(180deg);
    width: 100%;
    height: 100%;
    padding: 1em;
    overflow-y: scroll;
    box-sizing: border-box;
}

div#console-content label {
    font-family:
        'Noto Sans Mono CJK JP',
        'Source Han Code JP',
        Consolas,
        monospace;
}

div.popup {
    display: none;
    position: fixed;
    width: auto;
    height: auto;
    background-color: lightblue;
    text-align: center;
}

div.popup ul {
    margin: 5px;
    padding: 0;
}

li.popup-menu-item {
    background-color: lightblue;
    margin: 1px;
    padding: 1px 5px;
    list-style-type: none;
    cursor: pointer;
}

li.popup-menu-item:hover {
    background-color: lightcyan;
}

#popup-menu-edit {
    width: 10em;
    height: 2em;
}

label:focus {
    outline: none;
}

span.exception {
    color: #cc1a2c;
}