.container_master {
        display: flex;
        flex-direction: column;
        height: 90vh;
        justify-content: center;
        flex-grow: 1;
}

.container {
        display: flex;
        justify-content: center;
        align-items: center;

        --unit_length: 1.5vw;
        --vert_half_ratio: 3;
        --hori_ratio: 3;
        --border-radius_corner: calc(var(--unit_length) /2);

        --unit_half_length: calc(var(--unit_length) / 2);
        --hori_length: calc(var(--hori_ratio) * var(--unit_length));
        --vert_half_length: calc(var(--vert_half_ratio) * var(--unit_length));

        --digit_slash_width: calc(var(--unit_length) * 3);
      
        --fill_color: darkorange;
        transform: skew(-10deg);
}

.digit_container {
        display: grid;
        grid-template-columns: var(--unit_length) var(--hori_length) var(--unit_length);
        grid-template-rows: var(--unit_length) var(--vert_half_length) var(--unit_length) var(--vert_half_length) var(--unit_length);
        margin: var(--unit_half_length);
}

.corner {
        width: var(--unit_length);
        height: var(--unit_length);
        border-style: solid;
        box-sizing: border-box;
        border-width: var(--unit_half_length);
}

._0 {
        border-color: var(--fill_color) var(--fill_color) var(--fill_color) var(--fill_color);
        border-top-left-radius: var(--border-radius_corner);
}

._1 {
        border-color: var(--fill_color) var(--fill_color) var(--fill_color) var(--fill_color);
        border-top-right-radius: var(--border-radius_corner);
}

._2 {
        border-color: var(--fill_color) var(--fill_color) var(--fill_color) transparent;
}

._3 {
        border-color: var(--fill_color) transparent var(--fill_color) var(--fill_color);
}

._4 {
        border-color: var(--fill_color) var(--fill_color) var(--fill_color) var(--fill_color);
        border-bottom-left-radius: var(--border-radius_corner);
}

._5 {
        border-color: var(--fill_color) var(--fill_color) var(--fill_color) var(--fill_color);
        border-bottom-right-radius: var(--border-radius_corner);
}

.fill {
        background-color: var(--fill_color);
}

.slashbox {
        width: var(--digit_slash_width);
        height: var(--unit_length);
        margin: var(--unit_length);
        background-color: var(--fill_color);
        flex-shrink: 0
}

.colon {
        display: grid;
        grid-template-rows:  var(--unit_length) var(--unit_length) var(--unit_length) ;
        grid-template-columns: var(--unit_length) var(--unit_length) var(--unit_length);
}

.tp {
        background-color: transparent;
}

#ctrl {
        display: flex;
        justify-content: center;
        position: fixed;
        bottom: 0px;
	left: 0px;
	right: 0px;
}