@font-face {
    font-family: "Seg-7";
    src: url( "Segment7Standard.otf" );
}

@font-face {
    font-family: "Digital-7";
    src: url( "digital-7.regular.ttf" );
}

/* Set all div elements to use the box-sizing property of border-box */
div {
    box-sizing: border-box;
}

/* Here we set all of the main style properties for the main radar container */
#radar {
    transform: scale( 2 );

    width: 550px;
    height: 200px;

    position: absolute;
    box-sizing: content-box;
    margin: auto;
    padding: 15px;
    
	top: 0;
	bottom: 0;
	left: 0;
    right: 0;
    
    background-color: rgb(30, 33, 38);
    /* background-color: rgb(58, 63, 71); */

    display: grid;
    grid-template-columns: 45px 160px auto;
    column-gap: 5px;
}
    #radar > div {
        /* border: 1px solid orange; */
        margin: 0;
    }

    #radar .modes {
        display: grid;
        grid-template-rows: 50% 50%;
    }
        #radar .modes .modes_container {
            display: grid;
            grid-template-rows: repeat( 3, auto );

            margin: 15px 0;

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

        #radar .modes .mode_text {
            width: 100%;

            font-family: Verdana;
            font-size: 10px;

            text-align: center;

            margin: auto;
            
            color: white;
        }

    #radar .speeds {
        display: grid;
        grid-template-rows: 50% 50%;
    }
        #radar .speeds .speed_display {
            position: relative;

            display: flex;
            justify-content: center;
            align-items: center;

            margin: 10px 0;

            background-color: rgb(61, 18, 0);
            border: 3px solid black;
        }
            #radar .speeds .speed_display span {
                position: absolute;

                display: block;

                /* width: 100%; */
                /* width: auto; */
                height: 63px;
                line-height: 108%;
                margin: auto;
                margin-right: -10px;

                font-family: 'Seg-7';
                font-size: 70px;
                text-align: center;

                letter-spacing: 10px;
            }

            #radar .speeds .speed_display .ghost {
                /* position: absolute; */
                color: rgb(90, 35, 1);
            }

            #radar .speeds .speed_display .speed_number {
                color: rgb(252, 113, 1);
            }
    
    #radar .main_area {
        display: grid;
        grid-template-rows: 10% 80% 10%;
    }
        #radar .main_area .header {
            font-family: Verdana; 
            color: white;
        }

* {
    overflow: hidden;
}