main.css

:root {
    --bg-color: white;
    --dark-text-color: black;
    --light-text-color: white;
    --edit-code-bg: hsl(44, 87%, 94%);
    --view-code-bg: hsl(44, 50%, 97%);
    --border-color: rgba(0, 0, 0, 1);

    --border-radius: 6px;
}

.column-1 {
    width: 100%;
    padding: 0 0.5em;
}

.column-2 {
    width: 50%;
    padding: 0 0.5em;
}

.row {
    display: flex;
}

.center {
    margin: 0 auto;
}

.compact {
    width: max-content;
}




#editor-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-color);
    border: 0.8px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.3em;
    scrollbar-width: thin;
}

#editor-header * {
    margin: 0.2em;
}

#passes {
    overflow: auto;
    white-space: nowrap;
    box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.14);
    border: 0.5px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.2em;
}

#compile {
    margin-left: auto;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.editor pre {
    font-family: 'Source Code Pro', monospace;
	  font-size: 1em;
    font-weight: 400;
    /* height: 500px; */
    letter-spacing: normal;
    line-height: 20px;
    white-space: pre;
    padding: 0.4em 0.4em;
    border: 0.7px solid var(--border-color);
    width: 80%;
    overflow: auto;
}

pre.right {
    padding-left: 0.4em;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    background: var(--view-code-bg);
    border-left: 0.5px dashed rgba(0, 0, 0, 0.7);
    z-index: 1;
}

pre.left {
    padding-right: 0.1em;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    background: var(--edit-code-bg);
    border-right: unset;
    z-index: 2;
    box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.14);
}

.editor {
    border-radius: 6px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
    padding: 0.3em;
}

.token.diff-addition {
    background: hsla(120,100%,75%,0.4);;
}
.token.diff-deletion {
    background: hsla(0,100%,75%,0.4);;
}


span.line.diff-addition {
    background: hsla(120,100%,75%,0.2);;
}

span.line.diff-deletion {
    background: hsla(0,100%,75%,0.2);;
}

span.line {
    width: 100%;
    display: block;
}

/* span.line:nth-child(2n+1) { */
/*     background-color: hsl(44, 87%, 92%); */
/* } */