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


/*  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: #FFFFFF; }


/*  this sets page width: 80em = 1280px  
--------------------------------------------------------------------------------------- */
.container { max-width: 60em; max-width: 80em; }
.container { margin: 0 auto; background: #FFFFFF; }


/* example web font styles using IBM Plex Sans
--------------------------------------------------------------------------------------- */
 @font-face {
    font-family: Syne_Mono;
    src: url(./fonts/Syne_Mono/SyneMono-Regular.ttf);
    font-weight: normal;}

@font-face {
    font-family: IBM-Plex-Sans;
    src: url(./fonts/IBMPlexSans-Regular.woff2);
    font-weight: normal;
}

@font-face {
    font-family: IBM-Plex-Sans;
    src: url(./fonts/IBMPlexSans-Bold.woff2);
    font-weight: bold;}

@font-face {
    font-family: IBM-Plex-Mono;
    src: url(./fonts/IBMPlexMono-Medium.woff2);
    font-weight: medium;}
/* 
@font-face {
    font-family: Fira_Sans;
    src: url(./font/Fira_Sans/FiraSans-Bold.ttf)
    font-weight: bold;}
@font-face {
    font-family: Fira_Sans;
    src: url(./fonts/Fira_Sans/FiraSans-Medium.ttf);
    font-weight: normal; }

@font-face {
    font-family: Fira_Sans;
    src: url(./fonts/Fira_Sans/FiraSans-ExtraLight.ttf);
    font-weight: light;}
 */



body		{ font-family: Syne_Mono; }
h1          { font-family: Syne_Mono; }
h2          { font-family: IBM-Plex-Sans, Helvetica;
              font-size: 30px;
              font-weight: bold; 
              color: #654321;}
h3          { font-family: IBM-Plex-Sans, Helvetica; 
              font-size: 12px;
              padding-bottom 8px;
              font-weight: bold; 
              color: #654321;}
h4          { font-family: Syne_Mono;
              color: #654321; }              
p			{ font-family: IBM-Plex-Sans, Helvetica;
              color: #212121; }
figcaption	{ font-family: Syne_Mono;
              font-size: 12px; }
              color: #FF7e2e;


/*  top navigation section  
--------------------------------------------------------------------------------------- */

nav 	{ padding: .5rem 1rem 2rem 1rem;  min-height: 2rem; 
			border-bottom: 2px #FFFFFF solid;
}
nav h1	{ font-size: 1.5em; margin-bottom: .5em; }
nav a	{ white-space: nowrap; }

nav ul		{ list-style-type: none; }
nav ul li	{ display: inline; margin-right: .5rem; }


/*  nav position fixed  
--------------------------------------------------------------------------------------- */

.container { padding-top: 6rem; }

nav { 	position: fixed;
		width: 100%;
		padding: .5rem 1rem 1rem 1rem;
		border-bottom: none;
		background: #FFFFFF;
		z-index: 100;
}



/*  hero image
--------------------------------------------------------------------------------------- */
.container > figure { margin: 0 .5rem 2rem .5rem; }



/*  main page title after top navigation
--------------------------------------------------------------------------------------- */
.container > h2 		{ line-height: 1.15rem; font-size: 1.8rem; margin: 0 .5rem 1rem; }
.container figure h2	{ line-height: 1.15rem; font-size: 1.8rem; }



/*  main content after hero image / main title
--------------------------------------------------------------------------------------- */
section { margin:0; padding: 0 .5rem 1.5rem; }

section h3 { font-size: 1.25em; line-height: 1.5em; }

section figure { margin-bottom: 1rem; }

section figcaption { font-size:.75em; }

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

	/*  section.video grid
--------------------------------------------------------------------------------------- */	
	section.video  { 
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto;
		grid-column-gap: 0.5rem;   /*  .625% of 16 = 10, 0.625em = 10px ...  */
		grid-row-gap: 0;
		background:transparent;
		grid-template-areas:
		"v1 v1 v1 v1"
		"t2 t2 t2 t2";
	}
	
/*  mapping section video grid template areas to section elements
--------------------------------------------------------------------------------------- */	
	section.video figure	{ grid-area: v1; }
	section.video div		{ grid-area: t2; }

	xsection.video			{ padding: 0 0.625rem; }	/*  adds inner margin to section  */
	xsection.video			{ padding: 0; }			/*  removes inner margin to section  */
	section.video figure	{ padding:0; }
	section.video div		{ background:#ff0; background:transparent; }
	section.video p			{ max-width:32rem; color: #777; }
	
	section.video h3		{ padding-top:1rem; }


/*  media defaults to force image & video width to parent element width
--------------------------------------------------------------------------------------- */
img		{ width: 100%; height: auto; } /* max-width stops img element going bigger than its actual size */

video	{ width: 100%; }

.max 	{ max-width: 100%; }



/* overlay */

.image-overlay { position: absolute;
                 top: 0;
                 left: 0;
                 width: 100%; 
                 height: 100%;
                 background: #654321;
                 opacity: 0.6;
                 color: #FFFFFF; }





/*  default paragraph styling
--------------------------------------------------------------------------------------- */
p { margin: 0 0 1rem 0; line-height: 1.375em; max-width: 36em; font-size: 1em; } /* max-width sets line length */


/*  footer section
--------------------------------------------------------------------------------------- */
footer { font-size:.8em; padding: 1rem .25rem; border-top: 2px #efefef solid; }

footer ul { list-style-type: none; }
footer li { list-style-type: none; margin:0 0 .5rem 0;  }

footer h3 { margin:0 0 1em 0; font-size: 1em; }



/*  link styling
--------------------------------------------------------------------------------------- */
nav a			{ color: #654321; text-decoration: none; }
nav a:visited	{ color:#654321; color: #654321; }
nav a:hover		{ color:#FF7e2e; /* text-decoration: underline */; }
nav a:active	{ color:#654321; }

a			{ color: #654321; text-decoration: none; }
a:visited	{ color:#654321; color: #654321; }
a:hover		{ color:#ff7e2e; /* text-decoration: underline */; }
a:active	{ color:#654321; }

footer a			{ color: #654321; text-decoration: none; }
footer a:visited	{ color:#654321; color: #654321; }
footer a:hover		{ color:#FF7e2e; /* text-decoration: underline */; }
footer a:active	{ color:#654321; }

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


/*  IMPORTANT: min-width:80em rule will stop the container from resizing  
--------------------------------------------------------------------------------------- */
	.container { min-width: 60rem; min-width: 80rem; min-width: 0; min-height: 100vh; }


/*  position fixed
--------------------------------------------------------------------------------------- */	
    .container { padding-top: 5.25rem; }


/*  top navigation grid
--------------------------------------------------------------------------------------- */	
	nav { 	
		display: grid; 
		grid-template-columns: 1fr auto;
		background: transparent;
		border-bottom: 0 #FFFFFF none; border-bottom: none;
	}

	nav ul { margin-top: .48rem; margin-top: .4rem; }

	
/*  main page title after top navigation
--------------------------------------------------------------------------------------- */
	.container > h2 { line-height: 1.15em; font-size: 1.8em; margin: 0 auto 1em; text-align: center; }



/*  hero image
--------------------------------------------------------------------------------------- */
	x.container > figure { margin: 0 0 2rem 0; }
	
	div > h2 + figure { margin: 0 0 2rem 0; }

	

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



/*  4 column grid
--------------------------------------------------------------------------------------- */

	section.four {
		grid-template-columns: 1fr 1fr 1fr 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:
		"fa fb hd hd"
		"fa fb dv dv";
	}
	
	section.four h3			{ grid-area: hd; }
	section.four figure.a	{ grid-area: fa; }
	section.four figure.b	{ grid-area: fb; }
	section.four div		{ grid-area: dv; }

	
		
		
/*  3 column grid
--------------------------------------------------------------------------------------- */

	section {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 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"
		"dv dv dv";
	}
	
	.left { 
	grid-template-columns: minmax(240px, 1fr) 1fr 1fr;
	grid-template-rows: minmax(2rem, auto ) auto;
	grid-template-areas:
	"fg hd hd"
	"fg dv dv"; 
	 }
	
	.right {  
	grid-template-columns: 1fr auto minmax(240px, 1fr);
	grid-template-columns: 2fr minmax(240px, 1fr);
	grid-template-rows: minmax(2rem, auto ) auto;
	grid-template-areas:
	"hd fg"
	"dv fg";  
	}
		
	.left2 { 
	grid-template-columns: minmax(240px, 1fr) 1fr 1fr;
	grid-template-rows: minmax(2rem, auto ) auto;
	grid-template-areas:
	"fg hd hd"
	"fg dv dv"
	"fg dv dv"
	"fg dv dv"
	"fg dv dv"; 
	 }


	.projects {
		grid-template-areas: none;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); /*  rem value x 16 = pixel value */
		grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
		grid-gap: .2rem;
		grid-row-gap: 0;
	}
	.projects figure { grid-area: auto; }

	
	.right div, .right h3, .right figure { }
	
	.right h3 { margin-top:-.5rem; }
	
	section { padding: 0 2rem 2rem; padding: 0 .5rem 2rem; }
	
	section figure { margin: .9em; }
	
	section h3,
	.left h3, 
	.right h3 { margin-bottom: .9em; }
	
.about h4{ color: #654321; }
	
/*  default section template areas
--------------------------------------------------------------------------------------- */
	section h3		{ grid-area: hd; }
	section figure	{ grid-area: fg;  }
	section div		{ grid-area: dv; }

/* interactive buttons*/

/* 
buttons {
    background-color: #FFFFFF;
    height: 150px;
    width: 100%;}

.button-textleft{display: left;}

.button-textright {text-align: right;}

.button-text {
    height: 100%;
    padding: 20px;
    max-width: 75em;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-family: Syne_Mono;
    font-weight: normal ;
    font-size: 14px;


.button-text li {
    padding: 0.13em;
}


.button-text { grid-gap: 20px; grid-template-columns: 1fr 1fr 1fr;}
            



 */


/*  footer grid  
--------------------------------------------------------------------------------------- */	
	/* 
footer { 	
		display: grid; 
		grid-template-columns: 1fr auto;
		grid-template-rows: repeat(minmax(3rem, auto));
		grid-gap: 0;
		background: #FFFFFF; color: #654321;
		border-top: 0 #FFFFFF none;
		margin-top: 4rem;
		padding-top: 1rem;
		padding-left: 1rem;
	}

	footer h3			{ margin: 0; }
	footer ul 			{ padding-right: 1rem; }
	footer li 			{ display: inline; 
	                      margin-left: .5rem; }
	footer li a 		{ background: #FFFFFF; 
	                      padding: .25em .25em; 
	                      border-radius: .25em; f
	                      font-weight: normal; }
	footer li a:hover	{ background: #ff7e2e; }
 */
	
footer {
    background-color: #FFFFFF;
    height: 150px;
    width: 100%;}

.footer-links-nav {display: left;}

.footer-links-contact {text-align: right;}

.footer-text {
    height: 100%;
    padding: 20px;
    max-width: 75em;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-family: Syne_Mono;
    font-weight: normal ;
    font-size: 14px;


.footer-text li {
    padding: 0.13em;
}

/* footer grid*/
.footer-text { grid-gap: 20px; grid-template-columns: 1fr 1fr 1fr;}
            
.footer-links-social {display: block;}

	
} /* end 550px media query */


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