/*-colors----------------------------------------------------------------------*/
body {background-color:rgb(51, 51, 51);}
/*--variables--------------------------*/
:root {
    --primary-color: rgb(110, 110, 110);
    --primary-color-3dd: rgb(59, 59, 59);
    --primary-color-3dl: rgb(155, 155, 155);
    --secondary-color: wheat;
    --background-color: black;

    --start-button: rgb(211, 0, 0);
    --start-button-3dd: rgb(110, 0, 0);
    --start-button-3dl: rgb(255, 0, 0);

    --alarm-button: rgb(78, 64, 0);
    --alarm-button-3dd: rgb(47, 39, 0);
    --alarm-button-3dl: rgb(100, 83, 7);

    --option-button: rgb(181, 147, 0);
    --option-button-3dd: rgb(146, 119, 0);
    --option-button-3dl: rgb(178, 151, 32);

    --keypad-button: rgb(55, 55, 55);
    --keypad-button-3dd: rgb(13, 13, 13);
    --keypad-button-3dl: rgb(115, 115, 115);

    --keypad-button-other: rgb(22, 22, 22);
    --keypad-button-other-3dd: rgb(11, 11, 11);
    --keypad-button-other-3dl: rgb(60, 60, 60);

    
    --bcolor-1: red;
    --bcolor-1-3dd: rgb(148, 0, 0);
    --bcolor-1-3dl: rgb(255, 45, 45);

    --bcolor-2: blue;
    --bcolor-2-3dd: rgb(0, 0, 162);
    --bcolor-2-3dl: rgb(34, 34, 255);

    --bcolor-3: yellow;
    --bcolor-3-3dd: rgb(178, 178, 0);
    --bcolor-3-3dl: rgb(255, 255, 52);

    --bcolor-4: green;
    --bcolor-4-3dd: rgb(0, 69, 0);
    --bcolor-4-3dl: rgb(0, 200, 0);

    --bcolor-5: orange;
    --bcolor-5-3dd: rgb(160, 104, 0);
    --bcolor-5-3dl: rgb(255, 180, 40);

    --bcolor-6: gray;
    --bcolor-6-3dd: rgb(57, 57, 57);
    --bcolor-6-3dl: rgb(176, 176, 176);


    --display-color: rgb(141, 141, 141);
    --display-color-3dd: rgb(90, 90, 90);
    --display-color-3dl: rgb(224, 224, 224);

    --led-one: rgba(0, 102, 0, 0.919);
    --led-two: rgba(225, 0, 0, 0.906);
    --led-three: rgba(255, 119, 0, 0.928);
    --led-four: rgb(255, 166, 0);
    --led-off: rgba(47, 47, 47, 0.912);
    --fake-af: '#00cc00';
}

/*--colors and 3d effects--------------------------*/
/*plastic shell 3d*/
.container {
    background-color: var(--primary-color);
    box-shadow: inset -9px -9px 8px var(--primary-color-3dd),
                inset 9px 9px 8px var(--primary-color-3dl); 
}
/**/
.mainscreen {background-color: var(--background-color);}
    .timer {background-color: var(--secondary-color);}

    /*screen 3d*/
    .timedisplay {background: var( --display-color);
                    box-shadow: inset 2px 2px 2px var( --display-color-3dd),
                                inset -2px -2px 2px var( --display-color-3dl);}
    /* Timer A start button*/
    .timer:nth-child(1) .sbutton {
        background-color: var(--bcolor-1);
        box-shadow: inset -6px -6px 6px var(--bcolor-1-3dd),
                    inset 6px 6px 6px var(--bcolor-1-3dl); 
    }
    /* Timer B start button*/
    .timer:nth-child(2) .sbutton {
        background-color: var(--bcolor-2);
        box-shadow: inset -6px -6px 6px var(--bcolor-2-3dd),
                    inset 6px 6px 6px var(--bcolor-2-3dl); 
    }
    /* Timer C start button*/
    .timer:nth-child(3) .sbutton {
        background-color: var(--bcolor-3);
        box-shadow: inset -6px -6px 6px var(--bcolor-3-3dd),
                    inset 6px 6px 6px var(--bcolor-3-3dl); 
    }
    /* Timer D start button*/
    .timer:nth-child(4) .sbutton {
        background-color: var(--bcolor-4);
        box-shadow: inset -6px -6px 6px var(--bcolor-4-3dd),
                    inset 6px 6px 6px var(--bcolor-4-3dl); 
    }
/**/
.timerselector {background-color: var(--secondary-color);}
    /*alarm button*/
    .abutton {
        background-color: var(--alarm-button);
        box-shadow: inset -4px -4px 4px var(--alarm-button-3dd),
                    inset 4px 4px 4px var(--alarm-button-3dl); 
    }
    /*timer selector buttons 3d*/
    .optionbutton[data-timer="a"] {
        background-color: var(--bcolor-1);
        box-shadow: inset -4px -4px 4px var(--bcolor-1-3dd),
                    inset 4px 4px 4px var(--bcolor-1-3dl); 
    }
    .optionbutton[data-timer="b"] {
        background-color: var(--bcolor-2);
        box-shadow: inset -4px -4px 4px var(--bcolor-2-3dd),
                    inset 4px 4px 4px var(--bcolor-2-3dl); 
    }
    .optionbutton[data-timer="c"] {
        background-color: var(--bcolor-3);
        box-shadow: inset -4px -4px 4px var(--bcolor-3-3dd),
                    inset 4px 4px 4px var(--bcolor-3-3dl); 
    }
    .optionbutton[data-timer="d"] {
        background-color: var(--bcolor-4);
        box-shadow: inset -4px -4px 4px var(--bcolor-4-3dd),
                    inset 4px 4px 4px var(--bcolor-4-3dl); 
    }
/*0-9 keypad 3d*/
.keypad {background-color: var(--secondary-color);}
.keypad > div:nth-child(1) > div,
.keypad > div:nth-child(2) > div,
.keypad > div:nth-child(3) > div,
.keypad > div:nth-child(4) > div,
.keypad > div:nth-child(5) > div,
.keypad > div:nth-child(6) > div,
.keypad > div:nth-child(7) > div,
.keypad > div:nth-child(8) > div,
.keypad > div:nth-child(9) > div,
.keypad > div:nth-child(11) > div {
    background-color: var(--keypad-button);
    box-shadow: inset -6px -6px 6px var(--keypad-button-3dd),
                inset 6px 6px 6px var(--keypad-button-3dl); 
}
/*mode/clear buttons 3d*/
.keypad > div:nth-child(10) > div,
.keypad > div:nth-child(12) > div {
    background-color: var(--keypad-button-other);
    box-shadow: inset -4px -4px 4px var(--keypad-button-other-3dd),
                inset 4px 4px 4px var(--keypad-button-other-3dl); 
}















/*--led light states--------------------------*/
/*led 1 */
.stopwatchlight {background-color: var(--led-off);}
.stopwatchlight.active {background-color: var(--led-one);}
/*led 2*/
.timerlight {background-color: var(--led-off);}
.timerlight.active {background-color: var(--led-two);}
/*led 3*/
.optionlight {background-color: var(--led-off);}
.optionlight.active {background-color: var(--led-three);}
/*led 4*/
.alarmlight {background-color: var(--led-off);}
.alarmlight.active {background-color: var(--led-four);}