/* EDIT THESE TO CHANGE THE LOOKS OF YOUR PAGE */

/*
These are the available custom properties that the default pages read.
You can customize your page by editing these. Your custom HTML can also
go here after the body declaration. This stylesheet is not used by the editor.
To edit a property, copy it (-- to ;) and paste below the commented-out zone. Then
you can edit its value.
*/

body {
	/*
	--sizing: 24px; general distance between elements
	--page-timing: 0.15s; transition of most elements' animations on hover, etc

	--col-background: #fab; background color
	--col-body: #fff; main container color
	--col-dim: #eee; color for dim borders, etc - "body color but a bit different"
	--col-text: #222; main text color
	--col-accent: #fab; accents color, like borders, etc
	--col-counterpick: #1fc; secondary accetns
	--col-shadow: rgba(0,0,0,0.1); color for box-shadows, etc

	--font-big: 'arial'; buttons, headings, etc
	--font-big-size: 32px;
	--font-main: 'verdana'; main text
	--font-main-size: 18px;

	--shadow: -4px 4px 0 var(--col-shadow); set master box-shadow distance/blur here

	--buttons-height: 64px; height of group buttons and other buttons
	--buttons-per-row: 4; how many buttons per row to display. change artworks in settings.js
	--viewer-overlay-opacity: 0.5; when you press on an artwork, a viewer pops up. this is
	--viewer-overlay-rgb: 0,0,0; to set up its backdrop opacity and colour (rgb value triplet)

	--border-width: 4px; borders of group buttons
	*/
  --font-big: "Comic Sans MS";
  --font-big-size: 45px;
  --font-main: "Comic Sans MS";
}