style.css

body,header,footer,div,canvas,textarea {
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}


h2, h2 a:link, h2 a:visited {
  color: #ddd;
}

h1, h2 { margin: 0 }

main{
    margin: 0 auto;
    padding: 0;
    max-width: 1024px;
}

@media screen and (min-width:1024px) {
    main {
        display: grid;
        grid-template-columns: 512px 512px;
        grid-template-rows: 130px auto 500px 100px;
        grid-template-areas: "headerArea headerArea"
            "outputArea codeArea"
            "helpArea helpArea"
            "footerArea footerArea";
    }
    header { grid-area: headerArea; }
    #output_pane { grid-area: outputArea;}
    #code_pane { grid-area: codeArea;}
    footer { grid-area: footerArea; }
    iframe { grid-area: helpArea;}
}

#code_pane{
    background: #93B9FF;
    border-style: solid;
    border-color: #93B9FF;
}

#code_pane textarea {
    margin: 5px;
    width: 500px;
    height: 500px;
}

#output_pane{
    background: #5370C0;
    border-style: solid;
    border-color: #5370C0;
    position: relative;
}

#textOutput {
}

#canvas {
    margin: 5px;
}

#turtle  {
	margin: 10px 0 10px 0;
    height: 20px;
    width: 20px;
	position: absolute;
	font-size: 20px;
	background-color: transparent;
}


iframe {
    width: 100%;
    height: 500px;
}


footer{
    background: black;
    color: white;
    text-align: center;
    padding: 4px 0;
    border-style: solid;
    border-color: black;
}


footer a{
    color: #FFFF80;
}