:root{
    --firstLineheight: 20px;
    --height: 20px;
    --evenBackgroundColor: rgba(0, 132, 255, 0.102);
    --oddBackgroundColor: rgba(0, 90, 170, 0.102);
}

codeWindow{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: rgb(66, 66, 66);
    padding: 10px;
    box-sizing: border-box;
    overflow-y: scroll;
}

.codeScrollWindow{
    display: flex;
    flex-direction: column;
}

.copyText{
    background-color: black;
}

.codeLine{
    display: grid;
    grid-template-columns: min-content auto;
}

.codeLine *{
    position: relative;
    white-space: pre;
    display: inline-block;
    font-family: 'Roboto Mono', monospace;
    height: var(--height);
    vertical-align: top;
    line-break: strict;
}

.number{ 
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.number::before{
    content: "0";
    color: rgba(0, 0, 0, 0);
    height: var(--height);
    display: inline-block;
}

.number::after{
    content: "";
    position: relative;
    display: inline-block;
    width: 2px;
    height: var(--height);
    margin: 0 4px;
    background-color: rgb(54, 54, 54);
}

.codeSettings > button:hover{
    background-color: rgba(0, 0, 0, 0.3);
}

/* add padding to last line */
.codeScrollWindow > div:nth-last-child(-n+1){
    padding-bottom: 10px;
}

.codeSettings > button{
    width: var(--firstLineheight);
    height: var(--firstLineheight);
    float: right;
    margin-left: 4px;
    padding: 0px;
    border-radius: 2px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: rgba(0,0,0,0);
}

.copyCodeWindowButton{
    background-image: url('/Images/Icons/copy.png');
}

.downloadCodeWindowButton{
    background-image: url('/Images/Icons/download.png');
}

.codeScrollWindow > .codeLine:nth-child(2n), .codeSettings{
    background-color: var(--evenBackgroundColor);
}

.codeScrollWindow > .codeLine:nth-child(2n - 1){
    background-color: var(--oddBackgroundColor);
}

.copyText{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    border-radius: 10px;
    background-color: rgb(22, 22, 22)!important;
    text-align: center;
    color: white;
    display: none;
    z-index: 10;
}

.hide{display: none;}
.show{display: block;}

@keyframes showAnimation{
    0% {opacity: 0;}
    10% {opacity: 1;}
    70% {opacity: 1;}
    100% {opacity: 0;}
}

.comment{
    color: #5a8647;
}

/* "void", "HIGH", "INPUT", "LOW", "int", "String", "char", "const" */
.variables{
    color: rgb(0, 151, 156);
}

/* "#include", "#define", "while", "loop", "setup", "if", "else", */
.logicalOperators{
    color: rgb(94, 109, 3);
}

/* "Serial", "begin", "print", "println", "pinMode", "digitalWrite", "delayMicroseconds", "delay", "pulseIn", "available", "readString", "toInt", "millis" */
.functions{
    color: rgb(167, 67, 0);
}

.other{
    color: rgb(141, 99, 138);
}