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


/*  global styles to reset default values (bakground box line 15)
--------------------------------------------------------------------------------------- */
*,
*: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: #fff; }


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


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

@font-face {
	font-family: 'Poppins';
	src: url('fonts/Poppins/Poppins-Medium.ttf') format('truetype');
	font-weight: 500; 
	font-style: normal;
}

@font-face {
	font-family: 'Poppins';
	src: url('fonts/Poppins/Poppins-Italic.ttf') format('truetype'); 
	font-weight: normal;
	font-style: italic;
}


body {
	font-family: 'Poppins', Arial, sans-serif;
	padding-top: 8rem;
}

h1, h2 {
	font-family: 'Poppins', Arial, sans-serif;
	font-weight: 500;
}
h3 {
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 300;
}
h4 {
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 600;
}
h5 {
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 100;
}
h6 {
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 400;
}
p {
	font-family: 'Poppins', Arial, sans-serif;
}

figcaption {
	font-family: 'Poppins', Arial, sans-serif;
	font-style: italic;
}



/*  top navigation section
--------------------------------------------------------------------------------------- */
nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000; 
	background-color: #fff; 	
	padding: 2rem 1rem 1rem 1rem;
	border-bottom: 1rem #fff solid;
	min-height: 9rem;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	
}

	nav h1 {
		display: inline;
		margin-left: 2rem;
		font-size: 1.2em;
		text-indent: 4px;
		
	}

	nav a {
		white-space: nowrap;
	}

	nav ul {
		list-style-type: none;
	}

		nav ul li {
			display: inline;
			margin-right: 2rem;
			font-size: 1.2em;
			font-family: Poppins-Medium, Helvetica, Arial, sans-serif;
		}

	nav li span {
		color: #fff;
	}

/*  main page title after top navigation
nav + h2 selects first <h2> after <nav>
--------------------------------------------------------------------------------------- */
nav + h2 {
	font-size: 4rem;
	line-height: 2.15rem;
	margin: 1rem .5rem 3rem;
}

/*  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 h3, section div h3 { font-size: 1.5rem; line-height: 2.2rem; }

h4 {font-size: 5.5rem; line-height: 7rem;}

section figure { margin-bottom: 1rem; }

section figcaption { font-size: 1rem; margin-top: 1rem; }

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


/*  default paragraph styling
--------------------------------------------------------------------------------------- */
p {
	margin: 0 0 1rem 0;
	max-width: 36em;
	max-width: 42em;
	font-size: 1.5rem;
	line-height: 1.375em;
	overflow-wrap: break-word;
}

/* LEFT */
	p.left {
		margin: 0 0 1rem 0;
		max-width: 36em;
		max-width: 42em;
		font-size: 1.35rem;
		line-height: 1.325em;
		text-align: left;
		letter-spacing: 0.12rem;
		overflow-wrap: break-word;
	}

/* RIGHT */
	p.right {
		margin: 0 0 1rem 0;
		max-width: 36em;
		max-width: 42em;
		font-size: 1.5rem;
		line-height: 1.375em;
		text-align: right;
		padding: 20rem;
		overflow-wrap: break-word;
	}

/* CENTERED */
p.center {text-align: center;}


/*  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 images going bigger than their actual size */


/*  link styling
--------------------------------------------------------------------------------------- */
a			{ color: #000; text-decoration: none; }
a:visited	{ color: #000; }
a:hover		{ color: #9aa4e4; text-decoration: none; }
a:active	{ color: #000; }

nav a			{ color: #000; text-decoration: none; }
nav a:visited	{ color: #000; }
nav a:hover		{ color: #9aa4e4; text-decoration: none; }
nav a:active	{ color: #000; }

.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; }

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


/*  top navigation grid
--------------------------------------------------------------------------------------- */
	nav {
		padding: 0; 
		margin: 0; 
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		justify-content: space-between;
	}

		nav ul {
			margin: 0; 
			padding: 0; 
			list-style-type: none;
			display: flex;
		}

			nav ul li {
				margin-right: 1.5rem; 
			}

		nav h1 {
			margin: 0; 
			padding: 0; 
			align-items: center;
			justify-content: space-between;
		}

/*  main page title after top navigation
--------------------------------------------------------------------------------------- */
	.container > h2 { 
		font-size: 1.15rem;
		line-height: 1.15em;
		margin: 3rem auto 4rem;
		text-align: right;
		color:#fff;
	}


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


/*  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: 0rem;
		grid-row-gap: 0rem;    /*  .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; }


        /*  simple 3 column grid hd = text, fg = figure, dv = div
--------------------------------------------------------------------------------------- */
		section.storyboard {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-template-rows: auto;
			grid-column-gap: 0rem;
			grid-row-gap: 0rem;
			grid-template-areas:
				"fg fg fg fg"
				"fg fg fg fg"
				"dv dv dv dv";
		}
			section.storyboard figure {grid-area: fg;}
            section.storyboard div {
                grid-area: dv;
            }


		section.finalreflection {
			display: grid;
			grid-template-columns: 20rem 20rem 20rem 20rem;
			grid-template-rows: 2.5rem;
			grid-column-gap: 0rem;
			grid-row-gap: 1rem;
			grid-template-areas:
				"hd hd hd"
				"dl dl dl"
				"dr dr dr"
				"df df df";
		}

			section.finalreflection h4 {
				grid-area: hd;
			}

			section.finalreflection div.left {
				grid-area: dl;
			}

			section.finalreflection div.right {
				grid-area: dr;
			}

			section.finalreflection div.final {
				grid-area: df;
			}

			section.contribution{
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr;
				grid-template-rows: 2.5rem;
				grid-column-gap: 0rem;
				grid-row-gap: 1rem;
				grid-template-areas:
					"hd hd hd"
					"dl dl dl"
					"dr dr dr"
					"df df df";
			}
				section.contribution h3 {
					grid-area: hd;
				}
				section.contribution div.left {
					grid-area: dl;
				}
				section.contribution div.right {
					grid-area: dr;
				}
				section.contribution div.final {
					grid-area: df;
			}

        section.chanimate {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: auto;
            grid-column-gap: 0rem;
            grid-row-gap: 0rem;
            grid-template-areas:
                "f1 f2 f3"
                "f4 f5 f6"
                "dv dv dv";
        }

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

            section.chanimate div {
                grid-area: dv;
            }

        section.characteranimate {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: auto;
            grid-column-gap: 0rem;
            grid-row-gap: 0rem;
            grid-template-areas:
                "f1 f2 f3"
                "dv dv dv";
        }

		section.characteranimate figure.one {
			grid-area: f1;
		}

		section.characteranimate figure.two {
				grid-area: f2;
			}

			section.characteranimate figure.three {
				grid-area: f3;
			}
				section .characteranimate div {
                grid-area: dv;
            }

		section.usertest {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: auto;
			grid-column-gap: 0rem;
			grid-row-gap: 0rem;
			grid-template-areas:
				"f1 f2"
				"dv dv";
		}

			section.usertest figure.one {
				grid-area: f1;
			}

			section.usertest figure.two {
				grid-area: f2;
			}
			section .usertest div {
				grid-area: dv;
			}
		
		
		
		section.three {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 2rem auto;
		grid-column-gap: 0rem;
		grid-row-gap: .0rem;
		grid-template-areas:
		"fg hd hd"
		"fg dv dv"

	}

	section.three h3		{ grid-area: hd; }
	section.three figure	{ grid-area: fg; }
	section.three div		{ grid-area: dv; }
	
	section.three h3		{ margin-top: -0.6rem; }
	section.three div		{ margin-top: 0; }


/*  3 column grid with right hand image end of section. that is put in your html to be used on that specified section
--------------------------------------------------------------------------------------- */	
	section.right {
		display: grid;
		grid-template-columns: 1fr 1fr minmax(20rem, 1fr);
		grid-template-rows: minmax(2rem, auto) auto;
		grid-column-gap: 0rem; grid-column-gap: 0rem;
		grid-row-gap: 0;
		grid-template-areas:
		"hd hd fg"
		"dv dv fg";
	}
	
	section.right h3		{ grid-area: hd; }
	section.right figure	{ grid-area: fg; }
	section.right div		{ grid-area: dv; }

	section.right h3		{ margin-top: 0; }
	section.right div		{ margin-top: 0; }

		section.righttwo {
		display: grid;
		grid-template-columns: 1fr 1fr minmax(20rem, 1fr);
		grid-template-rows: minmax(2rem, auto) auto;
		grid-column-gap: 0rem; grid-column-gap: 0rem;
		grid-row-gap: 0;
		grid-template-areas:
		"hd hd hd"
		"hd hd hd";
	}
	
	section.righttwo h3		{ grid-area: hd; }
	section.righttwo figure	{ grid-area: fg; }
	section.righttwo div		{ grid-area: dv; }

	section.righttwo h3		{ margin-top: 0; }
	section.righttwo div		{ margin-top: 0; }

		section.rightthree {
			display: grid;
			grid-template-columns: 1fr 1fr minmax(20rem, 1fr);
			grid-template-rows: minmax(2rem, auto) auto;
			grid-column-gap: 0rem;
			grid-column-gap: 0rem;
			grid-row-gap: 0;
			grid-template-areas:
				"dv dv fg"
				"dv dv fg";
		}

			section.rightthree h3 {
				grid-area: hd;
			}

			section.rightthree figure {
				grid-area: fg;
			}

			section.rightthree div {
				grid-area: dv;
			}

			section.rightthree h3 {
				margin-top: 0;
			}

			section.rightthree div {
				margin-top: 0;
			}


/*  wide right hand image spanning two columns
--------------------------------------------------------------------------------------- */
	section.wide {
		display: grid;
		grid-template-columns: minmax(10rem, 1fr) 1fr 1fr;
		grid-template-rows: minmax(2.5rem, auto);
		grid-column-gap: 0rem;
		grid-row-gap: 0;
		grid-template-areas:
		"hd fg fg"
		"dv fg fg";
	}
	
	section.wide h3		{ grid-area: hd; }
	section.wide figure	{ grid-area: fg; }
	section.wide div	{ grid-area: dv; }

		section.wideleft {
			display: grid;
			grid-template-columns: minmax(10rem, 1fr) 1fr 1fr;
			grid-template-rows: minmax(2.5rem, auto);
			grid-column-gap: 0rem;
			grid-row-gap: 0;
			grid-template-areas:
				"fg fg hd"
				"fg fg dv";
		}

			section.wideleft h3 {
				grid-area: hd;
			}

			section.wideleft figure {
				grid-area: fg;
			}

			section.wide divleft {
				grid-area: dv;
			}




/*  intro
--------------------------------------------------------------------------------------- */
	section.intro {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 0rem;  
		grid-row-gap: 0;
		grid-template-areas:
		"dv dv dv";
	}

	section.intro h3	{ grid-area: hd; }
	section.intro div	{ grid-area: dv; }

	section.intro div h3,
	section.intro div p	{ font-size: 2rem; }

	section.intro		{ margin-bottom: 4rem; }

		section.introduction {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: auto;
			grid-column-gap: 0rem;
			grid-row-gap: 0;
			grid-template-areas:
				"hd hd hd"
				"dv dv dv";
		}
         section.introduction h4 {grid-area: hd;}
            section.introduction p.left {
                grid-area: dv;
            }
		section.colour {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: auto;
			grid-column-gap: 0rem;
			grid-row-gap: 0;
			grid-template-areas:
				"hd hd hd"
				"fg fg fg"
				"dv dv dv";
		}

			section.colour h4 {
				grid-area: hd;
			}

			section.colour p.left {
				grid-area: dv;
			}
            section.colour figure {
                grid-area: fg;
            }
           

/*  images-two
--------------------------------------------------------------------------------------- */
	section.images-two {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 0; 
		grid-row-gap: 1rem;
		grid-template-areas:
		"hd hd hd"
		"f1 f1 f1"
		"dv dv dv";
	}

	section.images-two h3				{ grid-area: hd; }
	section.images-two figure.oneone	{ grid-area: f1; }
	section.images-two figure.twotwo	{ grid-area: f2; }
	section.images-two div 				{ grid-area: dv; }

	section.images-two div p            { font-size: 1.5rem; }



			


		section.images-t {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: auto;
			grid-column-gap: 0;
			grid-row-gap: 1rem;
			grid-template-areas:
				"f1 f2"
				"hd hd"
				"f3 f3"
				"dv dv";
		}

	section.images-t h3 {
				grid-area: hd;
			}

			section.images-t figure.one {
				grid-area: f1;
			}
			section.images-t figure.three {
				grid-area: f3;
			}

				section.images-t figure.two {
					grid-area: f2;
				}

			section.images-t div {
				grid-area: dv;
			}

				section.images-t div h3,
				section.images-t div p {
					font-size: 1.5rem;
				}

		section.images-third {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: auto;
			grid-column-gap: 0;
			grid-row-gap: 1rem;
			grid-template-areas:
				"f1 f1"
				"f2 f3"
				"dv dv"
				"hd hd";
		}

			section.images-third h3 {
				grid-area: hd;
			}

			section.images-third figure.first {
				grid-area: f1;
			}

			section.images-third figure.second {
				grid-area: f2;
			}

			section.images-third figure.third {
				grid-area: f3;
			}

			section.images-third div {
				grid-area: dv;
			}

				section.images-third div h3,
				section.images-third div p {
					font-size: 1.5rem;
				}





/*  images-three
--------------------------------------------------------------------------------------- */
	section.images-three {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 0rem; 
		grid-row-gap: 0rem;
		grid-template-areas:
		"f1 f2 f3"
		"hd hd hd"
		"dv dv dv";
	}

	section.images-three h3						{grid-area: hd;}
	section.images-three figure.one             {grid-area: f1;}
	section.images-three figure.two            {grid-area: f2;}
	section.images-three figure.three          {grid-area: f3;}
	section.images-three div					{grid-area: dv;}

	section.images-three div h3,
	section.images-three div p { font-size: 1.5rem; }


        /*  images-three-plus f1=images d1=text
--------------------------------------------------------------------------------------- */
	section.images-three-plus {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 0rem; 
		grid-row-gap: 0rem;
		grid-template-areas:
		"f1 f2 f3"
		"d1 d2 d3";
	}

	section.images-three-plus figure				{ grid-area: f1; }
	section.images-three-plus figure:nth-of-type(2)	{ grid-area: f2; }
	section.images-three-plus figure:nth-of-type(3)	{ grid-area: f3; }
	section.images-three-plus div					{ grid-area: d1; }
	section.images-three-plus div:nth-of-type(2)	{ grid-area: d2; }
	section.images-three-plus div:nth-of-type(3)	{ grid-area: d3; }

	section.images-three-plus		{ padding: 0 0 2rem; }

	section.images-three-plus div h3,
	section.images-three-plus div p { font-size: 1.5rem; }


/* full width - note grid on figure not section
--------------------------------------------------------------------------------------- */
	section.full { display: block; padding: 1rem 0 0; }

	section.full figure {
		grid-area: auto;
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 0;
		grid-template-areas:
		"f1"
		"im";
	}

	section.full figure img			{ grid-area: im; }
	section.full figure figcaption	{ grid-area: f1; justify-self: center; }

	section.full					{ margin-bottom: 4rem; }
	section.full figure img			{ display: block; }
	section.full figcaption h3		{ font-size: 3rem; }


/* two columns
--------------------------------------------------------------------------------------- */
	section.two {
		display: grid;
		grid-template-columns: 2fr 3fr;
		grid-template-rows: minmax(2.5rem, auto);
		grid-column-gap: 0rem;
		grid-row-gap: 0;
		grid-template-areas:
		"fg hd"
		"fg dv";
	}


/* two columns right image
--------------------------------------------------------------------------------------- */
	section.two-right {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: minmax(2.5rem, auto);
		grid-column-gap: 0rem;
		grid-row-gap: 0;
		grid-template-areas:
		"hd fg"
		"dv fg";
	}
        section.two-right h3 {
            grid-area: hd;
        }
        section.two-right figure {
            grid-area: fg;
        }
        section.two-right div {
            grid-area: dv;
        }


/* pull quote
--------------------------------------------------------------------------------------- */
	section.pull {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-column-gap: 0;
		grid-row-gap: 0;
		grid-template-areas:
		"dv";
	}

	section.pull { margin-bottom: 4rem; }

	.pull p { font-size: 2rem; }


/* out of background
--------------------------------------------------------------------------------------- */
	section.colourbox {
		padding: 3rem;
		margin-bottom: 4rem;
	}

	.orange {
		background:#fff;
	}


/*  custom section for about page
--------------------------------------------------------------------------------------- */
	section.about {
	display: grid;
	grid-template-columns: minmax(24rem, 5fr) 4fr 3fr;
	grid-template-rows: auto;
	grid-column-gap: 2rem;
	grid-row-gap: 0rem;
	grid-template-areas:
	"fg d1 d1"
	"fg d1 d1";
	}
        section.about figure {
            grid-area: fg;
        }
        section.about div.one {
            grid-area: d1;
        }
		section.about p {
			font-size: 1rem;
			line-height: 1.2em;			
			color: #000;
			letter-spacing: 1px;
		}


/*  section.video grid
--------------------------------------------------------------------------------------- */	
	section.video  {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto;
		grid-column-gap: 0rem;
		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: #fff; }
	section.video h3		{ padding-top: 1rem; }

	section.videoside {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto auto;
		grid-column-gap: 1rem; /* Adjust gap as needed */
		grid-row-gap: 1rem; /* Adjust gap as needed */
		background: transparent;
		grid-template-areas:
			"v1 v2"
			"t1 t2";
	}

		section.videoside figure.one {
			grid-area: v1;
		}

		section.videoside figure.two {
			grid-area: v2;
		}

		section.videoside div.one {
			grid-area: t1;
		}

		section.videoside div.two {
			grid-area: t2;
		}

		section.videoside figure {
			padding: 0;
		}

		section.videoside div {
			background: transparent;
		}

		section.videoside p {
			max-width: 32rem;
			color: #fff;
		}

		section.videoside h3 {
			padding-top: 1rem;
		}
			/*  home page auto grid when name is clicked on webpage 
--------------------------------------------------------------------------------------- */
    section.home {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 1.25rem;
	grid-row-gap: 1.25rem;
	grid-template-areas:
		"h1 h2"
		"h3 h4";
}


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; }


/*  projects page auto grid
--------------------------------------------------------------------------------------- */		
section.projects {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 1.25rem;
	grid-row-gap: 1.25rem;
	grid-template-areas:
	"f1 f2"
	"f3 f4";
}

.projects figure.one   { grid-area: f1; }
.projects figure.two   { grid-area: f2; }
.projects figure.three { grid-area: f3; }
.projects figure.four  { grid-area: f4; }


/*  project page reflection section
--------------------------------------------------------------------------------------- */		
section.reflection {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 0rem;
	grid-row-gap: 0rem;
	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 */

  section.motion {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 0rem;
	grid-row-gap: 0rem;
	grid-template-areas:
	"d1 d1 d1 d1"
	"rh rh rh rh";
  }
/*  for big screens - currently just for testing
--------------------------------------------------------------------------------------- */
@media (min-width: 18000px) {
	html { font-size: 24px; }
}
/* ROUNDED CORNER PROJECTS */
.projects img {
	border-radius: 30px; 
}

/* ROUNDED CORNERS HOME PAGE */
.home img {
	border-radius: 30px; 
}
/*LUSH PDF*/
.pdf-containerlush {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px 0;
	padding: 10px;
	border: 2px transparent;
	border-radius: 8px;
	background-color: #fff;
}

	.pdf-containerlush iframe {
		border: none;
		width: 100%;
		max-width: 820px;
		height: 1080px;
		border-radius: 8px;
	}
/*Satoyama PDF*/
.pdf-container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px 0;
	padding: 10px;
	border: 2px transparent;
	border-radius: 8px;
	background-color: #fff;
}

	.pdf-container iframe {
		border: none;
		width: 100%;
		max-width: 1440px;
		height: 720px;
		border-radius: 8px;
	}
	/*Footer Section*/

footer h1 {
	margin-left: 15%;
	margin-right: 15%;
}

footer h2 {
	text-align: center;
	color: #000;
	padding: 1em;
}



footer h3 {
	text-align: center;
	color: #000;
}

.proper-footer {
	display: grid;
	min-height: 100vh;
	grid-template-rows: auto 1fr auto;
}