body {
    background-color: #f9e9e9;
}

.top-menu {
    padding: 2rem 0 2rem 0;
    display:  grid;
    grid-template-columns: auto auto auto auto;
    justify-content: space-evenly;
    background-color: #ac7816;
    z-index: 2;
}

.top-menu a {
    display: inline-block;
    color: #f9e9e9;
    font-size: 1rem;
}

.top-menu a:hover {
    color: #13eb62;
    font-size: 1.5rem;
}

.main .runFrame {
    display: grid;
    align-items: end;
    width: 100%;
    height: 90vh;
}

.item {
    color: #000000;
    margin: 10px;
    font-size: 1.2rem;
    text-align: left;
}

.main .grid .header {
    background-color: #765914;
    background-size: 100%;
    color: #aaffaa;
    margin: 0 0 2rem 0;
    font-size: 2rem;

    border: 2px solid #ac7816;
    grid-area: header;
}

.main .grid .header img {
    width: 100%;
}

.main .runFrame .envHeader {
    grid-area: envHeader;
}

.main .runFrame .editHeader {
    grid-area: editHeader;
}

.main .runFrame .envContainer {
    grid-area: envContainer;
}

.main .runFrame .editContainer {
    grid-area: editContainer;
}

.main .runFrame .runButton {
    grid-area: runButton;
}

.main .runFrame .pauseButton {
    grid-area: pauseButton;
}

.main .runFrame .resetButton {
    grid-area: resetButton;
}

.main .runFrame .stepButton {
    grid-area: stepButton;
}

.main .runFrame .stepOverButton {
    grid-area: stepOverButton;
}

.main .runFrame .enterEdit {
    grid-area: enterEdit;
}

.main .runFrame .parseCode {
    grid-area: parseCode;
}

.main .runFrame .timeGap {
    grid-area: timeGap;
    align-self: start;
}

.main .runFrame .timeGapText {
    grid-area: timeGapText;
    align-self: start;
    justify-self: start;
    width: 80%;
    min-height: 120px;
    background-color: #ac7816;
    color: white;
    padding: 15px;
    margin: 10px;
}

.main .runFrame .enterEditText {
    grid-area: enterEditText;
    align-self: start;
    justify-self: start;
    width: 80%;
    min-height: 120px;
    background-color: #ac7816;
    color: white;
    padding: 15px;
    margin: 10px;
}

.main .runFrame .enterJSONText {
    grid-area: enterJSONText;
    align-self: start;
    justify-self: start;
    width: 80%;
    min-height: 120px;
    background-color: #ac7816;
    color: white;
    padding: 15px;
    margin: 10px;
}

.main .runFrame .enterJSON {
    grid-area: enterJSON;
}

#canvas {
    display: none;
    width: 100%;
    height: auto;
    background-color: white;
}

.responsive {
    width: 100%;
    height: auto;
}

#saveCode {
    display: none;
    background-color: #22DD11;
    color:#000000
}

#runButton, #pauseButton, #stepButton, #stepOverButton, #parseCode, #resetButton, #enterEdit, #enterJSON  {
    min-height: 60px;
    border-style: solid;
    border-radius: 5px;
    font-size: 1rem;
    background-color: #ff68b4;
    color: #000000;
    margin-bottom: 60px;
}

#timeGapText {
    width: 100%;
    font-size: 16px;
}

button:disabled,
    button[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
}

.main .runFrame .editContainer textarea {
    font-family: monospace;
}

textarea {
    font-size: 1.2rem;
}


@media (min-width:800px) {
    .main .runFrame { 
         grid-template: auto auto auto auto auto auto auto / 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
         grid-template-areas: 
             "header header header header header header header"  
             "envHeader envHeader envHeader envHeader editHeader editHeader editHeader"
             "envContainer envContainer envContainer envContainer editContainer editContainer editContainer"
             "runButton pauseButton stepButton stepOverButton resetButton parseCode . "
             " . . timeGapText timeGapText . timeGap . "
             " . . enterEditText enterEditText . enterEdit . "
             " . . enterJSONText enterJSONText . enterJSON . "
             ;
     }

     .top-menu {
        grid-template-columns: auto auto auto auto;
    }
 
     .header {
         height: 50vh;
     }
 
     .notice h1 {
         line-height: 50vh;
     }
 }
 
 @media (max-width:799px) {
     
     .main .runFrame {
         grid-template: auto auto auto auto auto auto auto auto auto auto / 1fr 1fr 1fr 1fr fr; 
         grid-template-areas: 
             "header header header header header"
             "envHeader envHeader envHeader envHeader envHeader"
             "envContainer envContainer envContainer envContainer envContainer"
             "runButton pauseButton stepButton stepOverButton resetButton"
             "editHeader editHeader editHeader editHeader editHeader"
             "editContainer editContainer editContainer editContainer editContainer"
             "parseCode . . . ."
             " timeGapText timeGapText timeGapText . timeGap  "
             " enterEditText enterEditText enterEditText . enterEdit "
             " enterJSONText enterJSONText enterJSONText . enterJSON "
             ;
     }

     .top-menu {
        grid-template-columns: auto auto;
    }
 
     .header {
         height: 30vh;
     }
 
     .notice h1 {
         font-size: 1.4rem;
         line-height: 30vh;
     }
 
 }