:root {

	/* Sizing variables */

	--space-micro: 0.1rem;
	--space-tiny:  0.2rem;
	--space-mini:  0.3rem;
	--space-small: 0.5rem;
	--space-medium:  1rem;
	--space-big:     2rem;
	--space-large:   3rem;
	--space-huge:    4rem;
	--space-wide:    5rem;

	--padding-list: 1.5rem;

	/* Font variables */

	--font-size-button:    1rem;
	--font-size-input:     1rem;
	--font-size-paragraph: 1rem;
	--font-size-h1: calc(2.00 * var(--font-size-paragraph));
	--font-size-h2: calc(1.50 * var(--font-size-paragraph));
	--font-size-h3: calc(1.17 * var(--font-size-paragraph));
	--font-size-h4: calc(1.05 * var(--font-size-paragraph));
	--font-size-h5: calc(0.85 * var(--font-size-paragraph));
	--font-size-h6: calc(0.67 * var(--font-size-paragraph));

	--font-button:    Verdana;
	--font-input:     Verdana;
	--font-paragraph: Verdana;
	--font-heading:   Arial;

	/* Color variables */

	--orange:    #e07440;
	--yellow:    #d9a925;
	--green:     #249b4e;
	--cyan:      #13a2d6;
	--blue:      #4493f8;
	--purple:    #c62f94;
	--red:       #e03921;
	--gray:      rgb(46, 46, 46);
	--dark-gray: rgb(32, 32, 32);

	/*Dark theme*/

	--dark-color-background:     rgb(46, 46, 46);
	--dark-color-panel:          rgb(32, 32, 32);
	--dark-color-panel-button:   rgb(38, 38, 38);
	--dark-color-button:         rgb(168, 80, 36);
	--dark-color-border:         rgb(60, 60, 60);
	--dark-color-grid-primary:   rgb(128, 128, 128);
	--dark-color-grid-secondary: rgb(64, 64, 64);
	--dark-color-line:           rgb(239, 239, 239);
	--dark-color-title:          var(--orange);
	--dark-color-heading:        rgb(239, 239, 239);
	--dark-color-text:           rgb(239, 239, 239);
	--dark-color-hovered:        rgb(46, 46, 46);
	--dark-color-active:         rgb(100, 100, 100);

	/*Light theme */

	--light-color-background:     rgb(255, 255, 255);
	--light-color-panel:          rgb(230, 230, 230);
	--light-color-panel-button:   rgb(210, 210, 210);
	--light-color-button:         rgb(224, 116, 64);
	--light-color-border:         rgb(60, 60, 60);
	--light-color-grid-primary:   rgb(128, 128, 128);
	--light-color-grid-secondary: rgb(164, 164, 164);
	--light-color-line:           rgb(32, 32, 32);
	--light-color-title:          var(--orange);
	--light-color-heading:        rgb(32, 32, 32);
	--light-color-text:           rgb(16, 16, 16);
	--light-color-hovered:        rgb(180, 180, 180);
	--light-color-active:         rgb(220, 220, 220);

	/* Theme variables */

	--color-background:     var(--dark-color-background);
	--color-panel:          var(--dark-color-panel);
	--color-panel-button:   var(--dark-color-panel-button);
	--color-button:         var(--dark-color-button);
	--color-border:         var(--dark-color-border);
	--color-grid-primary:   var(--dark-color-grid-primary);
	--color-grid-secondary: var(--dark-color-grid-secondary);
	--color-line:           var(--dark-color-line);
	--color-title:          var(--dark-color-title);
	--color-heading:        var(--dark-color-heading);
	--color-text:           var(--dark-color-text);
	--color-hovered:        var(--dark-color-hovered);
	--color-active:         var(--dark-color-active);

	/* Border variables */

	--default-border:   1px solid var(--color-border);
	--link-border:   1px solid var(--color-text);
	--math-symbol-border:  2px solid var(--color-text);
	--radical-border: 0.5px solid var(--color-text);
}

@media only screen and (max-width: 900px) {
	:root {
		--font-size-button:    0.9rem;
		--font-size-input:     0.9rem;
		--font-size-paragraph: 0.85rem;

		--space-big:  1.8rem;
		--space-large: 2.5rem;
		--space-huge:    3.2rem;

	    --padding-list: 1rem;
	}
}