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


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


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

@font-face {
	font-family: OpenSans-SemiBold;
	src: url(fonts/OpenSans-SemiBold.ttf);
	font-weight: semibold;
	font-style: normal;
}

@font-face {
	font-family: OpenSans-Light;
	src: url(fonts/OpenSans-Light.ttf);
	font-weight: light;
	font-style: normal;
}

@font-face {
	font-family: OpenSans-Light-Italic;
	src: url(fonts/OpenSans-LightItalic.ttf);
	font-weight: light;
	font-style: italic;
}


body		{ font-family: OpenSans-Light, sans-serif; }
h1			{ font-family: OpenSans-Light, sans-serif; }
h2			{ font-family: OpenSans-SemiBold, sans-serif; }
h3			{ font-family: OpenSans-Light, sans-serif; }
p			{ font-family: OpenSans-Light, sans-serif; }
figcaption	{ font-family: OpenSans-Light, sans-serif; }
li			{ font-family: OpenSans-SemiBold, sans-serif; }


/*  top navigation section
--------------------------------------------------------------------------------------- */
nav 	{
		padding: 1rem 1rem 1rem 1rem; 
		min-height: 2rem; 
		margin-bottom: 1rem;
		display: grid;
		grid-template-columns: 1fr auto;
		}
nav h1	{ font-size: 20px; margin-bottom: 1rem; }
nav a	{ white-space: nowrap; 
		}

nav ul		{ list-style-type: none; }
nav ul li	{ font-size: 24px; display: inline; margin-right: 2rem; }

nav li span { color:#e1e3d2 }

/* logo in navigation 
--------------------------------------------------------------------------------------- */

.logo {width:350px;height:70px;}

/*  main page title after top navigation
nav + h2 selects first <h2> after <nav>
--------------------------------------------------------------------------------------- */
nav {
	font-size: 20px;
	line-height: auto;
	margin: 1rem 1rem 1rem;
}

h2 {
	font-size: 20px;
	line-height: auto;
	margin: 0rem 0rem 0rem;
}

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


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

section h3, section div h3 { font-size: 20px; line-height: auto; }

section figure { margin-bottom: 1rem; }

section figcaption { font-size: 13px; color: #3f532e;}

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


/*  default paragraph styling
--------------------------------------------------------------------------------------- */
p { margin: 0 0 1rem 0; max-width: 36em; max-width: 42em; } /* max-width sets line length */
p { font-size: 18px; line-height: auto; }
/* 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 */


/*  link styling
--------------------------------------------------------------------------------------- */
a			{ color: #a8b69c; text-decoration: none; }
a:visited	{ color: #a8b69c; }
a:hover		{ color: #e1e3d2; text-decoration: none; }
a:active	{ color: #3f532e; }

nav a			{ color: #a8b69c; text-decoration: none; }
nav a:visited	{ color: #a8b69c; }
nav a:hover		{ color: #e1e3d2; text-decoration: none; }
nav a:active	{ color: #3f532e; }

.contact p { font-size: 20px; text-align: left;}
.contact h3 { font-size: 24px; color: #3f532e; text-align: left; margin: 0rem 0rem 2rem;}

footer { color: #a8b69c; text-align: center; margin: 3rem 3rem 3rem; }


/*  custom section for SCROLL TO TOP
--------------------------------------------------------------------------------------- */
.scrolltop {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"sc";
	}

div.scrolltop			{ grid-area: sc; font-size: 24px; 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: 60rem; }

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

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

	nav h1	{ font-size: 20px; margin-bottom: 1rem; margin-top: 1rem; }

	nav ul { margin: 1rem; }
	nav ul li { font-size: 20px; margin: 2rem; }


/*  main page title after top navigation
--------------------------------------------------------------------------------------- */
	.container > h2 { 
		font-size: 40px;
		line-height: 1.15em;
		margin: 10rem 20rem 10rem;
		text-align: center;
		color: #3f532e
	}


/*  play page title after top navigation
--------------------------------------------------------------------------------------- */
	.container > h3 { 
		font-size: 20px;
		line-height: 1.15em;
		margin: 4rem 20rem -1rem;
		text-align: center;
		color: #3f532e
	}

h3 span {font-family: OpenSans, sans-serif; }

/*  about & contact page sub-title after top navigation
--------------------------------------------------------------------------------------- */
	.container > h1 { 
		font-size: 20px;
		line-height: 1.15em;
		margin: 18rem 25rem -2rem;
		text-align: center;
		color: #3f532e
	}

/*  hero image
--------------------------------------------------------------------------------------- */
	h2 + figure { margin: 0; padding-bottom: 3rem; }
	h2 + figure img { display: block; }

figure.hero {margin-top: 0rem; margin-right: 0rem; margin-left: 0rem;}

/*  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: 1rem;
		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 dv dv dv dv dv dv dv dv";
	}

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




/*  custom section for about page
--------------------------------------------------------------------------------------- */
	section.about {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"fg fg fg fg fg .. dv dv dv dv dv dv"
	"d1 d1 d1 d2 d2 .. dv dv dv dv dv dv"
	"d3 d3 d4 d4 d4 .. dv dv dv dv dv dv"
	".. .. .. d5 d5 .. dv dv dv dv dv dv";
	}

section.about { padding: 8rem 8rem;}

}

.about figure		{ grid-area: fg; }
.about div p		{ grid-area: dv; font-size: 20px; }
.about div.one		{ grid-area: d1; color: #f7f6f0; }
.about div.two		{ grid-area: d2; color: #f7f6f0; }
.about div.three	{ grid-area: d3; color: #f7f6f0; }
.about div.four		{ grid-area: d4; color: #f7f6f0; }
.about div.five		{ grid-area: d5; color: #f7f6f0; }

.about div.one {
  background-color: #a8b69c;
  padding: 0rem;
  margin:0;
  text-align: center;
  align-content: center;
  border-radius:50px;
}

.about div.two {
  background-color: #a8b69c;
  padding: 0rem;
  margin:0;
  text-align: center;
  align-content: center;
  border-radius:50px;
}

.about div.three {
  background-color: #a8b69c;
  padding: 0rem;
  margin:0;
  text-align: center;
  align-content: center;
  border-radius:50px;
}

.about div.four {
  background-color: #a8b69c;
  padding: 0rem;
  margin:0;
  text-align: center;
  align-content: center;
  border-radius:50px;
}

.about div.five {
  background-color: #a8b69c;
  padding: 0rem;
  margin:0;
  text-align: center;
  align-content: center;
  border-radius:50px;
}

/*  custom section for about page - adobe software skills
--------------------------------------------------------------------------------------- */
	section.software {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	".. .. .. f1 f2 f3 f4 f5 f6 .. .. ..";
	}

section.software { padding: 8rem 8rem; }

.software figure.one	{ grid-area: f1; }
.software figure.two	{ grid-area: f2; }
.software figure.three	{ grid-area: f3; }
.software figure.four	{ grid-area: f4; }
.software figure.five	{ grid-area: f5; }
.software figure.six	{ grid-area: f6; }


/*  custom section for contact page
--------------------------------------------------------------------------------------- */
	section.contact {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"dv dv dv dv dv .. .. f1 .. f2 .. f3";
	}

section.contact { padding: 8rem 8rem;}

	a img.social 			{ color: #f39586; }
	a img.social:visited	{ color: #f39586; }
	a img.social:hover		{ transition: 0.2s; opacity: 0.25; }
	

.contact figure.one   { grid-area: f1; align-content: center;}
.contact figure.two   { grid-area: f2; align-content: center;}
.contact figure.three { grid-area: f3; align-content: center;}

/*  section.video grid
--------------------------------------------------------------------------------------- */	
	section.video  {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto;
		grid-column-gap: 0.5rem;
		grid-row-gap: 0;
		background: transparent;
		grid-template-areas:
		"v1 v1 v1 v1"
		"t2 t2 t2 t2";
	}

	section.video figure	{ grid-area: v1; }
	section.video div		{ grid-area: t2; }

	section.video figure	{ padding:0; }
	section.video div		{ background: transparent; }
	section.video p			{ max-width: 32rem; color: #777; }
	section.video h3		{ padding-top: 1rem; }


/*  home page auto grid
--------------------------------------------------------------------------------------- */		
section.home {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	grid-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"h1 h1 h1 h1 h1 h1 h2 h2 h2 h2 h2 h2" 
	"h4 h4 h4 h4 h4 h4 h3 h3 h3 h3 h3 h3";
}

img {
	border-radius:15px;
	}
	
.shadow {
  box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 0.2);
}


section.home { padding: 8rem 8rem; }

section.home figure.one   { grid-area: h1; }
section.home figure.two   { grid-area: h2; }
section.home figure.three { grid-area: h3; }
section.home figure.four  { grid-area: h4; }

	
	.home figure img { filter: opacity(100); }
	.home figure:hover img { filter: opacity(0.3); }
	
	.home figure h2 {filter: opacity(0);}
	.home figure:hover h2 {filter: opacity(100); }
	
	.home figure figcaption { position: absolute; text-align: center;}
	
	.home figure h2 { margin: -12rem 0rem 0rem 1rem; font-size: 30px; }
	
	.home figure a { text-decoration: none; }
	
.box 
	
span.span1 a			{ color: #f7f6f0; text-decoration: none; }
span.span1 a:visited	{  color: #f7f6f0; text-decoration: none;}
span.span1 a:hover		{ color: #f7f6f0; text-decoration: none; }
span.span1 a:active	    { color: #f7f6f0; text-decoration: none;}

span.span2 a			{ color: #f7f6f0; text-decoration: none; }
span.span2 a:visited	{  color: #f7f6f0; }
span.span2 a:hover		{ color: #f7f6f0; text-decoration: none; }
span.span2 a:active		{ color: #f7f6f0; }


/*  projects page auto grid
--------------------------------------------------------------------------------------- */		
section.projects {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"f1 f1 f1 f1 f1 f1 f2 f2 f2 f2 f2 f2" 
	"f3 f3 f3 f3 f4 f4 f4 f4 f5 f5 f5 f5"
	"f14 f14 f14 f14 f14 f14 f6 f6 f6 f6 f6 f6"
	"f7 f7 f7 f7 f7 f7 f8 f8 f8 f8 f8 f8"
	"f9 f9 f9 f9 f11 f11 f11 f11 f12 f12 f12 f12"
	"f10 f10 f10 f10 f10 f10 f13 f13 f13 f13 f13 f13";

}

img {
	border-radius:15px;
	}

.shadow {
  box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 0.2);
}

section.projects { padding: 8rem 8rem; }

.projects figure.one   { grid-area: f1; }
.projects figure.two   { grid-area: f2; }
.projects figure.three { grid-area: f3; }
.projects figure.four  { grid-area: f4; }
.projects figure.five  { grid-area: f5; }
.projects figure.six	{ grid-area: f6; }
.projects figure.seven  { grid-area: f7; }
.projects figure.eight  { grid-area: f8; }
.projects figure.nine  { grid-area: f9; }
.projects figure.ten  { grid-area: f10; }
.projects figure.eleven  { grid-area: f11; }
.projects figure.twelve  { grid-area: f12; }
.projects figure.thirteen  { grid-area: f13; }
.projects figure.fourteen  { grid-area: f14; }


/*  project page reflection section
--------------------------------------------------------------------------------------- */		
section.reflection {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 1.5rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"rh rh"
	"d1 d2";
}

section.reflection h3		{ grid-area: rh; }
section.reflection div		{ grid-area: d1; }
section.reflection div.two	{ grid-area: d2; }

section.reflection div p a { display: block; }


} /* end 768px media query */


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