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

/* for 'px' or '%' united variables, if you're using 0, please, write 0% or 0px! otherwise stuff might suddenly eat pants */

body {

	/* color settings. accept hex values e.g. #AAB, #008080, or HTML basic colours e.g. 'red' */
	--col-backg:              #ffbbb0; /* page (behind main content) background color */
	--col-highlight:          #ec725e; /* highlights (borders, headings, etc) */
	--col-body:               #FFFFFF; /* content body color */
	--col-text:               #222222; /* main text color */
	--col-text-light:         #CCCCCC; /* secondary text color */
	--col-buttonbg:           #fff; /* group button background color */
	--col-viewer:             #FFFFFF; /* image viewer pop-up borders/button text */
	--col-viewer-text:        #FF88CB; /* image viewer bottom description text color */
	--col-viewer-background:  rgba(0,0,0,0.15); /* background color for indiv. image view overlay - can be "none" */

	/* radius of corners of all main elements on the page. 0...N pixels (e.g. 3px, 0px=sharp corners) */
	--corner-radius:          8px;    

	/* thiccness of borders for all main elements on the page. 0...N pixels (e.g. 3px) */
	--border-width:           3px;    

	/* font settings. accept default fonts like 'Arial', 'Calibri' or stuff. To use a custom font,
	put an @font-face rule at the very first line of this file and point it to your custom font.
	if you're not sure how to do that --> https://www.w3schools.com/cssref/css3_pr_font-face_rule.php */
	--font-main:             'Arial'; /* font for usual text */
	--font-main-size:         26px;
	--font-big:              'Arial'; /* font for titles etc */
	--font-big-size:          36px;
	--font-btn-size:          25px;   /* this font size used exclusively on group buttons */
	--main-text-align:        left;   /* alignment for main texts (paragraphs, descriptions..) suggested: left/justify */

	/* general page spacing settings */
	--page-margin:            7.5%;   /* spacing between screen borders and main wrapper in %. 5-10% rec. */
	--page-spacing:           32px;   /* master spacing between all the elements on page. 16-48px rec. */

	/* user section settings */
	--userpic-size:           150px;  /* px (static) or % (dynamically resized along with the page) */
	--userpic-radius:         50%;    /* smoothness of the userpic image cornders in %. 0% = square, 100% = round, 50% = rounded rectangle, and inbetween*/
	--userpic-file:           url('../files/missing_image.png'), url('./files/missing_image.png'); /* put your userpic to /files/, its filename goes here */
	--userpic-border:         solid;  /* options: solid, dashed, none*/
	--username-align:         left;   /*  options: left, middle or right */

	/* section divider horizontal line settings */
	--divider-width:          calc(100% - var(--page-spacing) - var(--page-spacing)); /* width, % or calc(% - px). default setting fits itself to page spacing */
	--divider-size:           3px;    /* thiccness of the divider line, px */
	--divider-style:          dotted; /* line styling options: solid, dashed, dotted */;

	/* group buttons options */
	--buttons-per-row:        3;      /* number of group buttons per row, suggested 4-6 */      
	--button-height:          80px;   /* height of one group button */

	/* artworks grid options */
	--artworks-per-row:       4; 	  /* how many artworks to display per row. integer. suggested 3-6 */
	--artworks-align:         middle; /* vertical align if the artworks are of different height, they will "magnet" to: top, middle or bottom */
	--artwork-box-shadow:     none;   /* shadow. none' or e.g. 0px 0px 8px RGBA(0,0,0,0.1); do not use if you have a bunch of strange outter shape transparency images */	

	/* on-click big image view options */
	--overlay-opacity:        0.5;    /* opacity of the semitransparent backdrop overlay that appears when you click on the artwork for details/bigger view, 0.0 ... 1.0  */
	

}