body{
    margin: 0;
}

#editor{
    float:left;
    width:50%;
    height: 90vh;
    border: 2px solid rgb(31, 27, 27);
}
#output{
    float:left;
    width:50%;
    height: 90vh;
    border: 2px solid rgb(31, 27, 27);
    padding: 0.3%;
    overflow: scroll;
}

textarea{
    height: 90vh;
    width: 99%;
    background: rgba(128, 128, 128, 0.493);
    /* color : white; */
    resize: none;
    outline: none;
    font-family: Consolas,monaco,monospace;
    overflow-y: scroll;
    overflow-x: scroll;
}

#main{
    display: flex;
    flex-direction: row;
}   

#canvas{
    margin: 0;
    width: 98%;
    margin: auto;
    /* background: yellow; */
}

.hidden{
    display:none;
    /* visibility: hidden; */
}

#buttons{
    width: 100%;
    height: fit-content;
    background: #0d1721;
    margin-bottom: 1vh;
    padding: 1em;
    box-sizing: border-box;


}

.btn{
    background: #04AA6D;
    color: black;
    border: none;
    border-radius: 2vmax;
    color: white;
    font-weight: bold;
    /* padding: 1em; */
    width: 8vw;
    height: 4vh;
    margin: 0 2vw;
    font-size: 1vmax;
}


.btn:hover{
    opacity: 0.9;
}

.active{
    background: #01754b;
    color: white;

}


#mode{
    background: none;
    border:none;
    color: white;
    filter: invert(1);
    float: right;
}


#appname{
    font-family:cursive ;
    font-size: 1.6vmax;
    color: white;

}

@media(max-width:700px){
    #main{
        /* background: yellow; */
        width: 98%;
        display: flex;
        flex-direction: column-reverse;
    }

    #editor{
        margin: 2%;
        width: 96%;
    }

    #output{
        margin: 2%;
        width: 96%;;
    }
    
}