:root {
    --borderWidth: 4px;
    --marginWidth: 10px;
    --paddingWidth: 15px;
    --boardWidth: calc(768px - var(--marginWidth) * 2 - var(--paddingWidth) * 2);
    --frameWidth: calc(var(--boardWidth) - var(--borderWidth) * 2);
    --digitColor: #D02121;
    --digitBGColor: #131313;
}

/**************************************************
*****************GENERAL STYLING*******************
**************************************************/

body {
    background: #555555;
    font-size: 100%; /* Fixes an issue with font resizing in older IE versions */
    margin: 0;
}

/* div {
    border: 1px dotted red;
} */

/* span {
    border: 1px dotted green;
} */

/**************************************************
**********************FONTS************************
**************************************************/

@font-face {
    font-family: 'digital-7-mono';
    src: url('fonts/digital-7-mono.ttf') format('truetype'),
         url('fonts/digital-7-mono.woff') format('woff'),
         url('fonts/digital-7-mono.woff2') format('woff2');
}

/****************** FONT STYLES ******************/

/* Numerical displays for the current game's statistics
 * and unlit vs lit digital number parts */
.digital-bg {
    font-family: 'digital-7-mono';
    font-size-adjust: 0.66;
    color:var(--digitBGColor);
}

.digital-fg {
    font-family: 'digital-7-mono';
    font-size-adjust: 0.66;
    color:var(--digitColor);
}

/**************************************************
*******************COMPONENTS**********************
**************************************************/

/* Scoreboard-Frame-Outer */
#scoreboard-frame-outer {
    margin: 10px;
    padding: 15px;
    aspect-ratio: 257 / 127;

    width: var(--boardWidth);

    background-color: whitesmoke;
}

#scoreboard-frame-inner { 
    width: calc(100% - var(--borderWidth) * 2);
    height: calc(100% - var(--borderWidth) * 2);
    background: #1C274A;
    border: var(--borderWidth) solid #000000;
}

#top-section-frame {
    display: flex;
    flex-direction: column;

    height: calc(57.63% - var(--borderWidth));

    border-bottom: var(--borderWidth) solid #000000;
}

#top-row-1 {
    display: flex;
    justify-content: space-between;
    height: 72.5%;
}

.score-group {
    display: flex;
    flex-direction: column;
    width: 30%;
    padding: 1%;
    text-align: center;
}

.score-display-wrapper {
    position: relative;
    margin: 0 auto;
}

.score-display {
    position: relative;
    height: 64px;
    padding: 0 10px;
    font-size: 4em;
}

.score-bg {
    border: var(--borderWidth) solid #000000;
    background-color: #232323;
}

.score-fg {
    top: calc(-64px - var(--borderWidth));
    margin: 0;
}

#clock-wrapper {
    width: 36%;
}

.clock-display {
    margin-top: 10px;
    position: relative;
    height: 100px;
    font-size: 6.2em;
    text-align: center;
}

.clock-bg {
    border: var(--borderWidth) solid #000000;
    background-color: #232323;
}

.clock-fg {
    top: calc(-100px - var(--borderWidth));
    margin: 0;
}

#top-row-2 {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 37.5%;
    top: -10%;
}

#bonus-group-left {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 35%;
    text-align: right;
    padding-top: 10px;
}

#bonus-group-right {
    position: relative;
    left: calc(0px - var(--borderWidth));
    
    display:flex;
    justify-content: end;
    align-items: center;
    width: 35%;
    text-align: left;
    padding-top: 10px;
}

#bonus-label-left {
    position: relative;
    padding: 5px;
    left: calc(-68px - var(--borderWidth));
}

#bonus-label-right {
    position: relative;
    padding: 5px;
    left: calc(68px + var(--borderWidth));
}

.bonus-display-left {
    position: relative;
    height: 36px;
    font-size: 3em;
    line-height: 80%;
}

.bonus-display-right {
    position: relative;
    left: calc(68px + var(--borderWidth));
    height: 36px;
    font-size: 3em;
    line-height: 80%;
}

.bonus-bg {
    border: var(--borderWidth) solid #000000;
    background-color: #232323;
}

.bonus-fg-left {
    left: calc(-68px - var(--borderWidth));
}

.bonus-fg-right {
    left: 0;
}

#qtr-group {
    position: relative;
    left: 20px;
    top: -3px;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
}

#qtr-label {
    padding-right: 10px;
}

.qtr-display {
    font-size: 4em;
    line-height: 80%;
    padding: 0 5px;
}

.qtr-bg {
    border: var(--borderWidth) solid #000000;
    background-color: #232323;
}

.qtr-fg {
    position: relative;
    left: calc(-40px - var(--borderWidth));
    margin: 0;
}

#bottom-section-frame {
    display: flex;
    justify-content: space-evenly;
    
    width: 100%;
    height: calc(42.37% - var(--borderWidth));
}

.bot-sec-grp {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bot-sec-disp {
    position: relative;
    left: 20px;

    display: flex;
    justify-content: center;

    height: 64px;
    font-size: 4em;
    text-align: center;
    margin: auto;

    line-height: 90%;
}

.bot-sec-bg {
    padding: 0 5px;

    border: var(--borderWidth) solid #000000;
    background-color: #232323;
}

.bot-sec-fg {
    position: relative;

    padding: var(--borderWidth) 5px;

    left: calc(-40px - var(--borderWidth));
}

/**************LABELS**************/

/* Scoreboard labels */
.sb-label {
    font-family: Arial, Helvetica, sans-serif;
    color: #dddddd;
    
    /* HOME GUEST QTR */
    &.label-1 {
        font-weight: 900;
        font-size: 3.4em;
        line-height: 80%;
    }

    /* BONUS */
    &.label-2 {
        font-weight: 900;
        font-size: 2.4em;
    }

    /* FOULS WON TOL PLAYER-FOULS MATCH */
    &.label-3 {
        font-weight: 900;
        font-size: 2em;
        text-align: center;
    }
}

#home-label {
    /* make HOME as wide as GUEST */
    --stretch-fact: 1.1429;
    display:inline-block;
    -webkit-transform:scale(var(--stretch-fact),var(--stretch-fact)); /* Safari and Chrome */
    -moz-transform:scale(var(--stretch-fact),var(--stretch-fact)); /* Firefox */
    -ms-transform:scale(var(--stretch-fact),var(--stretch-fact)); /* IE 9 */
    -o-transform:scale(var(--stretch-fact),var(--stretch-fact)); /* Opera */
    transform:scale(var(--stretch-fact),var(--stretch-fact)); /* W3C */

    margin-bottom: 10px;
}

#guest-label {
    /* make HOME as wide as GUEST */
    --stretch-fact: 1.1429;
    display:inline-block;
    -webkit-transform:scale(1,var(--stretch-fact)); /* Safari and Chrome */
    -moz-transform:scale(1,var(--stretch-fact)); /* Firefox */
    -ms-transform:scale(1,var(--stretch-fact)); /* IE 9 */
    -o-transform:scale(1,var(--stretch-fact)); /* Opera */
    transform:scale(1,var(--stretch-fact)); /* W3C */

    margin-bottom: 10px;
}