@import '../colors.less';

.em_challenge {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;

    pre {
        font: inherit;
        color: inherit;
        display: inline;
    }

    .instructions {
        width: 360px;
        overflow-y: auto;
        padding: 15px;
    }

    .editor {
        flex: 1;
        position: relative;
    }

    #editor {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .easy {
        color: @challenge_easy;
    }

    .medium {
        color: @challenge_medium;
    }

    .hard {
        color: @challenge_hard;
    }

    .results {
        position: fixed;
        top: 70%;
        bottom: 0;
        left: 454px;
        right: 30px;
        background: rgba(0, 0, 0, 0.3);
        padding: 25px;
        overflow: auto;
        .result {
            background: rgba(0, 0, 0, 0.2);
            padding: 10px 15px;
            margin-bottom: 10px;
            color: #fff;
            font-family: SFMono-Regular, Menlo, Monaco, Consolas,
                'Liberation Mono', 'Courier New', monospace;
        }
    }
}
