/*  all the em measurements start from this setting
--------------------------------------------------------------------------------------- */
html { font-size: 16px; scroll-behavior: smooth;}


/*  global styles to reset default values
--------------------------------------------------------------------------------------- */
*,
*:before,
*:after { box-sizing: border-box; }

body, div, ul, li, img, video, section, figure, figcaption, main, footer, 
h1, h2, h3, p, a { margin: 0; padding: 0; border: 0; }

body { background: #E3C75F; }


/*  this sets page width: 60em = 960px,  80 = 1280px, 90 = 1440px
--------------------------------------------------------------------------------------- */
.container { max-width: 90rem; }
.container { margin: 0 auto; background: #E3C75F; }


/* example web font styles using IBM Plex Sans
--------------------------------------------------------------------------------------- */
@font-face {
	font-family: shared-space;
	src: url(fonts/SharedSpaceSans-Regular.otf);
}

@font-face {
	font-family: roboto-mono-light;
	src: url(fonts/RobotoMono-Light.ttf);
}


body		{ font-family: roboto-mono-light, Arial, sans-serif; }
p			{ font-family: roboto-mono-light, Arial, sans-serif; }




/*  HOME PAGE for MOBILE !
--------------------------------------------------------------------------------------- */
	section.six-home-page{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 1rem; 
		grid-row-gap: 5rem;
		grid-template-areas:
		"d1 d1 d1"
		".. fg .."
		
		"d2 d2 d2";
	}

	section.six-home-page							{ padding: 8rem 2rem; margin:auto;}
	section.six-home-page div:nth-of-type(1)		{ grid-area: d1; 
													  font-size: 2rem;
													  line-height:1.7em;
													  text-align: center;
													  display:block;
													  color:#eee;}
	section.six-home-page div:nth-of-type(2)		{ grid-area: d2;
													  font-size: 2rem;
													  line-height: 1.7em;
													  text-align: center; 
													  margin-top:-5rem; }
	section.six-home-page figure					{ grid-area: fg; display:none;}
	
	
/*  CONTACT for MOBILE !
--------------------------------------------------------------------------------------- */
	section.six-contact		    { padding: 6rem 1rem; }
	section.six-contact div h3  { text-align:center; margin-top: 3rem;}
	section.six-contact div p 	{ font-size: 1.5rem; text-align:center;}
	
	/*  ABOUT for MOBILE !
--------------------------------------------------------------------------------------- */
section.about		{ padding: 5.5rem 1rem; padding-bottom: 2rem;}

/*  PROJECT INFO for MOBILE !
--------------------------------------------------------------------------------------- */
section.project-info						{ padding: 0rem 1rem; padding-top: 10rem; 
												  padding-bottom: 4rem;}
	section.project-info h2						{ grid-area: hd; 
												  font-size: 4rem; 
			 									  line-height: 1.15em;
			 									  color: #25cece;
			 									  margin-bottom: .3em;
			 									  }

	section.project-info p {font-size:1.3rem;
							color: #a0a0a0;}

			  
/*  hero image
.container > figure selects all <figure> where parent is .container
--------------------------------------------------------------------------------------- */
.container > figure { margin: 0 .5rem 2rem .5rem; }


/*  main content: note padding on section
--------------------------------------------------------------------------------------- */
section { margin:0; padding: 0 .5rem 1.5rem; }


/* section div { margin-top: -0.375rem; }  /* to adjust type against images */


/*  default paragraph styling
--------------------------------------------------------------------------------------- */
p { margin: 0 0 1rem 0; max-width: 36em; max-width: 60em; } /* max-width sets line length */
p { font-size: 4rem; line-height: 1.8em; color:#000000;}
/* p { line-height: 2.0625rem; } */ 



/*  media defaults to force image & video width to parent element width
--------------------------------------------------------------------------------------- */
img		{ width: 100%; height: auto; }

video	{ width: 100%; }

.max 	{ max-width: 100%; }  /* max-width can stop img element going bigger than its actual size */

/* Highlight Colour */

::selection {
  background: #1C191A;
}

/*  link styling
--------------------------------------------------------------------------------------- */
a			{ color: #FFFFFF; text-decoration: underline; transition:  0.4s ease;}
a:visited	{ color: #FFFFFF; text-decoration: underline;}
a:hover		{ color: #1C191A; text-decoration: underline; }
a:active	{ color: #1C191A; }





.contact p 		{ font-size: 3rem; text-align: center; }


/* 
IMPORTANT: media query - switches on grid layout if page width is wider than 768px
--------------------------------------------------------------------------------------- */
@media (min-width: 768px) {


/*  IMPORTANT: min-width:60em rule will stop the container from resizing  
60rem = 960px
90rem = 1440px
--------------------------------------------------------------------------------------- */
	.container { min-width: 60rem; min-width: 0; }

	.force-height { min-height: 100vh; }


/*  top navigation grid
--------------------------------------------------------------------------------------- */	
	nav {
		display: grid;
		grid-template-columns: 1fr auto;
		padding: .5rem .5rem 1rem .5rem; 
		min-height: 2rem; 
		
		background: none;
		
		position: fixed; 
		align-items: center; 
		width: 100%;
		height: auto;
		transform: translate(-50%, -50%)
		left:50%;
		top: 4%;
	}
	h1		{ font-size: 4rem;}
	nav a	{ white-space: nowrap; }


	nav h1	{ margin-bottom: .7rem; }
	nav ul	{ list-style-type: none;}

	ul li 	{ font-size: 1.25rem; margin: 0 0 0 1.25rem; padding-right: 2rem; display: inline-block; 
			  font-family: PlexSans-Light, Arial, sans-serif;}

/*  default desktop section styles
--------------------------------------------------------------------------------------- */
	section { padding: 0 .5rem 4rem; }

	section figure { margin: 0; }

	section h3 { margin-bottom: .5em; }
	


/*  section default 12 column grid
--------------------------------------------------------------------------------------- */
	section { 
		display: grid; 
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: minmax(2.5rem, auto);
		grid-column-gap: 1.5rem;
		grid-row-gap: 0.625rem;    /*  .625% of 16 = 10, 0.625em = 10px ...  */
		grid-row-gap: 0;
		grid-template-areas:
		"hd hd hd hd hd hd hd hd hd hd hd hd"
		"fg fg fg fg fg fg dv dv dv dv dv dv";
	}

	section h3		{ grid-area: hd; }
	section figure	{ grid-area: fg; }
	section div		{ grid-area: dv; }


/*------NEW-----

	/*  six column one image one text!
--------------------------------------------------------------------------------------- */
	section.six-image-one{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 0rem; 
		grid-row-gap: 0rem;
		grid-template-areas:
		"f1 f1 f1 f1 f1 f1";
	}

	section.six-image-one 							{ padding: 2.3rem 12rem; }
	section.six-image-one figure					{ grid-area: f1; }

	/* image one text 
--------------------------------------------------------------------------------------- */
	section.text{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 1rem; 
		grid-row-gap: 1rem;
		grid-template-areas:
		"d1 d1 d1 d1 d1 d1";
	}

	section.text					    { padding: 2rem 2rem; }
	section.text div					{ grid-area: d1;text-align: left; }
	
	.textA {font-family: roboto-mono-light, Arial, sans-serif; 
			color: #FFFFFF;
			font-size: 4rem;}
	.textB {font-family: shared-space, Arial, sans-serif;  
			color: #FFFFFF;
			font-size: 5rem; }


/*  for big screens - currently just for testing
--------------------------------------------------------------------------------------- */
@media (min-width: 18000px) {
	html { font-size: 24px; }
}