@import '@fontsource/fira-mono';
@import './lib/Design/streams.css';

html {
    box-sizing: border-box;
    font-family: var(--fontFamily_stream);
}

*,
*::before,
*::after {
    box-sizing: inherit;
    font-family: inherit;
}

body {
	min-height: 100vh;
	margin: 0;
	padding: 0;
    color: var(--color_foreground_stream);
    background-color: var(--color_background_stream);
    z-index: var(--ground-floor);
}

 button,
 input,
 optgroup,
 select,
 textarea {
   font-family: inherit; /* 1 */
   font-size: 100%; /* 1 */
   line-height: 1.15; /* 1 */
   margin: 0; /* 2 */
   color: var(--color_foreground_stream);
   border: none;
 }
 
 /**
  * Show the overflow in IE.
  * 1. Show the overflow in Edge.
  */
 button,
 input { /* 1 */
   overflow: visible;
   background: none;
 }
 
 /**
  * Remove the inheritance of text transform in Edge, Firefox, and IE.
  * 1. Remove the inheritance of text transform in Firefox.
  */
 button,
 select { /* 1 */
   text-transform: none;
 }
 
 /**
  * Correct the inability to style clickable types in iOS and Safari.
  */
 button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
   -webkit-appearance: button;
   border: none;
   color: inherit;
 }

@media (prefers-color-scheme: dark) {
    :root {
        --is-dark-number_stream: 1;  
        --is-dark-space_stream: initial;
        --is-not-dark-space_stream: ;
    }
} 
 









/* @import '@fontsource/fira-mono';

:root {
	
    --is-dark-number_stream: 0;
    --is-dark-space_stream: ;
    --is-not-dark-space_stream: initial;
	
    --color_contrast-white: 96%; 
    --color_contrast-lower: 88%;
    --color_contrast-low: 66%;
    --color_contrast-medium: 44%;
    --color_contrast-high: 22%;
    --color_contrast-higher: 9%;
    --color_contrast-black: 0%;

    --color_background_stream: hsl( 
        0, 0%, calc( (1 - var(--is-dark-number_stream))*var(--color_contrast-white) + var(--is-dark-number_stream)*var(--color_contrast-black) ) 
    );
    --color_lower: hsl( 
        0, 0%, calc( (1 - var(--is-dark-number_stream))*var(--color_contrast-lower) + var(--is-dark-number_stream)*var(--color_contrast-higher) ) 
    );
    --color_low: hsl( 
        0, 0%, calc( (1 - var(--is-dark-number_stream))*var(--color_contrast-low) + var(--is-dark-number_stream)*var(--color_contrast-high) ) 
    );

    --color_medium: hsl( 0, 0%, var(--color_contrast-medium) );
    
    --color_high: hsl( 
        0, 0%, calc((1 - var(--is-dark-number_stream))*var(--color_contrast-high) + var(--is-dark-number_stream)*var(--color_contrast-low)) 
    );
    --color_higher: hsl( 
        0, 0%, calc((1 - var(--is-dark-number_stream))*var(--color_contrast-higher) + var(--is-dark-number_stream)*var(--color_contrast-lower)) 
    );
    --color_foreground_stream: hsl( 
        0, 0%, calc((1 - var(--is-dark-number_stream))*var(--color_contrast-black) + var(--is-dark-number_stream)*var(--color_contrast-white)) 
    );

    --color_transparency: 0.6;
    --color_background_stream_transparent: hsla( 
        0, 0%, calc( (1 - var(--is-dark-number_stream))*var(--color_contrast-white) + var(--is-dark-number_stream)*var(--color_contrast-black) ),
        var(--color_transparency)
    );

    
	--padding: 1em;
    --margin: 0; 
    
    
    --border_color: red;
    --border_width: 1px;
    --border_lineType: solid;
    --border: var(--border_width) var(--border_lineType) var(--border_color);

    
    --font_family: 'Open Sans', 'Helvetica Neue', sans-serif;
    --font_size: 12px;
    --font_weight: normal;
    --line_height: 14px;
    
	--input_width: 100%;
    --input_height: 64px;
    --graph_height: 100vh;

}

html {
    box-sizing: border-box;
    font-family: var(--fontFamily_stream);
}

*,
*::before,
*::after {
    box-sizing: inherit;
    font-family: inherit;
}

body {
	min-height: 100vh;
	margin: 0;
	padding: 0;
    color: var(--color_foreground_stream);
    background-color: var(--color_background_stream);
    z-index: var(--ground-floor);
}

 button,
 input,
 optgroup,
 select,
 textarea {
   font-family: inherit; 
   font-size: 100%; 
   line-height: 1.15; 
   margin: 0; 
   color: var(--color_foreground_stream);
   border: none;
 }
 
 
 button,
 input { 
   overflow: visible;
   background: none;
 }
 
 
 button,
 select { 
   text-transform: none;
 }
 
 button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
   -webkit-appearance: button;
   border: none;
   color: inherit;
 }

@media (prefers-color-scheme: dark) {
    :root {
        --is-dark-number_stream: 1;  
        --is-dark-space_stream: initial;
        --is-not-dark-space_stream: ;
    }
} 
 
.stream_wrapper {
    height: 100%;
    display: grid;
    grid-template-rows: min-content 1fr min-content;
}
.stream_progress {
    min-height: 50px;
}
form.step_wrapper {

    --form_border: none;
    --form_width: 100%;
    --form_height: 100%;
    --form_padding: var(--padding);

    width: var(--form_width);
    height: var(--form_height);
    padding: var(--form_padding);
    border: var(--form_border);

    font-family: var(--font_family);

}

.graph {

    --graph_border_color: var(--color_foreground_stream);
    --graph_border: 1px solid var(--graph_border_color);
    --graph_width: 100%;
    --graph_height: 100%;
    --graph_padding: 0;
    --graph_aspect_ratio: 1 / 1;
    --graph_overflow: clip;
    --graph_z_index: 0;

    width: var(--graph_width);
    height: var(--graph_height);
    padding: var(--graph_padding);

    aspect-ratio: var(--graph_aspect_ratio);
    overflow: var(--graph_overflow);
    z-index: var(--graph_z_index);
}

.stream_buttons {
    --stream_buttons_height: 100px;
    width: 100%;
    height: var(--stream_buttons_height);

    display: grid;
    grid-auto-flow: column;
}
.stream_control {
    --control_width: 100%;
    --control_height: 50px;
    --control_padding: calc(var(--padding) / 3);

    width: var(--control_width);
	min-height: var(--control_height);
    padding: var(--control_padding);
}

input.stream_control {
    --control_border: 1px solid var(--color_low);
    --control_color: var(--color_low);
    --control_background_color: var(--color_lower);
    --control_font_size: 0.9em;
    background-color: var(--control_background_color);
    border: var(--control_border);
}
input.stream_control::-webkit-input-placeholder { 
    color: var(--control_color);
    font-size: var(--control_font_size);
}
  
input.stream_control:-ms-input-placeholder { 
    color: var(--control_color);
    font-size: var(--control_font_size);
}
  
input.stream_control::placeholder {
    color: var(--control_color);
    font-size: var(--control_font_size);
}


 */