body {
    background-image: linear-gradient(to right, #CDF, #fff, #fff, #fff, #fff);
    margin: 0px;
    font-family: 'Source Sans Pro', sans-serif;
}

h1 {
    text-align: center;
    padding: 1vw;
    color: #577e04;
    font-size: 30pt;
}

p, li {
    font-size: 14pt;
    line-height: 16pt;
    color: #000;
    font-weight: 300;
}

iframe {
    border: 0px;
}

#wrapper, #wrapper > div {
    padding: 0px;
    overflow: hidden;
}

#wrapper {
    margin-left: 8vw;
    border-left: 1px solid black;
    background-image: linear-gradient(to left, #CDF, #fff, #fff, #fff, #fff);
}

#wrapper > div {
    padding: 0 5vw 1vw 5vw;
    margin-right: 8vw;
    border-right: 1px solid black;
    background: #fff;
}

#intro {
    width: 60%;
    background: #e1ff9e;
    border-radius: 3vw;
    padding: 1.8vw 3vw 1.8vw 3vw;
    margin: auto;
}

.line {
    margin: 1.8vw -1.8vw 1.8vw -1.8vw;
    border-top: 1px solid #577e04;
}

#lessons_selector {
    text-align: center;
}

#video {
    text-align: center;
    width: 100%;
}

#editor_wrapper {
    margin-top: 1.8vw;
}

#editor {
    font-size: 16pt;
    position: relative;
    top: 0;
    height: 200px;
    margin: 1.8vw 0 0.68vw 0;
    border: 1px solid black;
}

#buttons {
    text-align: center;
}

#output {
    font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
    padding: 0.9vw;
    margin: 1.8vw 0 1.8vw 0;
    background: #e1ff9e;
}

#output p {
    margin: 0px;
}

#canvas {
    width: 400px;
    height: 400px;
    margin: auto;
    border: 1px solid black;
}

#status {
    margin-top: 0px;
    border-bottom: 1px solid #577e04;
    font-style: italic;
    padding: 0.38vw;
}

#contact {
    text-align: center;
    color: #666;
    font-size: 12pt;
}

#show_more {
    text-align: center;
    color: #577e04;
    cursor: pointer;
}

#show_more:hover {
    text-decoration: underline;
}

#intro_more {
    display: none
}