/* begin +++++++++++++++++ GRID STRUCTURE ++++++++++++++++++ */

/* begin +++++++++ GRID STRUCTURE +++++++ */

header.primary-nav {
	position:fixed;
	grid-area: main-nav;
	display:grid;
	order:1;
	}
.menu-icon {
	position:fixed;
	}
main {
	grid-area: main-content;
	width:calc(100vmin - 15.0rem);
	height:100vmax;
	top:0;
	}

.page-container {
	z-index:1;
	}
.page-head {
	grid-area: page-header;
	order:1;
	}
.title {
	grid-area: page-title;
	display:grid;
	order:2;
	}
/* begin +++++++++++ SAMPLE PAGE LAYOUT */

.sample-container {
	grid-area: sample-wrapper;
	grid-template-areas: 
	"portfolio-sample"
	"sample-heading"
	"sample-description";
	grid-template-rows: min-content;
	display:grid;
	order:2;
	}
.sample-image {
	grid-area: portfolio-sample;
	width:100%;
	height:auto;
	display:grid;
	order:1;
	}
.sample-title {
	grid-area: sample-heading;
	order:2;
	/* padding:0.6rem 0 0 0; */
	display: grid;
	}
.sample-description {
	grid-area: sample-description;
	width:95%;
	padding-top:0.9rem;
	padding-bottom:0.6rem;		
	display:grid;
	order:3;
	}
/* end +++++++++++ SAMPLE PAGE LAYOUT */

footer {
	grid-area: main-footer;
	width:100vw;
	position:fixed;
	bottom:0;right:0;
	display:grid;
	order:3;
	}

/* end +++++++++ GRID STRUCTURE +++++++ */
/* begin +++++++++ IDs for JAVASCRIPT ++++++++ */
/* LANDING LOGO, HOME ICON */
#pageBACK,
#pageNEXT {
	display:none;
	}
/* INDEX PAGES */
#indexFAcolor,
#indexFAbw,
#indexFAsketches,
#indexILcolor,
#indexILbw {
	visibility:hidden;
	}
/* FINE ART SAMPLE PAGES */
#sampleCOL1,
#sampleCOL2,
#sampleCOL3,
#sampleCOL4,
#sampleCOL5,
#sampleCOL6,
#sampleCOL7,
#sampleCOL8,
#sampleCOL9,
#sampleCOL10,
#sampleCOL11,
#sampleBW1,
#sampleBW2,
#sampleBW3,
#sampleBW4,
#sampleBW5,
#sampleBW6,
#sampleSK1,
#sampleSK2,
#sampleSK3,
#sampleSK4,
#sampleSK5,
#sampleSK6,
#sampleSK7,
#sampleSK8,
#sampleSK9,
#sampleSK10,
#sampleSK11 {
	display:none;
	}
/* ILLUSTRATION PAGING NAV IDS */
#ILsampleBW1,
#ILsampleBW2,
#ILsampleBW3,
#ILsampleBW4,
#ILsampleBW5,
#ILsampleBW6,
#ILsampleBW7,
#ILsampleBW8,
#ILsampleCOL1,
#ILsampleCOL2,
#ILsampleCOL3,
#ILsampleCOL4,
#ILsampleCOL5,
#ILsampleCOL6 {
display:none;
}
.textarea-label:hover > #chgMessage,
.textarea-label:active > #chgMessage,
.textarea-label:focus > #chgMessage {
	color:var(--gray8);
	}

/* end +++++++++ IDs for JAVASCRIPT ++++++++ */
/* begin +++++++++++++++++ VARIABLES ++++++++++++++++++ */

/*  COLORS */
/* ABBREVIATIONS: 
fa - Fine Art
grayscale: 1 darkest, 7 lightest
cl - cool
*/

/* begin ++++++++++++++++ GENERAL VARIABLES */
:root {
  --svw: calc(1svw - var(--scrollbarWidth) / 100);
  --lvw: calc(1lvw - var(--scrollbarWidth) / 100);
  --dvw: calc(1dvw - var(--scrollbarWidth) / 100);
  
  --svmin: calc(min(1svh, var(--svw)));
  --svmax: calc(max(1svh, var(--svw)));

  --lvmin: calc(min(1lvh, var(--lvw)));
  --lvmax: calc(max(1lvh, var(--lvw)));

  --dvmin: calc(min(1dvh, var(--dvw)));
  --dvmax: calc(max(1dvh, var(--dvw)));
}
/* end ++++++++++++++++ GENERAL VARIABLES */
/* begin +++++++++++++++ GRAY COLORS AND GRADIENTS */
:root {
--black:  
	rgb(0,0,7);
--white:  
	rgb(241,241,248);

/*  75% SEMI-TRANSPARENT */
--black75:  
	rgba(0,0,7, 0.75);
--white75:  
	rgba(241,241,248, 0.75);

/*  50% SEMI-TRANSPARENT */
--black50:  
	rgba(0,0,7, 0.50);
--white50:  
	rgba(241,241,248, 0.50);

/*  50% SEMI-TRANSPARENT */
--black35:  
	rgba(0,0,7, 0.35);
--white35:  
	rgba(241,241,248, 0.35);

/*  GRAYS - SOLID COLORS */
--gray1:
	rgb(21,22,30); 
--gray2:
	rgb(44,45,53);
--gray3:
	rgb(66,66,74);
--gray4:
	rgb(90,90,99);
--gray5:
	rgb(117,118,127);
--gray6:
	rgb(146,148,156);
--gray7:
	rgb(177,177,185);
--gray8:
	rgb(208,208,216);

/* begin +++++++++++++++ ACCENT COLORS - THEMES */
/*  ++++++++++ SIENNA */
--sienna1:
	rgb(45,20,7);
--sienna2:
	rgb(80,41,15);
--sienna3:
	rgb(125,61,23);
--sienna4:
	rgb(170,83,30);

/*  ++++++++++ BRONZE */
--bronze1:
	rgb(44,26,7);
--bronze2:
	rgb(82,54,16);
--bronze3:
	rgb(128,80,25);
--bronze4:
	rgb(179,113,34);

/*  ++++++++++ GOLD */
--gold1:
	rgb(41,32,7);
--gold2:
	rgb(81,64,18);
--gold3:
	rgb(129,99,27);
--gold4:
	rgb(179,140,35);

/*  ++++++++++ AVOCADO */
--avocado1:
	rgb(35,34,7);
--avocado2:
	rgb(69,69,18);
--avocado3:
	rgb(109,108,27);
--avocado4:
	rgb(154,153,37);

/*  ++++++++++ JADE  */
--jade1:
	rgb(26,35,7);
--jade2:
	rgb(50,67,21);
--jade3:
	rgb(73,102,38);
--jade4:
	rgb(101,142,55);

/*  ++++++++++ EMERALD */
--emerald1:
	rgb(6,35,6);
--emerald2:
	rgb(18,64,27);
--emerald3:
	rgb(34,95,52);
--emerald4:
	rgb(51,130,76);

/*  ++++++++++ MINT */
--mint1:
	rgb(6,36,35);
--mint2:
	rgb(11,56,62);
--mint3:
	rgb(16,77,88);
--mint4:
	rgb(20,102,120);
--mint5:
	rgb(25,125,138);
--mint6:
	rgb(28,143,155);
--mint7:
	rgb(31,161,174);
--mint8:
	rgb(34,181,192);

/*  ++++++++++ TOPAZ */
--topaz1:
	rgb(0,13,36);
--topaz2:
	rgb(7,38,68);
--topaz3:
	rgb(12,61,105);
--topaz4:
	rgb(17,86,148);
--topaz5:
	rgb(20,101,168);
--topaz6:
	rgb(23,118,190);
--topaz7:
	rgb(26,135,212);
--topaz8:
	rgb(38,152,235);

/*  ++++++++++ COBALT */
--cobalt1:
	rgb(0,5,40);
--cobalt2:
	rgb(6,21,72);
--cobalt3:
	rgb(17,36,111);
--cobalt4:
	rgb(26,52,154);
--cobalt5:
	rgb(35,67,174);
--cobalt6:
	rgb(51,83,197);
--cobalt7:
	rgb(67,103,221);
--cobalt8:
	rgb(83,124,245);

/*  ++++++++++VIOLET */
--violet1:
	rgb(13,6,44);
--violet2:
	rgb(29,14,78);
--violet3:
	rgb(44,23,119);
--violet4:
	rgb(59,33,164);
--violet5:
	rgb(74,53,192);
--violet6:
	rgb(86,67,208);
--violet7:
	rgb(102,85,221);
--violet8:
	rgb(114,104,236);

/*  ++++++++++HYDRANGEA */
--hydrangea1:
	rgb(32,6,54);
--hydrangea2:
	rgb(51,13,80);
--hydrangea3:
	rgb(67,18,111);
--hydrangea4:
	rgb(87,24,145);
--hydrangea5:
	rgb(105,47,176);
--hydrangea6:
	rgb(121,64,193);
--hydrangea7:
	rgb(137,80,211);
--hydrangea8:
	rgb(154,102,229);
/* end +++++++++++++++ ACCENT COLORS - THEMES */
}