* {
  /* Override browser's default CSS styles. For some reason, the margins & paddings appear to be incorrect when these rules are applied to body or html, instead of '*'. */
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

/* html {                 /* This rule was part of the Replit template *
  height: 100%;
  width: 100%;
}
*/

/* DEBUG */
.highlight {
  border: 1px solid red; 
}



/****************************************************************/
/* COLOR & SIZING SCHEME VARIABLES                              */
/****************************************************************/

body {
  /* Dark color scheme, the default */
  --background: #012;
  --text:       #FFF;

  /* These red, green, & blue colors are the default graph colors from Desmos, with their HSB saturation slightly adjusted to 61. */
  --red:     #B84F48;
  --green:   #378C47;
  --blue:    #4471AD;
  --accent1: #D8F2A0;
  --accent2: #F25C84;
  --textInputBackground: #000;

  /* Sizing scheme, relative to font size of PARENT element. Exponential change. */
  --xxsmaller: 0.486em;
  --xsmaller:  0.618em;
  --smaller:   0.786em; /* golden ratio to power of -1/2 */
  --inherit:   1.000em; /* Default, no need to use this variable explicitly. */
  --larger:    1.272em; /* square root of golden ratio */
  --xlarger:   1.618em; /* golden ratio */
  --xxlarger:  2.058em;
  --xxxlarger: 2.618em;

  /* Default properties */
  font-size: max(2vh, 1rem);
  font-family: sans-serif;
  background-color: var(--background);
  color: var(--text);
}

body * { /* DEBUG */
  /* border: 1px solid var(--red); */
}


  /* Override some dark theme variables. */
#light-mode {
  --background: #DDD;
  --text:       #000;

  /* Source of this gray & the mint and pink from above: https://color.adobe.com/trends/Ui/ux */
  /* The accent1 color for dark mode is too light for a light background. */
  --accent1: #384D59;
  --accent2: #2A1636; /* Kognity */

  --textInputBackground: #CCC;
}



/****************************************************************/
/* FONTS                                                        */
/****************************************************************/
@font-face {
  font-family: 'Noto Sans Math';
  src: url('NotoSansMath-Regular.ttf');
}

/* Add a monospaced font, to make more obvious the number of digits */

/****************************************************************/
/* GRID                                                         */
/****************************************************************/

main {
/*  display: flex;           /* centered on both axes */*/
/*  justify-content: center;*/
/*  align-items: center;*/
  
  width: 100%; /* Hopefully prevent overflow off to the left*/
  padding: 5%;
  font-family: 'Noto Sans Math';
    
/*  display: grid;           /* 4 rows, 3 columns */ /* Add a grid-area CSS property to format the webpage as a grid*/
/*  grid-template-areas:*/
/*                '. inputA errorTypeA'*/
/*  'operationSelect inputB errorTypeB'*/
/*           'answer answer submit'*/
/*          'summary summary summary'*/
/*   grid-template: 4fr 2em 4em 1fr / 2em 4fr 1fr;*/
}



/****************************************************************/
/* GENERAL STYLES                                               */
/****************************************************************/

.numberInput {
  display: inline; /* Put both text boxes and the ± symbol in a straight line */
  /* background-color: var(--textInputBackground); */
  color: var(--text);
}

input[type=text] {
  width: min(30%, 12em);
  height: 3em;
}

#submit {
  width: 12em;
  height: 3em;
}