:root {
  /* Viewport sizes */
  --app-height: 100dvh;
  --app-offset-top: 0px;
  --app-offset-left: 0px;

  /* Site sizes */
  --header-height: clamp(30px,4vh,50px);   /* clamp(min, preferred, max)  */
  --footer-height: clamp(64px,10vh,84px);

  /* Bar sizes */
  --bar-button-height: 38px; /*clamp(40px,3vh,52px);*/
  --bar-padding-x: 8px; /*clamp(12px,4vw,20px);*/
  --bar-padding-y: 30px; /* clamp(6px,1vh,12px); */

  /* Equation sizes */
  --glyph-height: 80px; /* clamp(24px,2.5vh,24px); */

  /* Text input size */
  --keyboardinput-height: 2.5rem; /* clamp(56px,5vh,72px); */
  --keyboardinput-width: 42vw; /* min(900px,42vw); */

  /* Colours (light theme) */
  --light-background-color: #F6F1E8;
  --light-text-color: #2C2A28;
  --light-panel-color: #FFFFFF;
  --light-border-color: #D8D1C4;
  --light-link-background-color: #E6F0FA;
  --light-link-hover-color: #CFE3F7;
  --light-outline-color: #7AA7D9;
  --light-glyph-blue-color: #1b66a4;
  --light-glyph-red-color: #b6281c;
    
  /* Colours (dark theme) */
  --dark-background-color: #1E1C19;
  --dark-text-color: #E8E3DA;
  --dark-panel-color: #2A2723;
  --dark-border-color: #3A3630;
  --dark-link-background-color: #24364A;
  --dark-link-hover-color: #2F4A66;
  --dark-outline-color: #6FA3D6;
  --dark-glyph-blue-color: #6FA3D6;
  --dark-glyph-red-color: #D46A5F;

  /* Colours (light theme) */
  /* --light-background-color: #ffffff;
  --light-text-color: #111111;
  --light-panel-color: #f3f3f3;
  --light-border-color: #cccccc;
  --light-link-background-color: #ffffff;
  --light-link-hover-color: #dddddd;
  --light-outline-color: #2563eb;
  --light-glyph-blue-color: #06e658;
  --light-glyph-red-color: #003a1a; */
    
  /* Colours (dark theme) */
  /* --dark-background-color: #111;
  --dark-text-color: #eee;
  --dark-panel-color: #181818;
  --dark-border-color: #333;
  --dark-link-background-color: #111;
  --dark-link-hover-color: #222;
  --dark-outline-color: #60a5fa;
  --dark-glyph-blue-color: #aed1fb;
  --dark-glyph-red-color: #ffaaaa; */

  /* Colours (default to light) */
  --background-color: var(--light-background-color);
  --text-color: var(--light-text-color);
  --panel-color: var(--light-panel-color);
  --border-color: var(--light-border-color);
  --link-background-color: var(--light-link-background-color);
  --link-hover-color: var(--light-link-hover-color);
  --outline-color: var(--light-outline-color);
  --glyph-blue-color: var(--light-glyph-blue-color);
  --glyph-red-color: var(--light-glyph-red-color);

  /* Transitions */
  --theme-transition: 250ms ease-in-out;
  --hover-transition: 140ms ease;
  --menu-transition-open: 460ms ease;
  --menu-transition-close: 100ms ease;
}