html, body{
    overflow:hidden;
}

*{
    margin:0;
    padding:0;
}

*:focus{
    outline:none;
}

#playground{
    position:fixed;
    width:100vw;
    height:100vh;
    top:0;
    left:0;
    z-index:1;
    border:none;
    image-rendering:pixelated;
}

#editCode{
    border:none;
    margin-bottom:20px;
}

#dropdown{
    position:fixed;
    width:60vw;
    left:20vw;
    top:0;
    border:none;
    border-radius:5px;
    border-top-left-radius:0px;
    border-top-right-radius:0px;
    background:#fff;
    z-index:2;
    padding:20px;
}

textarea{
    resize:none;
    height:30vh;
    border:none;
    border-radius:5px;
    -ms-overflow-style:none;
    scrollbar-width:none;
    font-size:14px;
    font-family:monospace;
}
textarea::-webkit-scrollbar{
    display:none;
}

#selector{
    position:fixed;
    display:flex;
    padding:20px;
    width:calc(100vw - 80px);
    overflow:hidden;
    word-break:keep-all;
    background:#fff;
    left:20px;
    bottom:20px;
    z-index:2;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-family:monospace;
    font-size:20px;
    border:none;
    border-radius:1000px;
}

/*
    Dropdown
*/

button{
    padding:10px;
    border:none;
    border-radius:100px;
    background:#676767;
    color:#FFF;
}
button:hover{
    opacity:0.75;
}

/*
    Code Editor
*/

#lineNum{
    width:40px;
    background:black;
    z-index:10;
    color:#888;
    padding-top:20px;
    padding-bottom:20px;
    padding-right:5px;
    position:absolute;
    top:0px;
    left:0px;
    overflow:hidden;
    border-top-right-radius:0px;
    border-bottom-right-radius:0px;
    text-align:right;
}

#codeToEdit{
    width:calc(60vw - 80px);
    z-index:20;
    position:absolute;
    padding:20px;
    top:0px;
    left:40px;
    overflow-x:scroll;
    white-space:nowrap;
    background:#000;
    color:#000;
    mix-blend-mode:screen;
    caret-color:#FFF;
    text-transform:uppercase;
}
#codeToEdit::selection{
    color:#4d1766;
    background-color:#4d1766;
}

#formattedCode{
    width:calc(60vw - 80px);
    background:#212121;
    z-index:11;
    color:#FFF;
    position:absolute;
    padding:20px;
    top:0px;
    left:40px;
    overflow-x:scroll;
    white-space:nowrap;
    text-transform:uppercase;

    height:30vh;
    border:none;
    border-radius:5px;
    -ms-overflow-style:none;
    scrollbar-width:none;
    font-size:14px;
    font-family:monospace;
}

#sickEditor{
    position:relative;
    height:calc(40px + 30vh);
}

#codeEditButton{
    position:absolute;
    z-index:100;
    right:20px;
    bottom:20px;
    background:#3b83ff;
}