/* editable theme */

:root {
    --mainbg: transparent;
    --box1: 195, 7, 30;
    --box2: 13, 49, 160;
    --box1dim: 25, 0, 0;
    --box2dim: 0, 0, 36;
    --box1light: 240, 180, 180;
    --box2light: 160, 180, 255;
    /*--ffa: 155, 0, 150;*/
    /*--ffa: 185, 49, 169 slightly brighter */
    --ffa: 91, 34, 148; /* more like a covenant purple */
    --ffadim: 26, 0, 25;
    /*--ffalight: 220, 150, 220;*/
    --ffalight: 129, 64, 152;
    --screenfont: 21.2;
}
/* hex if need */
/* 
    --box1: #c3071e;
    --box2: #0d31a0;
    --box1dim: #190000;
    --box2dim: #000024;
    --ffa: #9b0096;
    --ffadim: #1a0019;
*/



.wrapper.normal .box1bg {
    /*background-color: #c3071e;*/
    background-color: rgb(var(--box1));
}

.wrapper.normal .box2bg {
    /*background-color: #0d31a0;*/
    background-color: rgb(var(--box2));
}

.wrapper.normal .dualbg {
    /*background-color: #c3071e;*/
    background-color: rgb(var(--box1));
}

.wrapper.switched .box1bg {
    /*background-color: #0d31a0;*/
    background-color: rgb(var(--box2));
}

.wrapper.switched .box2bg {
    /*background-color: #c3071e;*/
    background-color: rgb(var(--box1));
}

.wrapper.switched .dualbg {
    /*background-color: #c3071e;*/
    background-color: rgb(var(--box2));
}

.wrapper.ffa .box1bg {
    /*background-color: #9b0096;*/
    background-color: rgb(var(--ffa));
}

.wrapper.ffa .box2bg {
    /*background-color: #9b0096;*/
    background-color: rgb(var(--ffa));
}

.wrapper.ffa .dualbg {
    /*background-color: #9b0096;*/
    background-color: rgb(var(--ffa));
}

.wrapper.normal .box1bg.dim {
    /*background-color: #190000;*/
    background-color: rgb(var(--box1dim));
}

.wrapper.normal .box2bg.dim {
    /*background-color: #000024;*/
    background-color: rgb(var(--box2dim));
}

.wrapper.normal .dualbg.dim {
    /*background-color: #190000;*/
    background-color: rgb(var(--box1dim));
}

.wrapper.switched .box1bg.dim {
    /*background-color: #000024;*/
    background-color: rgb(var(--box2dim));
}

.wrapper.switched .box2bg.dim {
    /*background-color: #190000;*/
    background-color: rgb(var(--box1dim));
}

.wrapper.switched .dualbg.dim {
    /*background-color: #000024;*/
    background-color: rgb(var(--box2dim));
}

.wrapper.ffa .box1bg.dim {
    /*background-color: #1a0019;*/
    background-color: rgb(var(--ffadim));
}

.wrapper.ffa .box2bg.dim {
    /*background-color: #1a0019;*/
    background-color: rgb(var(--ffadim));
}
.wrapper.ffa .dualbg.dim {
    /*background-color: #1a0019;*/
    background-color: rgb(var(--ffadim));
}



.wrapper.normal .box1bg.light {
    /*background-color: #190000;*/
    background-color: rgb(var(--box1light));
}

.wrapper.normal .box2bg.light {
    /*background-color: #000024;*/
    background-color: rgb(var(--box2light));
}

.wrapper.switched .box1bg.light {
    /*background-color: #000024;*/
    background-color: rgb(var(--box2light));
}

.wrapper.switched .box2bg.light {
    /*background-color: #190000;*/
    background-color: rgb(var(--box1light));
}

.wrapper.ffa .box1bg.light {
    /*background-color: #1a0019;*/
    background-color: rgb(var(--ffalight));
}

.wrapper.ffa .box2bg.light {
    /*background-color: #1a0019;*/
    background-color: rgb(var(--ffalight));
}

.wrapper.normal .box1fade {
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgb(var(--box1dim)) 90%);
}

.wrapper.normal .box2fade {
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgb(var(--box2dim)) 90%);
}

.wrapper.normal .dualfade {
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgb(var(--box1dim)) 90%);
}

.wrapper.switched .box1fade {
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgb(var(--box2dim)) 90%);
}

.wrapper.switched .box2fade {
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgb(var(--box1dim)) 90%);
}

.wrapper.switched .dualfade {
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgb(var(--box2dim)) 90%);
}

.wrapper.ffa .box1fade {
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgb(var(--ffadim)) 90%);
}

.wrapper.ffa .box2fade {
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgb(var(--ffadim)) 90%);
}

.wrapper.ffa .dualfade {
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgb(var(--ffadim)) 90%);
}




.wrapper.normal .box1border {
    /*border-color: #c3071e;*/
    border: 4px solid rgb(var(--box1));
}

.wrapper.normal .box2border {
    /*border-color: #0d31a0;*/
    border: 4px solid rgb(var(--box2));
}

.wrapper.normal .dualborder {
    /*border-color: #c3071e;*/
    border: 4px solid rgb(var(--box1));
}

.wrapper.switched .box1border {
    /*border-color: #0d31a0;*/
    border: 4px solid rgb(var(--box2));
}

.wrapper.switched .box2border {
    /*border-color: #c3071e;*/
    border: 4px solid rgb(var(--box1));
}

.wrapper.switched .dualborder {
    /*border-color: #0d31a0;*/
    border: 4px solid rgb(var(--box2));
}

.wrapper.ffa .box1border {
    /*border-color: #9b0096;*/
    border: 4px solid rgb(var(--ffa));
}

.wrapper.ffa .box2border {
    /*border-color: #9b0096;*/
    border: 4px solid rgb(var(--ffa));
}

.wrapper.ffa .dualborder {
    /*border-color: #9b0096;*/
    border: 4px solid rgb(var(--ffa));
}


.wrapper.normal .box1bordercolor {
    border:3px solid rgb(var(--box1));
}

.wrapper.normal .box2bordercolor {
    border:3px solid rgb(var(--box2));
}

.wrapper.switched .box1bordercolor {
    border:3px solid rgb(var(--box2));
}

.wrapper.switched .box2bordercolor {
    border:3px solid rgb(var(--box1));
}

.wrapper.ffa .box1bordercolor {
    border:3px solid rgb(var(--ffa));
}

.wrapper.ffa .box2bordercolor {
    border:3px solid rgb(var(--ffa));
}






.wrapper.normal .box1color {
    color: rgb(var(--box1));
    color: rgb(255 115 115);
}

.wrapper.normal .box2color {
    color: rgb(var(--box2));
    color: rgb(160 160 230);
}

.wrapper.normal .dualcolor {
    color: rgb(255 115 115);
}

.wrapper.switched .box1color {
    color: rgb(var(--box2));
    color: rgb(160 160 230);
}

.wrapper.switched .box2color {
    color: rgb(var(--box1));
    color: rgb(255 115 115);
}

.wrapper.switched .dualcolor {
    color: rgb(160 160 230);
}

.wrapper.ffa .box1color {
    /*color: rgb(var(--ffa));*/
    color: rgb(240 150 240);
}

.wrapper.ffa .box2color {
    /*color: rgb(var(--ffa));*/
    color: rgb(240 150 240);
}

.wrapper.ffa .dualborder {
    color: rgb(240 150 240);
}