/* DIGITAL CLOCK/TIMER (BASED ON: https://codepen.io/FWeinb/pen/LmKvl) */

:root {
    --scalingFactorForTimer: 1;
    --digitColor: black;
    --digitBackgroundColor: #EEEEEE;
}

.digit,
.digit2,
.colon,
.colon2 {
    position: relative;
    display: inline-block;
    width: calc(var(--scalingFactorForTimer) * 5px);
    height: calc(var(--scalingFactorForTimer) * 55px);
    margin: calc(var(--scalingFactorForTimer) * 2.5px);
}

.colon,
.colon2 {
    background: linear-gradient(-90deg, var(--digitColor) 10px, transparent 10px), linear-gradient(-90deg, var(--digitColor) 10px, transparent 10px);
    background-position: 0 calc(var(--scalingFactorForTimer) * 20px), 0 calc(var(--scalingFactorForTimer) * 32.5px);
    background-repeat: no-repeat;
    background-size: calc(var(--scalingFactorForTimer) * 5px) calc(var(--scalingFactorForTimer) * 5px), calc(var(--scalingFactorForTimer) * 5px) calc(var(--scalingFactorForTimer) * 5px);
}

.digit,
.digit2 {
    width: calc(var(--scalingFactorForTimer) * 30px);
    background-image: linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), /* Top */
    linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), /* Middle */
    linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), /* Bottom */
    linear-gradient(90deg, var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 25px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 25px)), /* left */
    linear-gradient(90deg, var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 25px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 25px));
    /* Right */
    background-position: 0 0, 0 calc(var(--scalingFactorForTimer) * 25px), 0 calc(var(--scalingFactorForTimer) * 50px), 0 calc(var(--scalingFactorForTimer) * 5px), 0 calc(var(--scalingFactorForTimer) * 30px);
    background-repeat: no-repeat;
    background-size: calc(var(--scalingFactorForTimer) * 30px) calc(var(--scalingFactorForTimer) * 5px), calc(var(--scalingFactorForTimer) * 30px) calc(var(--scalingFactorForTimer) * 5px), calc(var(--scalingFactorForTimer) * 30px) calc(var(--scalingFactorForTimer) * 5px), calc(var(--scalingFactorForTimer) * 30px) calc(var(--scalingFactorForTimer) * 20px), calc(var(--scalingFactorForTimer) * 30px) calc(var(--scalingFactorForTimer) * 20px);
}

.zero {
    background-image: linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 25px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 25px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px));
}

.one {
    background-image: linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 25px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 25px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px));
}

.two {
    background-image: linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 25px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 25px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 25px));
}

.three {
    background-image: linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 25px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 25px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px));
}

.four {
    background-image: linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 25px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 25px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px));
}

.five {
    background-image: linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 25px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 25px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px));
}

.six {
    background-image: linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 25px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 25px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 25px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px));
}

.seven {
    background-image: linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 25px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 25px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px));
}

.eight {
    background-image: linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 25px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 25px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px));
}

.nine {
    background-image: linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, transparent calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px), transparent calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, var(--digitColor) calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 25px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px)), linear-gradient(90deg, var(--digitBackgroundColor) calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 5px), transparent calc(var(--scalingFactorForTimer) * 25px), var(--digitColor) calc(var(--scalingFactorForTimer) * 25px));
}