/* 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;

    padding: 0;

    position: absolute;
    margin: auto;
    
	top: 0;
	bottom: 0;
	left: 0;
    right: 0;
    
    background-color: rgb(30, 33, 38);

    display: grid;
    grid-template-columns: 40px 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 {
            display: flex;

            margin: 15px 0;
            background-color: orange;
        }
            #radar .speeds .speed_display .speed_number {
                /* width: 100%;
                margin: 0; */
                margin: auto;
                font-size: 50px;
                text-align: center;
            }