/* Apply the custom cursor to the entire page */


/*  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%;}   /* border radius 1% was removed to stop all images having rounded corner borders

body { background: #F0EFF4;; }


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


/* example web font styles using IBM Plex Sans
--------------------------------------------------------------------------------------- */
@font-face {
	font-family: ClashDisplay;
	src: url(../2025_final_start/fonts/Personalised\ Fonts/ClashDisplay);
	font-weight: normal;
	font-style: light;
}

@font-face {
	font-family: ClashDisplay;
	src: url(../2025_final_start/fonts/New\ Fonts/ClashDisplay-Medium);
	font-weight: normal;
	font-style: medium;
}

@font-face {
	font-family: ClashDisplay;
	src: url(../2025_final_start/fonts/New\ Fonts/ClashDisplay-Bold);
	font-weight: normal;
	font-style: bold;
}








body		{ font-family: Clash Display, Arial, sans-serif; }
h1, h2, h3	{ font-family: Clash Display, Arial,sans-serif; color:#191718; }
p			{ font-family: Clash Display, Arial,sans-serif;color: #191718; }
p1			{ font-family: Clash Display, Arial,sans-serif;color: #191718; }
p			{ font-family: Clash Display, Arial, sans-serif; color:#191718; }
figcaption	{ font-family: Clash Display, Arial, sans-serif; }
div         { font-family: Clash Display, Arial,sans-serif; color: #191718;}
nav ul li a { font-family: Clash Display, Arial,sans-serif;color:#191718;}


/*  top navigation section (edited nav h1)
--------------------------------------------------------------------------------------- */

nav 	                { padding: .9rem .5rem 2rem .5rem; min-height: 2rem; border-bottom: 2px #191718 solid; }
.container nav h1	    { font-size: 1.5em; margin-left: 3%;padding-top: 8%; color:#191718;}
nav a	                { white-space: nowrap;color: #191718; }

nav ul		            { list-style-type: none; color: #191718;font-family:Clash Display;}
.container nav h2	    { font-family:Clash Display,Arial,sans-serif;font-size: 1.3em; display: inline-block; margin-right: 30rem;padding-top: 6%; color: #191718;}
.container nav ul li	{ font-family:Clash Display,Arial,sans-serif;font-size: 1.1em; display: inline-block; margin-right: 1.5rem;margin-bottom: 4%; color: #191718;}



/*  main page title after top navigation
nav + h2 selects first <h2> after <nav>
--------------------------------------------------------------------------------------- */
nav + h2 {
	font-size: 2rem;
	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.25rem; }

section figure { margin-bottom: 1rem; }

section figcaption { font-size: 1rem; }

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: 42em; } /* max-width sets line length */
p { font-size: 1.5rem; line-height: 1.375em; }
/* p { line-height: 2.0625rem; } */ 


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

video	{ width: 99.9%;padding-right: 0%; }

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


/*  link styling
--------------------------------------------------------------------------------------- */
a			{ color: #191718; text-decoration: none; }
a:visited	{ color: #191718; }
a:hover		{ color: #777; text-decoration: underline; }
a:active	{ color: #777(116, 116, 116); 
}

nav a			{ color: #191718; text-decoration: none; }
nav a:visited	{ color: #191718; }
nav a:hover		{ color: rgb(206, 206, 206); text-decoration: underline; }
nav a:active	{ color: #777; }


/*  Custom Cursor
--------------------------------------------------------------------------------------- */



/* 
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: 100rem; min-width: 0; }

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


/*  top navigation grid
--------------------------------------------------------------------------------------- */	
	nav {
		display: grid;
		grid-template-columns: 1fr auto;
		background: #191718;
		border-bottom: 0 #191718 none;
		width: 1750px;
		height:50px;
		padding-left: 1%;
		padding-bottom:2%;
		align-content: center;
		position: fixed; top:0;
		backdrop-filter:blur(50px);
		border-radius: 70px;
    backdrop-filter: blur(3px);
    background-color: #ffffff4d;
	margin-left: 4%;
	z-index: 999999;
	

;

	}

	nav h1	{ font-size: 1.5rem; margin-bottom: .5rem; margin-top: 0;margin-left: 0; position: sticky; color: #191718;}

	nav ul    { margin: 0; position:sticky;}
	nav ul li {font-size: 1.2rem; margin: 0 0 0 1.25rem; position:sticky; }
	


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


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



	/*  scroll animation exp
--------------------------------------------------------------------------------------- */

.block {
	animation:scrolling linear; 
}

@keyframes scrolling {
	from{
        opacity:0;
		scale: 0.5;
		
	}
	to{
		opacity: 1;
		scale: 1 ;

	}
}






/*  Project 1 LUSH Project hero image
--------------------------------------------------------------------------------------- */

section.lushhero {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 10rem;
	grid-row-gap: 0;
	grid-template-areas:
	"fg fg fg"

}
section.lushhero figure	{ grid-area: fg; }
section.lushhero  { max-width: 100rem; margin: 0 auto; background: #ffffff;  margin: 0;
  padding: 0;
  display: block;}
section.lushhero body { max-width: 100rem;background: #ffffff; }

/* Target Audience LUSH Project
--------------------------------------------------------------------------------------- */


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

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

section.lushaudience p         {color: #191718;font-size:1.1em; text-align: left;margin-left: 15%;letter-spacing:1px ;}
section.lushaudience h3        {color: #191718;font-size: 1.5em; padding-bottom: 1%;margin-left:15% ;letter-spacing:1px ;}
section.lushaudience figure    {padding-bottom: 8%; margin-right: 12%; margin: 0;
  padding: 0;
  display: block;}
section.lushaudience  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.lushaudience body { background: #ffffff; }

/* Prototype 1 LUSH Project
--------------------------------------------------------------------------------------- */


section.prototype1 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 10rem;
	grid-row-gap: 0;
	grid-template-areas:
	"fg fg fg"

}
section.prototype1 figure	{ grid-area: fg; }
section.prototype1  { max-width: 100rem; margin: 0 auto; background: #ffffff; margin: 0;
  padding: 0;
  display: block; }
section.prototype1 body { max-width: 100rem;background: #ffffff; }




/*Prototype 1 Sketches LUSH Project
-------------------------------------------------------------------------------------------------*/

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

section.sketches figure.one   { grid-area: f1; }
section.sketches figure.two   { grid-area: f2; }



section.sketches   { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.sketches  body { background: #ffffff; }



/* Prototype 1 Explanation Stick Em LUSH Project
--------------------------------------------------------------------------------------- */



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

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

section.prototype1explain p         {color: #191718;font-size:1.1em; text-align: left;margin-right: 12%;letter-spacing:1px ;}
section.prototype1explain h3        {color: #191718;font-size: 1.5em; padding-bottom: 1%;letter-spacing:1px ;}
section.prototype1explain figure    {padding-top: 4%; margin-left: 15%;}

section.prototype1explain  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.prototype1explain body { background: #ffffff; }



/* Prototype 2 LUSH Project
--------------------------------------------------------------------------------------- */


section.prototype2 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 10rem;
	grid-row-gap: 0;
	grid-template-areas:
	"fg fg fg"

}
section.prototype2 figure	{ grid-area: fg; }
section.prototype2  { max-width: 100rem; margin: 0 auto; background: #ffffff; margin: 0;
  padding: 0;
  display: block; }
section.prototype2 body { max-width: 100rem;background: #ffffff; }



/*Prototype 2 Sketches LUSH Project
-------------------------------------------------------------------------------------------------*/

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

section.sketches figure.one   { grid-area: f1; }
section.sketches figure.two   { grid-area: f2; }



section.sketches   { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.sketches  body { background: #ffffff; }

/* Prototype 2 Explanation Get Giddi LUSH Project
--------------------------------------------------------------------------------------- */

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

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

section.prototype2explain p         {color: #191718;font-size:1.1em; text-align: left;margin-right: 12%;letter-spacing:1px ;}
section.prototype2explain h3        {color: #191718;font-size: 1.5em; padding-bottom: 1%;letter-spacing:1px ;}
section.prototype2explain figure    {padding-top: 4%; margin-left: 15%;}

section.prototype2explain  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.prototype2explain body { background: #ffffff; }

/* Prototype 3 LUSH Project
--------------------------------------------------------------------------------------- */
section.prototype3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 10rem;
	grid-row-gap: 0;
	grid-template-areas:
	"fg fg fg"

}
section.prototype3 figure	{ grid-area: fg; }
section.prototype3  { max-width: 100rem; margin: 0 auto; background: #ffffff; margin: 0;
  padding: 0;
  display: block; }
section.prototype3 body { max-width: 100rem;background: #ffffff; }



/*Prototype 3 Sketches LUSH Project
-------------------------------------------------------------------------------------------------*/

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

section.sketches figure.one   { grid-area: f1; }
section.sketches figure.two   { grid-area: f2; }
section.sketches figure.three   { grid-area: f3; }



section.sketches  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.sketches  body { background: #ffffff; }



/* Prototype 3 Explanation Dip Moodi LUSH Project
--------------------------------------------------------------------------------------- */
section.prototype3explain { 
	display: grid; 
	grid-template-columns: repeat(10, 1fr);
	grid-template-rows: minmax(2.5rem, auto);
	grid-column-gap: 2rem;
	grid-row-gap: 0.625rem;    /*  .625% of 16 = 10, 0.625em = 10px ...  */
	grid-row-gap: 0;
	grid-template-areas:
	"fg fg fg fg .. hd hd hd hd hd"
	"fg fg fg fg .. dv dv dv dv dv";
}

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

section.prototype3explain p         {color: #191718;font-size:1.1em; text-align: left;margin-right: 12%;letter-spacing:1px ;}
section.prototype3explain h3        {color: #191718;font-size: 1.5em; padding-bottom: 1%;letter-spacing:1px ;}
section.prototype3explain figure    {padding-top: 4%; margin-left: 15%;}

section.prototype3explain  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.prototype3explain body { background: #ffffff; }




/* Character Change LUSH Project
--------------------------------------------------------------------------------------- */

section.characterchange {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 10rem;
	grid-row-gap: 0;
	grid-template-areas:
	"fg fg fg"

}
section.characterchange figure	{ grid-area: fg; }
section.characterchange  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.characterchange body { max-width: 100rem;background: #ffffff; }

/*   Character Change Explanation
--------------------------------------------------------------------------------------- */

section.characterchangeexp {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 10rem;
	grid-row-gap: 0;
	grid-template-areas:
	"hd hd hd"
	"dv dv dv";
}

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

section.characterchangeexp div h3		{ color: #191718;font-size:1.5em; margin-left:6%;padding:1rem; letter-spacing:1px ;}
section.characterchangeexp div p		{ color: #191718;font-size:1.1em;margin-left:7%;letter-spacing:1px ; }
section.characterchangeexp  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.characterchangeexp body { max-width: 100rem;background: #ffffff; }


/* Final Toolkit Photo 1 LUSH Project
--------------------------------------------------------------------------------------- */


section.toolkitph {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 5rem;
	grid-row-gap: 0;
	grid-template-areas:
	"fg fg fg"

}
section.toolkitph figure	{ grid-area: fg; }
section.toolkitph  { max-width: 100rem; margin: 0 auto; background: #ffffff;  margin: 0;
  padding: 0;
  display: block;}
section.toolkitph body { max-width: 100rem;background: #ffffff; }

/* Final Toolkit Photos 2 LUSH Project
--------------------------------------------------------------------------------------- */

section.toolkitph2 {
	display: grid;
	grid-template-columns: repeat(4 1fr);
	grid-template-rows: auto;
	grid-column-gap: 0;
	grid-row-gap: 0;
	grid-template-areas:
	"f1 f2"
	"f3 f4";
	
}
section.toolkitph2 figure.one	{ grid-area: f1; }
section.toolkitph2 figure.two	{ grid-area: f2; }
section.toolkitph2 figure.three	{ grid-area: f3; }
section.toolkitph2 figure.four	{ grid-area: f4; }




section.toolkitph2  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.toolkitph2 body { max-width: 100rem;background: #ffffff; }



/* Final Toolkit Photos 3 LUSH Project
--------------------------------------------------------------------------------------- */


section.toolkitph3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 0;
	grid-row-gap: 0;
	grid-template-areas:
	"fg fg fg"
}
section.toolkitph3 figure.one	{ grid-area: f1; }
section.toolkitph3 figure.two	{ grid-area: f2; }




section.toolkitph3  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.toolkitph3 body { max-width: 100rem;background: #ffffff; }

/* Explaining the cards LUSH Project
--------------------------------------------------------------------------------------- */

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

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

section.cards div h3		{ color: #191718;font-size:1.5em; margin-left:13%;padding:1rem;letter-spacing:1px ;padding-top: 5%; }
section.cards div p		{ color: #191718;font-size:1.1em;margin-left:15%; padding-right: 8%;letter-spacing:1px ;}
section.cards figure	    { padding: 10%;padding-right: 20%; }

section.cards  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.cards body {  max-width: 100rem;background: #ffffff; }

/* Final Image for LUSH Project
--------------------------------------------------------------------------------------- */
section.lushfinale {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 0;
	grid-row-gap: 0;
	grid-template-areas:
	"fg fg fg";
}
 section.lushfinale figure	{ grid-area: fg; }


 section.lushfinale  { max-width: 100rem; margin: 0 auto; background: #191718; }
 section.lushfinale body { max-width: 100rem;background: #191718; }

/* Other projects interested in
--------------------------------------------------------------------------------------- */


section.otherprojectslush {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"f4 f3 f2";
}


section.otherprojectslush h2 {
	font-size: 1.5em;
		line-height: 90%;
		letter-spacing:1px;
	text-align: left;
	margin-left:11%; }


	section.otherprojectslush figure.four   { grid-area:f4;}
	section.otherprojectslush figure.three  { grid-area:f3;}
	section.otherprojectslush figure.two    { grid-area:f2;}


	section.otherprojectslush div p  { font-family:Clash Display;font-size:2em;text-align: center;line-height: 50%; }
    section.otherprojectslush div p2 { font-family:Clash Display; font-size:1em;text-align: left; padding-left: 10%;}

	section.otherprojectslush  { max-width: 100rem; margin: 0 auto; background: #191718;}
	section.otherprojectslush body { max-width: 100rem;background: #191718; }
   
	
	/*   Bottom of LUSH project
--------------------------------------------------------------------------------------- */


section.bottomoflush {
	display: grid;
	grid-template-columns:(1fr 1fr 1fr);
	grid-template-rows:auto;
	grid-column-gap:1rem;
	grid-row-gap:3;
	background:transparen;
	grid-template-areas:
	"f1 f2 f3"
	"h1 h2 h3"
	"d1 d2 d3";
}

section.bottomoflush figure.one    { grid-area: f1; }
section.bottomoflush figure.two    { grid-area: f2; }
section.bottomoflush figure.three  { grid-area: f3; }

section.bottomoflush h1            { grid-area: hd; }


section.bottomoflush figure	{ margin:0; padding-top:40%;}
section.bottomoflush  { max-width: 100rem; margin: 0 auto; background: #191718; }
section.bottomoflush body { background: #191718; }

/* Contacts at the bottom of LUSH project
--------------------------------------------------------------------------------------- */

section.lushcontact {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	".. hd .."
    ".. dv ..";}


.lushcontact h2 { font-size: 9em;
		line-height: 90%;
		padding-bottom: 5%; }




	section.lushcontact h2  { grid-area:hd }
	section.lushcontact div { grid-area:dv }

	section.lushcontact div h2 { font-family:Clash Display;font-size:9em }
	section.lushcontact div p  { font-family:Clash Display;font-size:2em;text-align: center;line-height: 50%; }
    section.lushcontact div p2 { font-family:Clash Display; font-size:1em;text-align: left;padding-right: 10%;}





	/*   Project 2 Aranya Project hero image
--------------------------------------------------------------------------------------- */
section.aranyahero {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 10rem;
	grid-row-gap: 0;
	grid-template-areas:
	"fg fg fg"

}
section.aranyahero figure	{ grid-area: fg; }
section.aranyahero  { max-width: 100rem; margin: 0 auto; background: #ffffff;  margin: 0;
  padding: 0;
  display: block;}
section.aranyahero body { max-width: 100rem;background: #ffffff; }


/*   Project 1,2,3,4  Brief and Response
--------------------------------------------------------------------------------------- */
	section.three {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 10rem;
		grid-row-gap: 0;
		grid-template-areas:
		"hd hd hd"
		"dv dv dv";
	}

	section.three h3		{ grid-area: hd; }
	section.three div		{ grid-area: dv; }
	
	section.three div h3	{ color: #191718;font-size:1.5em; margin-left:7%; letter-spacing:1px;}
	section.three div p		{ color: #191718;font-size:1.1em;margin-left:7%;letter-spacing:1px ; }


	




	/*   New Brief and Response Layout/Format Code 
--------------------------------------------------------------------------------------- */
section.threelol {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 10rem;
		grid-row-gap: 0;
		grid-template-areas:
		"hd hd hd"
		"dv dv dv";
	}

section.threelol h3		{ grid-area: hd; }
section.threelol div		{ grid-area: dv; }
	
section.threelol div h3	{ color: #191718;font-size:1.5em; margin-left:7%; letter-spacing:1px;}
section.threelol div p		{ color: #191718;font-size:1.1em;margin-left:7%;letter-spacing:1px ; }


	

/*  Our brands Mission Aranya Project
--------------------------------------------------------------------------------------- */	

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

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

section.brand p         {color: #191718;font-size:1.1em; text-align: left;margin-left: 15%;letter-spacing:1px ;}
section.brand h3        {color: #191718;font-size: 1.5em; padding-bottom: 1%;margin-left:15% ;letter-spacing:1px ;}
section.brand figure    {padding-bottom: 8%; margin-right: 12%;}
section.brand  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.brand body { background: #ffffff; }



/*  Problems with Shipping Containers Aranya Project
--------------------------------------------------------------------------------------- */	


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

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

section.problem p         {color: #191718;font-size:1.1em; text-align: left;margin-right: 12%;letter-spacing:1px ;}
section.problem h3        {color: #191718;font-size: 1.5em; padding-bottom: 1%;letter-spacing:1px ;}
section.problem figure    {padding-top: 4%; margin-left: 15%;}

section.problem  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.problem body { background: #ffffff; }

/* Our Post-Growth / Imaginary World
--------------------------------------------------------------------------------------- */	


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

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

section.postgrowthgame p         {color: #191718;font-size:1.1em; text-align: left;margin-left: 15%; letter-spacing:1px ;}
section.postgrowthgame h3        {color: #191718;font-size: 1.5em; padding-bottom: 1%;margin-left:15% ;letter-spacing:1px ;}
section.postgrowthgame figure    {padding-top: 4%; margin-right: 12%;}

section.postgrowthgame  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.postgrowthgame body { background: #ffffff; }

/* Our Post-Growth / Imaginary World
--------------------------------------------------------------------------------------- */
section.imaginary {
	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:
	"fg fg fg fg"
	"fg fg fg fg";
}


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


section.imaginary h3		{ margin-top: 0; }
section.imaginary figure	{ margin:0; padding: 2%;}

section.imaginary  { max-width: 100rem; margin: 0 auto; background: #ffffff;  margin: 0;
  padding: 0;
  display: block;}
section.imaginary body { background: #ffffff; }


/* What is The Aranya Project?
--------------------------------------------------------------------------------------- */

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

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

section.purpose div h3		{ color: #191718;font-size:1.5em; margin-left:13%;padding:1rem;letter-spacing:1px ;padding-top: 2%; }
section.purpose div p		{ color: #191718;font-size:1.1em;margin-left:15%; padding-right: 8%;letter-spacing:1px ;}
section.purpose figure	    { padding-right: 10%; padding-top: 2%; }

section.purpose  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.purpose body { background: #ffffff; }

/* Font Experimentation for Aranya Project
--------------------------------------------------------------------------------------- */

section.experimentation {
	display: grid;
	grid-template-columns:(1fr 1fr);
	grid-template-rows: auto;
	grid-column-gap: 0rem;
	grid-row-gap: 0;
	background: transparent;
	grid-template-areas:
	"f1 f2";
}


section.experimentation figure.one	{ grid-area: f1; }
section.experimentation figure.two	{ grid-area: f2; }


section.experimentation h3		{ margin-top: 0; }
section.experimentation figure	{ margin:0; padding: 0;}

section.experimentation  { max-width: 100rem; margin: 0 auto; background: #ffffff; margin: 0;
  padding: 0;
  display: block; }
section.experimentation body { background: #ffffff; }
/* Logo Experimentation for Aranya Project
--------------------------------------------------------------------------------------- */


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

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

section.logoexperiment p         {color: #191718;font-size:1.1em; text-align: left;margin-right: 12%;letter-spacing:1px ;}
section.logoexperiment h3        {color: #191718;font-size: 1.5em; padding-top: 3%;letter-spacing:1px ;}
section.logoexperiment figure    {padding-top: 4%; margin-left: 16%;padding-bottom: 10%;}

section.logoexperiment  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.logoexperiment body { background: #ffffff; }




/* Font Billboard 1 for Aranya Project
--------------------------------------------------------------------------------------- */

section.billboard {
	display: grid;
	grid-template-columns:(1fr 1fr);
	grid-template-rows: auto;
	grid-column-gap: 0rem;
	grid-row-gap: 0;
	background: transparent;
	grid-template-areas:
	"f1 f2";
}


section.billboard figure.one	{ grid-area: f1; }
section.billboard figure.two	{ grid-area: f2; }


section.billboard h3		{ margin-top: 0; }
section.billboard figure	{ margin:0; padding: 0;}

section.billboard  { max-width: 100rem; margin: 0 auto; background: #ffffff; margin: 0;
  padding: 0;
  display: block; }
section.billboard body { background: #ffffff; }





/* Banner Mockup for Aranya Project
--------------------------------------------------------------------------------------- */

section.banner {
	display: grid;
	grid-template-columns:(1fr 1fr);
	grid-template-rows: auto;
	grid-column-gap: 0rem;
	grid-row-gap: 0;
	background: transparent;
	grid-template-areas:
	"f1 f2";
}


section.banner figure.one	{ grid-area: f1; }
section.banner figure.two	{ grid-area: f2; }


section.banner h3		{ margin-top: 0; }
section.banner figure	{ margin:0; padding: 0;}

section.banner { max-width: 100rem; margin: 0 auto; background: #ffffff;  margin: 0;
  padding: 0;
  display: block;}
section.banner body { background: #ffffff; }




/* Font Brand Logo Details for Aranya Project
--------------------------------------------------------------------------------------- */


section.Brandlogodetails {
	display: grid;
	grid-template-columns:(1fr 1fr);
	grid-template-rows: auto;
	grid-column-gap: 0rem;
	grid-row-gap: 0;
	background: transparent;
	grid-template-areas:
	"f1 f2";
}


section.Brandlogodetails figure.one	{ grid-area: f1; }
section.Brandlogodetails figure.two	{ grid-area: f2; }


section.Brandlogodetails h3		{ margin-top: 0; }
section.Brandlogodetails figure	{ margin:0; padding: 0;}

section.Brandlogodetails  { max-width: 100rem; margin: 0 auto; background: #ffffff; margin: 0;
  padding: 0;
  display: block; }
section.Brandlogodetails body { background: #ffffff; }
/* The brands story for Aranya Project
--------------------------------------------------------------------------------------- */
	section.story{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 10rem;
		grid-row-gap: 0;
		grid-template-areas:
		"hd hd hd"
		"dv dv dv";
	}

	section.story h3		{ grid-area: hd; }
	section.story div		{ grid-area: dv; }
	
	section.story div h3		{color: #191718; font-size:1.5em; margin-left:6%;padding:1rem;letter-spacing:1px ; }
	section.story div p	    {color: #191718; font-size:1.1em;margin-left:7%;letter-spacing:1px ;}

	section.story  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
	section.story body { background: #ffffff; }
/* The Logo Representation for Aranya Project
--------------------------------------------------------------------------------------- */


section.represent {
	display: grid;
	grid-template-columns:(1fr 1fr);
	grid-template-rows: auto;
	grid-column-gap: 0rem;
	grid-row-gap: 0;
	background: transparent;
	grid-template-areas:
	"f1 f2";
}


section.represent figure.one	{ grid-area: f1; }
section.represent figure.two	{ grid-area: f2; }


section.represent h3		{ margin-top: 0; }
section.represent figure	{ margin:0; padding: 0;}

section.represent  { max-width: 100rem; margin: 0 auto; background: #ffffff;  margin: 0;
  padding: 0;
  display: block;}
section.represent body { background: #ffffff; }
/* Logo Representation Explanation for Aranya Project
--------------------------------------------------------------------------------------- */

section.journey{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 10rem;
	grid-row-gap: 0;
	grid-template-areas:
	"hd hd hd"
	"dv dv dv";
}

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

section.journey div h3		{color: #191718; font-size:1.5em; margin-left:6%;padding:1rem; letter-spacing:1px ;}
section.journey div p	    {color: #191718; font-size:1.1em;margin-left:7% ;letter-spacing:1px ;}

section.journey  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.journey body { background: #ffffff; }



/* Image 1 for Aranya Project
--------------------------------------------------------------------------------------- */


section.image1 {
	display: grid;
	grid-template-columns:(1fr 1fr);
	grid-template-rows: auto;
	grid-column-gap: 0rem;
	grid-row-gap: 0;
	background: transparent;
	grid-template-areas:
	"f1 f2";
}


section.image1 figure.one	{ grid-area: f1; }
section.image1 figure.two	{ grid-area: f2; }


section.image1 h3		{ margin-top: 0; }
section.image1 figure	{ margin:0; padding: 0;}
section.image1  { max-width: 100rem; margin: 0 auto; background: #ffffff; margin: 0;
  padding: 0;
  display: block; }
section.image1 body { background: #ffffff; }


/* Image 2 for Aranya Project
--------------------------------------------------------------------------------------- */
section.image2 {
	display: grid;
	grid-template-columns:(1fr 1fr);
	grid-template-rows: auto;
	grid-column-gap: 0rem;
	grid-row-gap: 0;
	background: transparent;
	grid-template-areas:
	"f1 f2";
}


section.image2 figure.one	{ grid-area: f1; }
section.image2figure.two	{ grid-area: f2; }


section.image2 h3		{ margin-top: 0; }
section.image2 figure	{ margin:0; padding:0;}

section.image2  { max-width: 100rem; margin: 0 auto; background: #ffffff; margin: 0;
  padding: 0;
  display: block; }
section.image2 body { background: #ffffff; }

/* Repair Day Image for Aranya Project
--------------------------------------------------------------------------------------- */
section.repair {
	display: grid;
	grid-template-columns:(1fr 1fr 1fr);
	grid-template-rows: auto;
	grid-column-gap: 0rem;
	grid-row-gap: 0;
	background: transparent;
	grid-template-areas:
	"f1 f1 f1";
}


section.repair figure.one	{ grid-area: f1; }
section.repairfigure.two	{ grid-area: f2; }


section.repair h3		{ margin-top: 0; }
section.repair figure	{ margin:0; padding:0;}

section.repair  { max-width: 100rem; margin: 0 auto; background: #ffffff; margin: 0;
  padding: 0;
  display: block; }
section.repair body { background: #ffffff; }

/* Repair Day Explanation for Aranya Project
--------------------------------------------------------------------------------------- */
section.repairday {
	display: grid; 
	grid-template-columns: repeat(10, 1fr);
	grid-template-rows: minmax(2.5rem, auto);
	grid-column-gap: 2rem;
	grid-row-gap: 0rem;    /*  .625% of 16 = 10, 0.625em = 10px ...  */
	grid-row-gap: 0;
	grid-template-areas:
	"hd hd hd hd hd fg fg fg fg fg"
	"dv dv dv dv dv fg fg fg fg fg";
}

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

section.repairday div h3		{ color:#191718;font-size:1.5em; margin-left:12%;padding:1rem; letter-spacing:1px ;}
section.repairday div p		{ color:#191718;font-size:1.1em;margin-left:15%;padding-right: 8%; letter-spacing:1px ;}
section.repairday figure	    { padding-right: 10%; padding-top: 10%; }

section.repairday  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.repairday body { background: #ffffff; }

/* Final image for Aranya Project
--------------------------------------------------------------------------------------- */

section.finalaranya {
	display: grid;
	grid-template-columns:(1fr 1fr);
	grid-template-rows: auto;
	grid-column-gap: 0rem;
	grid-row-gap: 0;
	background: transparent;
	grid-template-areas:
	"f1 f2";
}


section.finalaranya figure.one	{ grid-area: f1; }
section.finalaranyafigure.two	{ grid-area: f2; }


section.finalaranya h3		{  margin: 0;
  padding: 0;
  display: block; }
section.finalaranya figure	{ margin:0; padding:0;}

/* Bottom of Aranya Project
--------------------------------------------------------------------------------------- */

section.bottomofaranya {
	display: grid;
	grid-template-columns:(1fr 1fr 1fr);
	grid-template-rows:auto;
	grid-column-gap:1rem;
	grid-row-gap:3;
	background:transparen;
	grid-template-areas:
	"f1 f2 f3"
	"h1 h2 h3"
	"d1 d2 d3";
}

section.bottomofaranya figure.one    { grid-area: f1; }
section.bottomofaranya figure.two    { grid-area: f2; }
section.bottomofaranya figure.three  { grid-area: f3; }

section.bottomofaranya h1            { grid-area: hd; }


section.bottomofaranya figure	{ margin:0; padding:0;}





/* Other projects interested in
--------------------------------------------------------------------------------------- */


section.otherprojects {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"hd hd ..";}


.otherprojects h2 {
	font-size: 1.5em;
		line-height: 90%;
		letter-spacing:1px;
	text-align: left;
	margin-left:11%; }




	section.otherprojects h2  { grid-area:hd }
	section.otherprojects div { grid-area:dv }


	section.otherprojects div p  { font-family:Clash Display;font-size:2em;text-align: center;line-height: 50%; }
    section.otherprojects div p2 { font-family:Clash Display; font-size:1em;text-align: left; padding-left: 10%;}


/* Contacts at the bottom of Aranya Project
--------------------------------------------------------------------------------------- */

section.contactinaranya {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	".. hd .."
    ".. dv ..";}


.contactinaranya h2 { font-size: 9em;
		line-height: 90%;
		padding-bottom: 5%; }




	section.contactinaranya h2  { grid-area:hd }
	section.contactinaranya div { grid-area:dv }


	section.contactinaranya div p  { font-family:Clash Display;font-size:2em;text-align: center;line-height: 50%; }
    section.contactinaranya div p2 { font-family:Clash Display; font-size:1em;text-align: left; padding-right: 10%;}




/*  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: 1.5rem;
		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; }



/*  intro
--------------------------------------------------------------------------------------- */
	section.intro {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 1.5rem;  
		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; }


/*  images-two
--------------------------------------------------------------------------------------- */
	section.images-two {
		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"
		"dv dv";
	}

	section.images-two h3						{ grid-area: hd; }
	section.images-two figure					{ grid-area: f1; }
	section.images-two figure:nth-of-type(2)	{ grid-area: f2; }
	section.images-two div 						{ grid-area: dv; }

	section.images-two div h3,
	section.images-two 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: 2rem; 
		grid-row-gap: 1rem;
		grid-template-areas:
		"f1 f2 f3"
		"hd hd hd"
		"dv dv dv";
	}

	section.images-three h3						{ grid-area: hd; }
	section.images-three figure					{ grid-area: f1; }
	section.images-three figure:nth-of-type(2)	{ grid-area: f2; }
	section.images-three figure:nth-of-type(3)	{ 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
--------------------------------------------------------------------------------------- */
	section.images-three-plus {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 2rem; 
		grid-row-gap: 2rem;
		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: 1.5rem;
		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: 1.5rem;
		grid-row-gap: 0;
		grid-template-areas:
		"hd fg"
		"dv fg";
	}


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


/*  custom section for About me Page
--------------------------------------------------------------------------------------- */
	section.about {
	display: grid;
	grid-template-columns:1fr, 1fr, 1fr;
	grid-template-rows: auto;
	grid-column-gap: 0rem;
	grid-row-gap: 0;
	grid-template-areas:
	"fg fg fg"
	"fg fg fg"
	"dv dv dv";
}

	section.about figure { grid-area: fg }
	section.about h1     { grid-area: hd }

    section.about p		 {  font-size:1.1rem; line-height: 1.3em;margin-left: 9%;color: #eee;letter-spacing:1px ; }
    section.about h1 	 {  font-size:5rem; margin-left: 9%; color: #eee; letter-spacing:1px ;}
	section.about figure 	                      
   

	

/*   NEW About me section page

--------------------------------------------------------------------------------------- */
section.updatedaboutme {
	display: grid;
	grid-template-columns:repeat(6,1fr);
	grid-template-rows: auto;
	grid-column-gap: 0rem;
	grid-row-gap: 0;
	grid-template-areas:
	"hd hd hd hd fg fg"
	"dv dv dv dv fg fg";
}


section.updatedaboutme figure { grid-area: fg }
section.updatedaboutme h1     { grid-area: hd }
section.updatedaboutme p      { grid-area: dv }


.updatedaboutme-image img{
  width: 100%;
  max-width: 600px;
  height: 800px;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);}

































  

/*   NEW  custom section for About me Page
--------------------------------------------------------------------------------------- */
section.aboutme {
	display: grid;
	grid-template-columns:1fr, 1fr, 1fr, 1fr;
	grid-template-rows: auto;
	grid-column-gap: 0rem;
	grid-row-gap: 0;
	grid-template-areas:
	"hd hd fg fg"
	"dv dv fg fg";
}

section.aboutme figure { grid-area: fg }
section.aboutme h1     { grid-area: hd }
section.aboutme p      { grid-area: dv }

section.aboutme p		 {  font-size:1.1rem; line-height: 1.3em;margin-left: 9%;color: #F0EFF4;letter-spacing:1px ; }
section.aboutme h1 	 {  font-size:1.1rem; margin-left: 9%; color:#F0EFF4; letter-spacing:1px ;}
section.aboutme figure 	  { width: 50px; height: 100px;}    
	body {
    margin: 0;
    font-family: Arial, sans-serif; 
}

/* Full screen rectangle */


.full-rectangle {
	display: grid;
	grid-template-columns:1fr, 1fr, 1fr, 1fr;
	grid-template-rows: auto;
	grid-column-gap: 0rem;
	grid-row-gap: 0;
	grid-template-areas:
	"hd hd fg fg"
	"dv dv fg fg";
    width: 100%;
    height: 100vh; /* 100% of viewport height */
    background-color: #191718; /* Change to any color */
    color:#F0EFF4;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical centering */
    align-items: left;     /* Horizontal centering */
    text-align: left;
    border-radius: 2%;}

	section.full-rectangle p				 { grid-area: dv; }
	section.full-rectagnle h1				 { grid-area: hd; }
	section.full-rectangle figure       	     { grid-area: fg; }
	
			


	.full-rectangle p    {  font-size:1.1rem; line-height: 1.3em;margin-left: 9%;color: #F0EFF4;letter-spacing:1px ;text-align: left;}
    .full-rectangle h1 	 {  font-size:1.1rem; margin-left: 9%; color:#F0EFF4; letter-spacing:1px ;line-height: 6em;}
	.full-rectangle img  { height: 70vh; width: 48vh; margin-left: 70%;}
	
@keyframes appear {
	from {
		opacity: 1;
		scale: 0.8;
	}
	to{
		opacity: 1;
		scale: 1;
	}
	
}
.full-rectangle {
	animation:appear linear;
	animation-timeline: view();
	animation-range: entry 0% cover 40%;
}

.blackbox {
	background: #191718;
	width: 100%;
    height: 100vh; /* 100% of viewport height */
    color:#F0EFF4;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical centering */
    align-items: center;     /* Horizontal centering */
    text-align: center;}
	.blackbox p		 {  font-size:2rem; line-height: 6em;letter-spacing:1px ; }
    .blackbox h1 	 {  font-size:3rem;  color:#F0EFF4; letter-spacing:1px ;line-height: 1em; text-align: left;}
	.blackbox h2 	 {  font-size:20rem;  color:#F0EFF4; letter-spacing:1px ;line-height: 1em; text-align: left;}

.boxinbox {
	background: #652f92;
	width: 95%;
    height: 80vh; /* 100% of viewport height */
    color:#F0EFF4;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical centering */
    align-items: center;     /* Horizontal centering */
    text-align: center;}





.full-rectangle2 {
    width: 100%;
    height: 110vh; /* 100% of viewport height */
    background-color: #191718; /* Change to any color */
    color:#F0EFF4;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical centering */
    align-items: center;     /* Horizontal centering */
    text-align: center;
    border-radius: 2%;}
	.full-rectangle2 p		 {  font-size:2rem; line-height: 6em;letter-spacing:1px ; }
    .full-rectangle2 h1 	 {  font-size:8rem;  color:#F0EFF4; letter-spacing:1px ;
		                         line-height: 0.85em; text-align: left;text-align: center;
								letter-spacing: 4px; display: block; top:50%; left: 50%;
								margin-left: 10%;margin-right: 10%;}
	.full-rectangle2 h2 	 {  font-size:20rem;  color:#F0EFF4; letter-spacing:1px ;line-height: 1em; text-align: left;}







	.full-rectangle2forcontact {
    width: 100%;
    height: 100vh; /* 100% of viewport height */
    background-color: #191718; /* Change to any color */
    color:#F0EFF4;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical centering */
    align-items: center;     /* Horizontal centering */
    text-align: center;
    border-radius: 2%;}
	.full-rectangle2forcontact p		 {  font-size:2rem; line-height: 6em;letter-spacing:1px ; }
    .full-rectangle2forcontact h1 	 {  font-size:4rem;  color:#F0EFF4; letter-spacing:1px ;line-height: 1em; text-align: left;} 
	.full-rectangle2forcontact h2 	 {  font-size:20rem;  color:#F0EFF4; letter-spacing:1px ;line-height: 1em; text-align: left;}








.full-rectangleforabout {
	display: grid;
	grid-template-columns:1fr, 1fr, 1fr, 1fr;
	grid-template-rows: auto;
	grid-column-gap: 0rem;
	grid-row-gap: 0;
	grid-template-areas:
	"hd hd fg fg"
	"dv dv fg fg";
    width: 100%;
    height: 100vh; /* 100% of viewport height */
    background-color: transparent; /* Change to any color */
    color:#191718;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical centering */
    align-items: left;     /* Horizontal centering */
    text-align: left;
    border-radius: 2%;}
	
	.full-rectangleforabout p		 {  font-size:1.1rem; line-height: 1.3em;margin-left: 9%;color: #191718;letter-spacing:1px ; }
    .full-rectangleforabout h1 	 {  font-size:1.1rem; margin-left: 9%; color:#191718; letter-spacing:1px ;line-height: 6em;}
	.full-rectangleforabout figure  { height: 100px; width: 90px;right:0 ;}








* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  background-color: #f9f9f9;
  color: #333;
}

.about-section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 50px 10%;
}

.about-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  max-width: 1200px;
  width: 100%;
}

.about-text {
  flex: 1;
}

.about-text h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #111;
}

.about-text p {
  font-size: 1.2rem;
  line-height: 1.7;
  margin-bottom: 15px;
}



.about-image img {
  width: 100%;
  max-width: 800px;
  height: 800px;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  
  
}



@keyframes appear {
	from {
		opacity: 1;
		scale: 0.8;
	}
	to{
		opacity: 1;
		scale: 1;
	}
	
}
.about-image img {
	animation:appear linear;
	animation-timeline: view();
	animation-range: entry 0% cover 40%;

}



.about-text {
	animation:appear linear;
	animation-timeline: view();
	animation-range: entry 0% cover 40%;
}



/* Responsive for mobile */
@media (max-width: 768px) {
  .about-content {
    flex-direction: column;
    text-align: center;
  }

  .about-image {
    text-align: center;
  }

  .about-image img {
    max-width: 300px;
    margin-top: 20px;
  }
}
















body {
  font-family: "Poppins", sans-serif;
  background-color: #f9f9f9;
  color: #333;
}

.about-section2 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 50px 10%;
}

.about-content2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  max-width: 1200px;
  width: 100%;
}

.about-text2 {
  flex: 1;
}

.about-text2 h1 {
  font-size: 2.5rem;
  padding-top: 20%;
  color: #F0EFF4;
}

.about-text2 p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 25px;
}

.about-image2 {
  flex: 1;
  text-align: right;
}

.about-image2 img {
  width: 100%;
  max-width: 380px;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Responsive for mobile */
@media (max-width: 768px) {
  .about-content {
    flex-direction: column;
    text-align: center;
  }

  .about-image2 {
    text-align: center;
  }

  .about-image2 img {
    max-width: 300px;
    margin-top: 20px;
  }
}












	
.hr {
      border: none;          /* remove default styling */
      height: 2px;           /* thin line */
      background-color: #DDE8B9; /* black line */
      width: 100%;           /* full width */
    }






@keyframes appear {
	from {
		opacity: 1;
		scale: 0.8;
	}
	to{
		opacity: 1;
		scale: 1;
	}
	
}
.full-rectangle2 {
	animation:appear 5s linear;
	animation-timeline: view();
	animation-range: entry 0% cover 40%;
}



    .contact-btn {
     width: 20%;
     height: 8vh; /* 100% of viewport height */
     background-color: #DDE8B9; /* Change to any color */
     display: flex;
	 font-weight: bold;
	 padding-top:1%;
     flex-direction: column;
     justify-content: center; /* Vertical centering */
     align-items: center;     /* Horizontal centering */
     text-align: center;
      background-color: white; /* Blue */
      border: none;
      border-radius: 25px; /* curved edges */
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.2s ease;
    }


    .contact-btn:hover {
	  color: white;
      background-color: white; /* darker blue on hover */
	  border: 3px solid white; /* only white border */
      transform: scale(1.05); /* slight zoom on hover */
    }

    .contact-btn:active {
      transform: scale(0.98); /* press effect */
    }

	





.full-rectangle3 {
    width: 100%;
    height: 17vh; /* 100% of viewport height */
    background-color: #DDE8B9; /* Change to any color */
cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical centering */
    align-items: center;     /* Horizontal centering */
    text-align: center;
    transition:opacity 0.3s ease-in-out; scale: 0.3s ease-in-out; transform:0.3s ease-in-out;}
.full-rectangle3 p { font-size:1em; line-height: 10%;align-items: center;}
.full-rectangle3:hover{ transform: scale(1.08);}


.full-rectangle4 {
    width: 100%;
    height: 17vh; /* 100% of viewport height */
    background-color: #E8D2AE; /* Change to any color */
cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical centering */
    align-items: center;     /* Horizontal centering */
    text-align: center;
    transition:opacity 0.3s ease-in-out; scale: 0.3s ease-in-out; transform:0.3s ease-in-out;}
.full-rectangle4 p { font-size:1em; line-height: 10%;align-items: center;}
.full-rectangle4:hover{transform: scale(1.08);}


.full-rectangle5 {
    width: 100%;
    height: 17vh; /* 100% of viewport height */
    background-color: #D7B29D; /* Change to any color */
cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical centering */
    align-items: center;     /* Horizontal centering */
    text-align: center;
    transition:opacity 0.3s ease-in-out; scale: 0.3s ease-in-out; transform:0.3s ease-in-out;}
.full-rectangle5 p { font-size:1em; line-height: 10%;align-items: center;}
.full-rectangle5:hover{transform: scale(1.08);}



.full-rectangle6 {
    width: 100%;
    height: 17vh; /* 100% of viewport height */
    background-color:#CB8589; /* Change to any color */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical centering */
    align-items: center;     /* Horizontal centering */
    text-align: center;
    transition:opacity 0.3s ease-in-out; scale: 0.3s ease-in-out; transform:0.3s ease-in-out;}
.full-rectangle6 p { font-size:1em; line-height: 10%;align-items: center;}
.full-rectangle6:hover{transform: scale(1.08);}




.full-rectangle7 {
    width: 100%;
    height: 17vh; /* 100% of viewport height */
    background-color:#796465; /* Change to any color */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical centering */
    align-items: center;     /* Horizontal centering */
    text-align: center;
    transition:opacity 0.3s ease-in-out; scale: 0.3s ease-in-out; transform:0.3s ease-in-out;}
.full-rectangle7 p { font-size:1em; line-height: 10%;align-items: center;}
.full-rectangle7:hover{transform: scale(1.08);}




.full-rectangle8 {
    width: 100%;
    height: 17vh; /* 100% of viewport height */
    background-color:#40434E; /* Change to any color */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical centering */
    align-items: center;     /* Horizontal centering */
    text-align: center;
    transition:opacity 0.3s ease-in-out; scale: 0.3s ease-in-out; transform:0.3s ease-in-out;}
.full-rectangle8 p { font-size:1em; line-height: 10%;align-items: center;}
.full-rectangle8:hover{transform: scale(1.08);}








	
/*   NEW  custom section for Portfolio Purpose
--------------------------------------------------------------------------------------- */
	section.portfoliopurpose {
	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 .."
	"dv dv dv";
}

	section.portfoliopurpose figure { grid-area: fg }
	section.portfoliopurpose h1     { grid-area: hd }
	section.portfoliopurpose p      { grid-area: dv }

    section.portfoliopurpose p		 {  font-size:2.1rem; line-height: 1.1em;color: #191718;letter-spacing:1px;text-align:center;padding-left: 25%;}
    section.portfoliopurpose h1 	 {  font-size:1.1rem;  color: #191718; letter-spacing:1px ;}
	                      
   

/*  section.video grid  Project 4 Start of Animation Project
--------------------------------------------------------------------------------------- */	
	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";
	}

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

	section.video figure	{ padding:80px; }
	section.video div		{ background: transparent; }
	section.video p			{ color:#191718;font-size:1.1em; margin-left: 6%; }
	section.video h3		{ color:#191718;font-size:1.5em;padding:1rem;margin-left: 5%; }

	section.video  { max-width: 90%; margin:0 auto; background: #ffffff;
  padding: 0;
  display: block; }
	section.video body { background: #ffffff; }




/*Discussing Theme for Animation Project (10 column grid)
----------------------------------------------------------------------------*/

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

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

	section.theme p         {color:#191718;font-size:1.1em; text-align: left;margin-right: 12%;}
	section.theme h3        {color:#191718;font-size: 1.5em; padding-bottom: 1%;}
	section.theme figure    {padding-bottom: 8%; margin-left: 15%;}

	section.theme  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
	section.theme body { background: #ffffff; }

/*Why Self Acceptance / Animation Project
----------------------------------------------------------------------------------------------------------------*/

	section.why { 
		display: grid; 
		grid-template-columns: repeat(10, 1fr);
		grid-template-rows: minmax(2.5rem, auto);
		grid-column-gap: 2rem;
		grid-row-gap: 0rem;    /*  .625% of 16 = 10, 0.625em = 10px ...  */
		grid-row-gap: 0;
		grid-template-areas:
		"hd hd hd hd hd fg fg fg fg fg"
		"dv dv dv dv dv fg fg fg fg fg";
	}
	
	section.why h3		{ grid-area: hd; }
	section.why figure	{ grid-area: fg; }
	section div		        { grid-area: dv; }
	
	section.why p         {color: #191718;font-size:1.1em; text-align: left;margin-left: 12%;letter-spacing:1px ;}
	section.why h3        {color: #191718;font-size: 1.5em; padding-bottom: 1%;margin-left:12% ;letter-spacing:1px ;}
	section.why figure    {padding-bottom: 8%; margin-right: 12%;}
	section.why  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
	section.why body { background: #ffffff; }


/*CALM Campaign for Animation Project (10 column grid)
----------------------------------------------------------------------------*/

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

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

section.calm p         {color:#191718;font-size:1.1em; text-align: left;margin-right: 12%;}
section.calm h3        {color:#191718;font-size: 1.5em; padding-bottom: 1%;}
section.calm figure    {padding-bottom: 8%; margin-left: 15%;}

section.calm   { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.calm body { background: #ffffff; }




/*Target Audience / Animation Project
----------------------------------------------------------------------------------------------------------------*/

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

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

section.targetanimy p         {color: #191718;font-size:1.1em; text-align: left;margin-left: 12%;letter-spacing:1px ;}
section.targetanim h3        {color: #191718;font-size: 1.5em; padding-bottom: 1%;margin-left:12% ;letter-spacing:1px ;}
section.targetanim figure    {padding-bottom: 8%; margin-right: 12%;}
section.targetanim { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.targetanim body { background: #ffffff; }


/*Hero image of us discussing for Animation Project (3column grid with right image CHANGED to one big image)
----------------------------------------------------------------------------------------------------------------*/
section.right {
	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:
	"fg fg fg fg"
	"fg fg fg 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.right figure	{ margin:0; padding: 0;}

section.right   { max-width: 100rem; margin: 0 auto; background: #ffffff; margin: 0;
  padding: 0;
  display: block; }
	section.right  body { background: #ffffff; }

/*Storyboard/ Developing process page(10 column grid/1 image (last storyboard)
--------------------------------------------------------------------------------------------*/

section.develop {
	display: grid;
	grid-template-columns:repeat(10, 1fr);
	grid-template-rows:minimax (2.5rem,auto) ;
	grid-column-gap:2rem;
	grid-row-gap:0.625;
	grid-template-areas:
	"hd hd hd hd hd fg fg fg fg fg"
	"dv dv dv dv dv fg fg fg fg fg";
}

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

section.develop p      {color:#191718;font-size:1.1em;margin-left: 12%; text-align: left;margin-bottom: 9%;}
section.develop h3     {color:#191718;font-size:1.5em;margin-left: 12%;}
section.develop figure {padding-bottom:5%;margin-right: 15%;}

section.develop   { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.develop  body { background: #ffffff; }

/*All six storyboards 3 column grid for animation project
-----------------------------------------------------------------------------------------*/
section.storyboard {
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows:auto;
	grid-gap: 0rem;
	grid-row-gap:0rem;
	grid-template-areas:
	"f1 f2"
	"f3 f4"
}

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

section.storyboard   { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.storyboard  body { background: #ffffff; }

/*Final Storyboard for animation project
-------------------------------------------------------------------------------------------------*/

section.finalstoryboard {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows:auto;
	grid-gap: 0rem;
	grid-row-gap:0rem;
	grid-template-areas:
	"fg fg fg"
	"fg fg fg"
}

section.finalstoryboard figure { grid-area:fg }


section.finalstoryboard   { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.finalstoryboard  body { background: #ffffff; }




/* Character Designs for Animation project
-----------------------------------------------------------------------------------------------*/


section.illustrations {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows:auto;
	grid-gap: 0rem;
	grid-row-gap:0rem;
	grid-template-areas:
	"fg fg fg"
	"fg fg fg";
}

section.illustrations figure { grid-area:fg }


section.illustrations figure { padding: 5%;}

section.illustrations  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.illustrations  body { background: #ffffff; }



/*  Designs explanation for Animation project
-----------------------------------------------------------------------------------------------*/


section.illustrationsexplain{ 

		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 10rem;
		grid-row-gap: 0;
		grid-template-areas:
		"hd hd hd"
		"dv dv dv";
	}

	section.illustrationsexplain h3		{ grid-area: hd; }
	section.illustrationsexplain div		{ grid-area: dv; }
	
	section.illustrationsexplain div h3	{ color: #191718;font-size:1.5em; margin-left:7%; letter-spacing:1px;}
	section.illustrationsexplain div p		{ color: #191718;font-size:1.1em;margin-left:7%;letter-spacing:1px ; }
	section.illustrationsexplain  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
	section.illustrationsexplain body { max-width: 100rem;background: #ffffff; }
	

/* Procreate GIFS
--------------------------------------------------------------------------------------- */	

section.procreategif {
		display: grid;
		grid-template-columns: (1fr 1fr 1fr);
		grid-template-rows: minmax(2.5rem, auto);
		grid-column-gap: 2rem;
		grid-row-gap: 0;
		grid-template-areas:
		"f1 f2 dv"
		"f3 f4 dv";
	}
	
	section.procreategif h3		        { grid-area: hd; }
	section.procreategif figure.one	    { grid-area: f1; }
	section.procreategif figure.two	    { grid-area: f2; }
	section.procreategif figure.three	{ grid-area: f3; }
	section.procreategif figure.four	{ grid-area: f4; }
	section.procreategif div	        { grid-area: dv; }



	
	section.procreategif figure {padding-top: 1%;padding-left: 25%;}
	
	section.procreategif div h3	{ color: #191718;font-size:1.5em; margin-right:10%; letter-spacing:1px ;}
	section.procreategif div p	{ color: #191718;font-size:1.1em;margin-right:10%;letter-spacing:1px ;padding-right: 12%; }


	section.procreategif   { max-width: 100rem; margin: 0 auto; background: #ffffff; }
	section.procreategif body { background: #ffffff; }


/*  Door Scene GIF for Animation project
-----------------------------------------------------------------------------------------------*/


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

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



section.doorscene figure  {padding:5%;padding-right:18% ;}
section.doorscene div h3	{ color: #191718;font-size:1.5em; margin-left:14%; letter-spacing:1px;padding-top:5% ;}
section.doorscene div p	{ color: #191718;font-size:1.1em;margin-left:14%;letter-spacing:1px ; }


section.doorscene  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.doorscene body { background: #ffffff; }


/*Colour Scheme for animation project
-------------------------------------------------------------------------------------------------*/

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

section.colourscheme figure.one   { grid-area: f1; }
section.colourscheme figure.two   { grid-area: f2; }
section.colourscheme figure.three { grid-area: f3; }


section.colourscheme   { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.colourscheme  body { background: #ffffff; }


/*Door Frame uncoloured for animation project
-------------------------------------------------------------------------------------------------*/

section.doorframeuncoloured {
	display:grid;
	grid-template-columns: repeat(4 1fr);
	grid-template-rows:auto;
	grid-gap: 1rem;
	grid-row-gap:0.5rem;
	grid-template-areas:
	"f1 f2 f3 f4"
	
	
}

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

section.doorframeuncoloured  figure  { padding: 1%; }

section.doorframeuncoloured    { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.doorframeuncoloured   body { background: #ffffff; }


/*Door Frame coloured for animation project
-------------------------------------------------------------------------------------------------*/

section.doorframe {
	display:grid;
	grid-template-columns: repeat(4 1fr);
	grid-template-rows:auto;
	grid-gap: 1rem;
	grid-row-gap:0.5rem;
	grid-template-areas:
	"f1 f2 f3 f4"
	
	
}

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

section.doorframe  figure  { padding: 1%; }

section.doorframe    { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.doorframe   body { background: #ffffff; }


/* Final Colour Scheme for animation project
--------------------------------------------------------------------------------------- */	

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

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




section.finalcolourscheme figure  {padding-right:10%;padding-top: 1%;}
section.finalcolourscheme div h3	{ color: #191718;font-size:1.5em; letter-spacing:1px ;padding-left: 15%;}
section.finalcolourscheme div p	{ color: #191718;font-size:1.1em;margin-right:10%;letter-spacing:1px ;padding-left: 15%; }


section.finalcolourscheme   { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.finalcolourscheme body { background: #ffffff; }

/*  Character Facial Expression for Animation Project
--------------------------------------------------------------------------------------- */	
section.facialexp {
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows:auto;
	grid-gap: 0rem;
	grid-row-gap:0rem;
	grid-template-areas:
	"f1 f2"
	
}

section.facialexp figure.one   { grid-area: f1; }
section.facialexp figure.two   { grid-area: f2; }



section.facialexp   { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.facialexp  body { background: #ffffff; }



/*  Character Facial Expression EXPLANATION for Animation Project
--------------------------------------------------------------------------------------- */
section.expexplain {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 10rem;
	grid-row-gap: 0;
	grid-template-areas:
	"hd hd hd"
	"dv dv dv";
}

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

section.expexplain div h3	{ color: #191718;font-size:1.5em; margin-left:7%; letter-spacing:1px;}
section.expexplain div p		{ color: #191718;font-size:1.1em;margin-left:7%;letter-spacing:1px ; }
section.expexplain  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.expexplain body { max-width: 100rem;background: #ffffff; }


/*  section.video Animatic of Animation Project
--------------------------------------------------------------------------------------- */	
section.videoanimatic  {
	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";
}

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

section.videoanimatic figure	{ padding:10%; }
section.videoanimatic div		{ background: transparent; }
section.videoanimatic p			{ color:#191718;font-size:1.1em; margin-left: 6%; }
section.videoanimatic h3		{ color:#191718;font-size:1.5em;padding:1rem;margin-left: 5%; }

section.videoanimatic  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.videoanimatic body { background: #ffffff; }

/*  Final Display of Animation of Animation Project
--------------------------------------------------------------------------------------- */	
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			{ color:#191718;font-size:1.1em; margin-left: 6%; }
section.video h3		{ color:#191718;font-size:1.5em;padding:1rem;margin-left: 5%; }

section.video  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.video body { background: #ffffff; }




/*Screenshots of Process for Animation Project
-------------------------------------------------------------------------------------------------*/

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

section.screenshots figure.one   { grid-area: f1; }
section.screenshots figure.two   { grid-area: f2; }



section.screenshots   { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.screenshots  body { background: #ffffff; }



/* Contribution For Animation
--------------------------------------------------------------------------------------- */
section.contri {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 10rem;
	grid-row-gap: 0;
	grid-template-areas:
	"hd hd hd"
	"dv dv dv";
}

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

section.contri div h3	{ color: #191718;font-size:1.5em; margin-left:7%; letter-spacing:1px;}
section.contri div p		{ color: #191718;font-size:1.1em;margin-left:7%;letter-spacing:1px ; }
section.contri  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.contri body { max-width: 100rem;background: #ffffff; }



/*  Self Reflection for Animation project and Website Project
-----------------------------------------------------------------------------------------------*/


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

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



section.ref figure  {padding:5%;padding-right:18% ;}
section.ref div h3	{ color: #191718;font-size:1.5em; margin-left:14%; letter-spacing:1px;padding-top:5% ;}
section.ref div p	{ color: #191718;font-size:1.1em;margin-left:14%;letter-spacing:1px ; }


section.ref  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.ref body { background: #ffffff; }

/* Other projects interested in
--------------------------------------------------------------------------------------- */


section.otherprojects {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"hd hd ..";}


.otherprojects h2 {
	font-size: 1.5em;
		line-height: 90%;
		letter-spacing:1px;
	text-align: left;
	margin-left:11%; }

	.otherprojects h3 {
		font-size: 1.1em;
			line-height: 90%;
			letter-spacing:1px;
		text-align: left;
		padding-top: 3%;
	}

.otherprojects figure.one { padding: 3%;}
.otherprojects figure.two { padding: 3%;}
.otherprojects figure.three { padding: 3%;}
.otherprojects figure.four { padding: 3%;}


	section.otherprojects h2  { grid-area:hd }
	section.otherprojects div { grid-area:dv }


	section.otherprojects div p  { font-family:Clash Display;font-size:2em;text-align: center;line-height: 50%; }
    section.otherprojects div p2 { font-family:Clash Display; font-size:1em;text-align: left; padding-left: 10%;}


	.otherprojects figure {transition:opacity 0.3s ease-in-out; scale: 0.3s ease-in-out; transform:0.3s ease-in-out;}
	.otherprojects figure:hover{opacity:0.5; transform: scale(1.05);}


/* Images of other projects at bottom of animation project
--------------------------------------------------------------------------------------- */



section.bottomofanimation {
		display: grid;
		grid-template-columns:(1fr 1fr 1fr);
		grid-template-rows:auto;
		grid-column-gap:1rem;
		grid-row-gap:3;
		background:transparen;
		grid-template-areas:
		"f1 f2 f3"
		"h1 h2 h3"
		"d1 d2 d3";
	}
	
	section.bottomofanimation figure.one    { grid-area: f1; }
	section.bottomofanimation figure.two    { grid-area: f2; }
	section.bottomofanimation figure.three  { grid-area: f3; }
	
	section.bottomofanimation h1            { grid-area: hd; }
	
	
	section.bottomofanimation figure	{ margin:0; padding:0;}


/* Contacts at the bottom of Animation Project
--------------------------------------------------------------------------------------- */

section.contactinanimation {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	".. hd .."
    ".. dv ..";}


.contactinanimation h2 { font-size: 9em;
		line-height: 90%;
		padding-bottom: 5%; }




	section.contactinanimation h2  { grid-area:hd }
	section.contactinanimation div { grid-area:dv }


	section.contactinanimation div p  { font-family:Clash Display;font-size:2em;text-align: center;line-height: 50%; }
    section.contactinanimation div p2 { font-family:Clash Display; font-size:1em;text-align: left; padding-right: 10%;}






	/* Contacts at the bottom of Animation Project
--------------------------------------------------------------------------------------- */

.newhome2{
	text-align: center;
	position: absolute;
	top: 40%;
	left: 50%;
	transform:translate(-50%,-40%);

	


}

.newhome2text{
	color: #191718;

}

.container span{
	display: block;
}




.text1 {

	font-size: 10rem;
	font-weight: 700;
	letter-spacing: 5px;
	margin-bottom: -13px;
    line-height: 80%;
	color: #191718;
	background: #ffffff;
	position: relative;
	animation: text 3s 1;
	transition:all 0.3s ease;






}


.text1:hover{
	font-size: 10.5rem;
	transition:all 0.3s ease;
	font-weight: 700;
	letter-spacing:5px;
	margin-bottom: -13px;
	color: #191718;
	background: #ffffff;
	position: relative;
	animation: text 3s 1;



}



.text2 {
	font-size: 40px;
	font-weight: 500;
	letter-spacing: 8px;
	margin-bottom: -74px;
	color: #191718;
	transition:all 0.3s ease;
	padding-top: 3%;
	

}




.text2:hover {
	font-size: 43px;
	transition:all 0.3s ease;
	font-weight: 500;
	letter-spacing: 8px;
	margin-bottom: -74px;
	color: #191718;
	

}


.othertext {
	font-size: 30px;
	font-weight: 500;
	letter-spacing: 5px;
	text-align: center;
    display: block;
	color: #191718;

}

@keyframes othertext {
	from{ 
		opacity: 1;
		scale:0.2;
	}
	to{
		opacity: 1;
		scale: 1;
	}
}







@keyframes text{
	0%{
		color: #191718;
		margin-bottom: -80px;

	}
	30%{
		 letter-spacing: 20px;
		 margin-bottom: -80px;
	}
	85%{
		letter-spacing: 5px;
		margin-bottom: -80px;
	}
}
























.newhome {
	max-width: 100%;      
	opacity: 0; /* start invisible */
    animation: fadeIn 2s ease forwards; /* run once over 5s */
	
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; };
	  
	

}
.newhometext{ 
	
	position: absolute;
	top: 45%;
	text-align: left;
	padding-left: 5%;
	font-size: 2rem;
	line-height: 130%;
	word-spacing: normal;
		opacity: 0; /* start invisible */
    animation: fadeIn 2s ease forwards; /* run once over 5s */
	
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; };
	
	


}
@keyframes autoBlurAnimation{
	0%{
		filter: blur(20px);
	}
	35%,65%{
		filter: blur(0px);
	}
	100%{
		filter: blur(20px);
	}

}

.fade-text {
		opacity: 0; /* start invisible */
    animation: fadeIn 2s ease forwards; /* run once over 5s */
	
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; };
}








.fade-text {
      font-size: 2em;
      opacity: 0; /* start invisible */
      animation: fadeIn 4s ease forwards; /* run once over 5s */
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }





.autoBlur{
	animation: autoBlurAnimation linear both;
	animation-timeline: view();
}
@keyframes autoBlurAnimation{
	0%{
		filter: blur(40px);
	}
	45%,55%{
		filter: blur(0px);
	}
	100%{
		filter: blur(40px);
	}

}








.autoBlur2{
	animation: autoBlurAnimation linear both;
	animation-timeline: view();
}
@keyframes autoBlurAnimation{
	0%{
		filter: blur(20px);
	}
	35%,65%{
		filter: blur(0px);
	}
	100%{
		filter: blur(20px);
	}

}


/* Footer
-------------------------------------------------------------------------*/

section.footer {
	padding: 100px;
	text-align: left;
	position: absolute;
	bottom: 20%;
	right:7%;
	}

.footer p {color: #F0EFF4;font-size:0.7rem ;}





/* Projects Title 
-------------------------------------------------------------------------*/

section.projectitle{
	display: grid;
	grid-template-columns:(1fr, 1fr, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:

	"hd hd hd"
}

.projectitle h2 {grid-area: hd;}

.projectitle h2 {font-size: 17em; text-align: center;}







/* New projects Page grid layout
--------------------------------------------------------------------------------*/
section.newprojects {
	display: grid;
	grid-template-columns: repeat(15, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:

	"f1 f1 f1 f1 f1 f1 f1 f1 f1 f2 f2 f2 f2 f2 f2"
	"f3 f3 f3 f3 f3 f3 f4 f4 f4 f4 f4 f4 f4 f4 f4"
	"f5 f5 f5 f5 f5 f5 f5 f5 f5 f6 f6 f6 f6 f6 f6"
	"f7 f7 f7 f7 f7 f7 f8 f8 f8 f8 f8 f8 f8 f8 f8"
	"f9 f9 f9 f9 f9 f9 f9 f9 f9 f10 f10 f10 f10 f10 f10"
	"f11 f11 f11 f11 f11 f11 f11 f11 f11 f11 f11 f11 f11 f11 f11"
	
}

.newprojects figure.one   { grid-area: f1; }
.newprojects figure.two   { grid-area: f2; }
.newprojects figure.three { grid-area: f3; }
.newprojects figure.four  { grid-area: f4; }
.newprojects figure.five  { grid-area: f5; }
.newprojects figure.six   { grid-area: f6; }
.newprojects figure.seven   { grid-area: f7; }
.newprojects figure.eight   { grid-area: f8; }
.newprojects figure.nine   { grid-area: f9; }
.newprojects figure.ten   { grid-area: f10; }
.newprojects figure.eleven   { grid-area: f11; }


.newprojects figure {
	border-radius:50%;
	transition:opacity 0.3s ease-in-out;
	scale: 0.3s ease-in-out; 
	transition:all 0.3s ease;
}

.wrapper p { 
	font-size: 1.3rem ;
	text-align: left;
	display: flex;
	position: relative;}

.newprojects figure:hover{
	
	transition:all 0.3s ease;
	transform: scale(1.03);}

.content p { font-size: 1.1em;
	position:absolute;
	align-items: center;
	justify-content: center;
padding-left: 10%;
padding-top: 80%;
opacity: 0;} 



.content:hover p { font-size: 1.1em;
	color: #191718;
	position:absolute;
	align-items: center;
	justify-content: center;
padding-left: 10%;
padding-top: 80%;
opacity: 100;
transition: all 0.3s ease;} 



















	










.one {
	animation:appear 5s linear;
	animation-timeline: view();
	animation-range: entry 0% cover 40%;
}
.two {
	animation:appear 5s linear;
	animation-timeline: view();
	animation-range: entry 0% cover 40%;
}
.three {
	animation:appear 5s linear;
	animation-timeline: view();
	animation-range: entry 0% cover 40%;
}
.four {
	animation:appear 5s linear;
	animation-timeline: view();
	animation-range: entry 0% cover 40%;
}
.five {
	animation:appear 5s linear;
	animation-timeline: view();
	animation-range: entry 0% cover 40%;
}
.six {
	animation:appear 5s linear;
	animation-timeline: view();
	animation-range: entry 0% cover 40%;
}
.seven {
	animation:appear 5s linear;
	animation-timeline: view();
	animation-range: entry 0% cover 40%;
}
.eight {
	animation:appear 5s linear;
	animation-timeline: view();
	animation-range: entry 0% cover 40%;
}



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

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


section.projects div p{line-height:50%;letter-spacing:1px ;font-size: 1em;}
section.projects h3  {font-size: 1.5rem;letter-spacing:1px ;padding-top: 3%;}

section.projects figure.one { margin-left: 17%;  }
section.projects figure.two { margin-right: 17%; }
section.projects figure.three { margin-left: 17%; }
section.projects figure.four { margin-right: 17%; }
section.projects figure.five { margin-left: 17%; }
section.projects figure.six { margin-right: 17%; }

.projects figure {transition:opacity 0.3s ease-in-out; scale: 0.3s ease-in-out; transform:0.3s ease-in-out;border-radius: 50%;}
.projects figure:hover{opacity:0.5; transform: scale(1.05);}


	/*
*{
	margin:0px;
	padding:0px;
	box-sizing:border-box;
	font-family:Clash Display;
}

.wrapper  {
    width:100%;
	height:50vh;
    display:flex;
	justify-content: center;
	align-items: center;

}
.image{
	width:650px;
	position:relative;
	margin:auto;
	

}


.img{

	display:block;
}
.content{
	width:100%;
	height:100%;
	top:0;
	left:0;
	position:absolute;
	background:rgba(10, 10, 10, 0.6);
	border-radius: 25px;
	display:flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	opacity: 0;
	transition:0.6s;
}
.content:hover{
	opacity:3;
	
}
.content h3{
	font-size: 25px;
	letter-spacing:1px ;
	color: #afafaf;
	margin-bottom :15px;
	text-align: center;
}
.content p{
	font-size:15px;
	color:#afafaf;
	text-align: center;
}
.content >*{
	transform:translateY(25px);
	transition:transform 0.6s;
}
.content:hover> *{
	transform:translateY(0px);
	
}

/*New Hover Experiment
--------------------------------------------------------------------------------------*/




/*Official Contact Page
--------------------------------------------------------------------------------------*/
section.contact {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
    "dv dv dv"
	"dv dv dv"
}



section.contact h2 { font-size: 9em;
		line-height: 90%;
		padding-bottom: 5%; }

	section.contact h2  { grid-area:hd }
	section.contact div { grid-area:dv }

	section.contact div { letter-spacing: 1px;}

	section.contact div p  { font-family:Clash Display;font-size:3em;line-height: 80%;text-align: center; }





	/* Contact Page Combined with About me Page
--------------------------------------------------------------------------------------*/
section.aboutcontact {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	".. hd .."
    ".. dv .."
    }


section.aboutcontact h2 { font-size: 9em;
		line-height: 90%;
		padding-bottom: 5%; }

	section.aboutcontact h2  { grid-area:hd }
	section.aboutcontact div { grid-area:dv }

	section.aboutcontact div { letter-spacing: 1px;}

	section.aboutcontact div p  { font-family:Clash Display;font-size:2em;line-height: 50%;text-align: center; }
    section.aboutcontact div p2 { font-family:Clash Display; font-size:1em;text-align: left;padding-right: 10%;}



/*  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; }
}
div.about img {
aspect-ratio: 2/6;
width: 140%; 
height: auto;}






	/*   Project 2 Website Portfolio Project hero image
--------------------------------------------------------------------------------------- */
section.webhero {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 10rem;
	grid-row-gap: 0;
	grid-template-areas:
	"fg fg fg"

}
section.webhero figure	{ grid-area: fg; }
section.webhero  { max-width: 100rem; margin: 0 auto; background: #ffffff;  margin: 0;
  padding: 0;
  display: block;}
section.webhero body { max-width: 100rem;background: #ffffff; }


/*  intro project 3 Website Project brief and response
--------------------------------------------------------------------------------------- */


section.three {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 10rem;
	grid-row-gap: 0;
	grid-template-areas:
	"hd hd hd"
	"dv dv dv";
}

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

section.three div h3	{ color: #191718;font-size:1.5em; margin-left:7%; letter-spacing:1px;}
section.three div p		{ color: #191718;font-size:1.1em;margin-left:7%;letter-spacing:1px ; }
section.three  { max-width: 100rem; margin: 0 auto; background: #F0EFF4; }
section.three body { max-width: 100rem;background: #F0EFF4; }

/* Approaching the project Website Project
--------------------------------------------------------------------------------------- */	

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

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

section.approach p         {color: #191718;font-size:1.1em; text-align: left;margin-left: 15%;letter-spacing:1px ;}
section.approach h3        {color: #191718;font-size: 1.5em; padding-bottom: 1%;margin-left:15% ;letter-spacing:1px ;}
section.approach figure    {padding-bottom: 8%; margin-right: 12%;}
section.approach  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.approach body { background: #ffffff; }



/*  Website Purpose for Website Project
--------------------------------------------------------------------------------------- */	


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

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

section.websitepurpose p         {color: #191718;font-size:1.1em; text-align: left;margin-right: 12%;letter-spacing:1px ;}
section.websitepurpose h3        {color: #191718;font-size: 1.5em; padding-bottom: 1%;letter-spacing:1px ;}
section.websitepurpose figure    {padding-top: 4%; margin-left: 15%;}

section.websitepurpose  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.websitepurpose body { background: #ffffff; }



/* Structuring the website/  Website Project
--------------------------------------------------------------------------------------- */	

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

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

section.websitestructure p         {color: #191718;font-size:1.1em; text-align: left;margin-left: 15%;letter-spacing:1px ;}
section.websitestructure h3        {color: #191718;font-size: 1.5em; padding-bottom: 1%;margin-left:15% ;letter-spacing:1px ;}
section.websitestructure figure    {padding-bottom: 8%; margin-right: 12%;}
section.websitestructure  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.websitestructure body { background: #ffffff; }


	/*  Youtube Screenshot
--------------------------------------------------------------------------------------- */
section.youtubescreen {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 10rem;
	grid-row-gap: 0;
	grid-template-areas:
	"fg fg fg"

}
section.youtubescreen figure	{ grid-area: fg; }
section.youtubescreen  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.youtubescreen body { max-width: 100rem;background: #ffffff; }


/*Website wireframes for Website Project
-------------------------------------------------------------------------------------------------*/

section.wireframe {
	display:grid;
	grid-template-columns: (1fr 1fr);
	grid-template-rows:auto;
	grid-gap: 0;
	grid-row-gap:0;
	grid-template-areas:
	"f1 f2";
	
}

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

section.wireframe    { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.wireframe   body { background: #ffffff; }



/*  Website wireframe Explanation for Website Project
--------------------------------------------------------------------------------------- */


section.wireframeexp {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 10rem;
	grid-row-gap: 0;
	grid-template-areas:
	"hd hd hd"
	"dv dv dv";
}

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

section.wireframeexp div h3	{ color: #191718;font-size:1.5em; margin-left:7%; letter-spacing:1px;}
section.wireframeexp div p		{ color: #191718;font-size:1.1em;margin-left:7%;letter-spacing:1px ; }
section.wireframeexp  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.wireframeexp body { max-width: 100rem;background: #ffffff; }




/*Website Layout Sketches for Website Project
-------------------------------------------------------------------------------------------------*/

section.websitesketches {
	display:grid;
	grid-template-columns: (1fr 1fr 1fr);
	grid-template-rows:auto;
	grid-gap: 0;
	grid-row-gap:0;
	grid-template-areas:
	"f1 f2 f3"
	
	
}

section.websitesketches  figure.one   { grid-area: f1; }
section.websitesketches  figure.two   { grid-area: f2; }
section.websitesketches  figure.three { grid-area: f3; }

section.websitesketches    { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.websitesketches   body { background: #ffffff; }




/*Design Concepts for Website Project
-------------------------------------------------------------------------------------------------*/

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

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

section.websitedesign p         {color: #191718;font-size:1.1em; text-align: left;margin-left: 15%;letter-spacing:1px ;}
section.websitedesign h3        {color: #191718;font-size: 1.5em; padding-bottom: 1%;margin-left:15% ;letter-spacing:1px ;}
section.websitedesign figure    {padding-bottom: 8%; margin-right: 12%;}
section.websitedesign  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.websitedesign body { background: #ffffff; }



/*Initial Website Layouts for Website Project
-------------------------------------------------------------------------------------------------*/

section.initialweb {
	display:grid;
	grid-template-columns: (1fr 1fr);
	grid-template-rows:auto;
	grid-gap: 1rem;
	grid-row-gap:0;
	grid-template-areas:
	"f1 f2"
	
	
}

section.initialweb   figure.one   { grid-area: f1; }
section.initialweb   figure.two   { grid-area: f2; }


section.initialweb     { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.initialweb   body { background: #ffffff; }



/*  Home Page Experimentation for Website Project
--------------------------------------------------------------------------------------- */	


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

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

section.homepageexp p         {color: #191718;font-size:1.1em; text-align: left;margin-right: 12%;letter-spacing:1px ;}
section.homepageexp h3        {color: #191718;font-size: 1.5em; padding-bottom: 1%;letter-spacing:1px ;}
section.homepageexp figure    {padding-bottom: 10%; margin-left: 15%;}

section.homepageexp  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.homepageexp body { background: #ffffff; }






/*Contact&About me Experimentation Layout for Website Project
-------------------------------------------------------------------------------------------------*/

section.contactabout {
	display:grid;
	grid-template-columns: (1fr 1fr);
	grid-template-rows:auto;
	grid-gap: 0.5rem;
	grid-row-gap:0;
	grid-template-areas:
	"f1 f2"
	"f3 f4";
	
	
}

section.contactabout   figure.one   { grid-area: f1; }
section.contactabout   figure.two   { grid-area: f2; }


section.contactabout     { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.contactabout   body { background: #ffffff; }




/*  Contact&About me Experimentation Explanation for Website Project
--------------------------------------------------------------------------------------- */


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

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

section.contactaboutexp p         {color: #191718;font-size:1.1em; text-align: left;margin-left: 15%;letter-spacing:1px ;}
section.contactaboutexp h3        {color: #191718;font-size: 1.5em; padding-bottom: 1%;margin-left:15% ;letter-spacing:1px ;}
section.contactaboutexp figure    {padding-bottom: 8%; margin-right: 12%;}
section.contactaboutexp  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.contactaboutexp body { background: #ffffff; }



/*Chosen Fonts for Website Project
-------------------------------------------------------------------------------------------------*/

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

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

section.fontchoice p         {color: #191718;font-size:1.1em; text-align: left;margin-left: 15%;letter-spacing:1px ;}
section.fontchoice h3        {color: #191718;font-size: 1.5em; margin-top: 8%;margin-left:15% ;letter-spacing:1px ;}
section.fontchoice figure    {padding-bottom: 8%; margin-right: 12%;}
section.fontchoice  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.websitedesign body { background: #ffffff; }



/*  Color Scheme for Website Project
--------------------------------------------------------------------------------------- */
section.colscheme {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 10rem;
	grid-row-gap: 0;
	grid-template-areas:
	"fg fg fg"

}
section.colscheme figure	{ grid-area: fg; }
section.colscheme  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.colscheme body { max-width: 100rem;background: #ffffff; }





/*  Image of Coding for Website Project
--------------------------------------------------------------------------------------- */


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

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

section.imgcode p         {color: #191718;font-size:1.1em; text-align: left;margin-left: 15%;letter-spacing:1px ;}
section.imgcode h3        {color: #191718;font-size: 1.5em; padding-bottom: 1%;margin-left:15% ;letter-spacing:1px ;}
section.imgcode figure    {padding-bottom: 8%; margin-right: 12%;}
section.imgcode  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.imgcode body { background: #ffffff; }




/*  Image of Code Inspect for Website Project
--------------------------------------------------------------------------------------- */
section.imginspect {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 10rem;
	grid-row-gap: 0;
	grid-template-areas:
	"fg fg fg"

}
section.imginspect figure	{ grid-area: fg; }
section.imginspect  { max-width: 100rem; margin: 0 auto; background: #ffffff;  margin: 0;
  padding: 0;
  display: block;}
section.imginspect body { max-width: 100rem;background: #ffffff; }




/*  screenshot  of Code for Website Project
--------------------------------------------------------------------------------------- */
section.scr {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 0.5rem;
	grid-row-gap: 0;
	grid-template-areas:
	"f1 f2";

}
section.scr figure.one	{ grid-area: f1; }
section.scr figure.two	{ grid-area: f2; }
section.scr  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.scr body { max-width: 100rem;background: #ffffff; }




/*  Image Laptop Mockup with second screen for Website Project
--------------------------------------------------------------------------------------- */
section.laptopmock {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 10rem;
	grid-row-gap: 0;
	grid-template-areas:
	"fg fg fg"

}
section.laptopmock figure	{ grid-area: fg; }
section.laptopmock  { max-width: 100rem; margin: 0 auto; background: #ffffff;  margin: 0;
  padding: 0;
  display: block;}
section.laptopmock body { max-width: 100rem;background: #ffffff; }

/*  Reflection for Website project and Website Project
-----------------------------------------------------------------------------------------------*/


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

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



section.refweb figure  {padding:15%;padding-right:18% ;}
section.refweb div h3	{ color: #ffffff;font-size:1.5em; margin-left:14%; letter-spacing:1px;padding-top:15% ;}
section.refweb div p	{ color: #ffffff;font-size:1.1em;margin-left:14%;letter-spacing:1px ; }


section.refweb  { max-width: 100rem; margin: 0 auto; background: #191718; }
section.refweb body { background: #191718; }




/*The Websites birth for Website Project
--------------------------------------------------------------------------------------- */


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

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

section.webbirth p         {color: #191718;font-size:1.1em; text-align: left;margin-left: 15%;letter-spacing:1px ;}
section.webbirth h3        {color: #191718;font-size: 1.5em; padding-bottom: 1%;margin-left:15% ;letter-spacing:1px ;}
section.webbirth figure    {padding-bottom: 8%; margin-right: 12%;}
section.webbirth  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.webbirth body { background: #ffffff; }


/*Collapsible (Bibliography for All)
--------------------------------------------------------------------------------------- */

.wrap{
 display: flex;
 padding-top: 50px;
 justify-content: center;
}

.collapsible {
	max-width: 1000px;
	max-height: 1000px;
	overflow:hidden;
	font-weight: 500;
	
	
}

.collapsible:hover{ transform: scale(1.05);}

.collapsible input{
	display:none;
}
.collapsible label{
	position:relative;
	font-weight: 600;
	background: #191718;
	box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .1), 0 4px 11px 0 rgba(0, 0, 0, .08);
    color: #ffffff;
	display: block;
	margin-bottom: 10px;
	cursor: pointer;
	padding: 15px;
	border-radius: 10px;
	z-index: 1;
	font-size: 1.5rem;
	text-align: center;
	transition:opacity 0.3s ease-in-out; scale: 0.3s ease-in-out; transform:0.3s ease-in-out;
}
.collapsible label:after{
	content:"";
	position:sticky;
	right: 15px;
	top:15px;
	width:18px;
	height:90px;
	background:url(about.html) no-repeat 0 0;
	transition: all 0.3s ease;
}
.collapsible input:checked + label:after{
 transform: rotate(90deg);
}


.collapsible-text {
	max-height:1px;
	overflow:hidden;
	border-radius:10px;
	line-height:1.2;
	position: relative;
	top:-100%;
	opacity: 0.5;
	transition: all 0.3s ease;
}

.collapsible input:checked ~ .collapsible-text{
	max-height:300px;
	padding-bottom: 25px;
	background:#191718;
	box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .1), 0 4px 11px 0 rgba(0, 0, 0, .08);
	opacity: 1;
	top:0;
}

.collapsible-text h3{
    margin-bottom:10px;
	padding:15px 15px 0;
	color: #ffffff;
	font-size: 1.5em;
}

.collapsible-text p{
	padding-left:15px;
	padding-right:15px;
	color: #ffffff;
	font-size: 1em;
	padding-top: 2%;
	line-height: 100%;
}




/* Blob Background Affect
---------------------------------------------------------------------------------------------*/


.blob:nth-child(1) {
  --angle-delay: 0s;
  --moving-delay: 0s;
  --color:#fefefe;
}

.blob:nth-child(2) {
	--angle-delay: -3s;
	--moving-delay: -2s;
	--color:#c47cff;
}

.blob:nth-child(3) {
	--angle-delay: -6s;
	--moving-delay: -4s;
	--color:#626E6A;
}

.blob:nth-child(4) {
	--angle-delay: -9s;
	--moving-delay: -6s;
	--color:#b0adc1;
}

.blob:nth-child(5) {
	--angle-delay: -12s;
	--moving-delay: -8s;
	--color:#F0B500;
}

.blob {
	position:relative;
	animation:angle 15s var(--angle-delay) infinite linear;
}

.blob::after {
 content:"";
 position: absolute;
 width:240px;
 aspect-ratio:1/1;
 border-radius: 50%;
 background-color: var(--color);
 filter:blur(70px);
animation:moving 10s var(--moving-delay) infinite ease-in-out alternate;

}

@keyframes angle{
	from{
		transform:rotate(0deg);	
	}
	to {
		transform:rotate(360deg);
	}
}

@keyframes moving{
	from{
		transform:translate(-50%, -150%);	
	}
	to {
		transform:translate(-50%, 50%);
	}
}

@media (max-width:600px) {
	.blob::after {
		width: 160px;
	}
}






/*  Project 5 LUSH Project hero image
--------------------------------------------------------------------------------------- */

section.PassageHero {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 10rem;
	grid-row-gap: 0;
	grid-template-areas:
	"fg fg fg"

}
section.PassageHero figure	{ grid-area: fg; }
section.PassageHero  { max-width: 100rem; margin: 0 auto; background: #ffffff; margin: 0;
  padding: 0;
  display: block; }
section.PassageHero body { max-width: 100rem;background: #ffffff; }


/*Moodboard for Passage
-------------------------------------------------------------------------------------------------*/

section.passagemoodboard {
	display:grid;
	grid-template-columns: (1fr 1fr 1fr);
	grid-template-rows:auto;
	grid-gap: 0;
	grid-row-gap:0;
	grid-template-areas:
	"f1 f1 f1";
	
}

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

section.passagemoodboard    { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.passagemoodboard   body { background: #ffffff; }


/*Sketch Experimentation 1 for Passage
-------------------------------------------------------------------------------------------------*/

section.passageexperimentation1 {
	display:grid;
	grid-template-columns: (1fr 1fr 1fr);
	grid-template-rows:auto;
	grid-gap: 0;
	grid-row-gap:0;
	grid-template-areas:
	"f1 f1 f1";
	
}

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

section.passageexperimentation1    { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.passageexperimentation1   body { background: #ffffff; }

/*Sketch Experimentation 2 for Passage
-------------------------------------------------------------------------------------------------*/

section.passageexperimentation2 {
	display:grid;
	grid-template-columns: (1fr 1fr 1fr);
	grid-template-rows:auto;
	grid-gap: 0;
	grid-row-gap:0;
	grid-template-areas:
	"f1 f1 f1";
	
}

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

section.passageexperimentation2    { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.passageexperimentation2   body { background: #ffffff; }


/* Colour Scheme for Passage
--------------------------------------------------------------------------------------- */	

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

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

section.colourschemepassage p         {color: #191718;font-size:1.1em; text-align: left;margin-left: 15%;letter-spacing:1px ;}
section.colourschemepassage h3        {color: #191718;font-size: 1.5em; padding-bottom: 1%;margin-left:15% ;letter-spacing:1px ;}
section.colourschemepassage figure    {padding-bottom: 8%; margin-right: 12%;}
section.colourschemepassage  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.colourschemepassage body { background: #ffffff; }



/*Packaging Experimentation for Passage
-------------------------------------------------------------------------------------------------*/

section.boxexperimentation {
	display:grid;
	grid-template-columns: (1fr 1fr 1fr);
	grid-template-rows:auto;
	grid-gap: 0;
	grid-row-gap:0;
	grid-template-areas:
	"f1 f1 f1";
	
}

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

section.boxexperimentation    { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.boxexperimentation   body { background: #ffffff; }



/*Brand Details for Passage
-------------------------------------------------------------------------------------------------*/

section.branddetailspassage {
	display:grid;
	grid-template-columns: (1fr 1fr 1fr);
	grid-template-rows:auto;
	grid-gap: 0;
	grid-row-gap:0;
	grid-template-areas:
	"f1 f1 f1";
	
}

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

section.branddetailspassage    { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.branddetailspassage   body { background: #ffffff; }



/*Second Hero image for Passage
-------------------------------------------------------------------------------------------------*/

section.secondheropassage {
	display:grid;
	grid-template-columns: (1fr 1fr 1fr);
	grid-template-rows:auto;
	grid-gap: 0;
	grid-row-gap:0;
	grid-template-areas:
	"f1 f1 f1";
	
}

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

section.secondheropassage    { max-width: 100rem; margin: 0 auto; background: #ffffff; margin: 0;
  padding: 0;
  display: block; }
section.secondheropassage   body { background: #ffffff; }


/*First Mockup for Passage
-------------------------------------------------------------------------------------------------*/

section.firstmockuppassage {
	display:grid;
	grid-template-columns: (1fr 1fr 1fr);
	grid-template-rows:auto;
	grid-gap: 0;
	grid-row-gap:0;
	grid-template-areas:
	"f1 f1 f1";
	
}

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

section.firstmockuppassage    { max-width: 100rem; margin: 0 auto; background: #ffffff;  margin: 0;
  padding: 0;
  display: block;}
section.firstmockuppassage   body { background: #ffffff; }


/*Second Mockup for Passage
-------------------------------------------------------------------------------------------------*/

section.secondmockuppassage {
	display:grid;
	grid-template-columns: (1fr 1fr 1fr);
	grid-template-rows:auto;
	grid-gap: 0;
	grid-row-gap:0;
	grid-template-areas:
	"f1 f1 f1";
	
}

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

section.secondmockuppassage    { max-width: 100rem; margin: 0 auto; background: #ffffff;  margin: 0;
  padding: 0;
  display: block;}
section.secondmockuppassage   body { background: #ffffff; }







/*Back to the topp scroll code
-------------------------------------------------------------------------------------------------*/

section.backToTopBtn {
	display: none;
	position: fixed;
	bottom: 40px;
	right: 40px;
	z-index: 100;
	font-size: 2em;
	font-family:Clash Display;
	border: none;
	outline: none;
	background-color: #191718;
	color: #191718;
	cursor: pointer;
	padding: 12px 18px;
	border-radius: 20%;
	box-shadow: 0 4px 8px rgba(0,0,0,0.3);
	transition: background-color 0.3s, transform 0.3s;
	
  }
  
  #backToTopBtn:hover {
	background-color: #ffffff;
	transform: scale(1.1);
	color: #777; text-decoration: underline; }
  





	/* Interviewing Students (Innovate Project)
--------------------------------------------------------------------------------------- */	

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

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

section.interviewingstudents p         {color: #191718;font-size:1.1em; text-align: left;margin-left: 15%;letter-spacing:1px ;}
section.interviewingstudents h3        {color: #191718;font-size: 1.5em; padding-bottom: 1%;margin-left:15% ;letter-spacing:1px ;}
section.interviewingstudents figure    {padding-bottom: 8%; margin-right: 12%;}
section.interviewingstudents  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.interviewingstudents body { background: #ffffff; }










/*Photographs for Innovate Project
-------------------------------------------------------------------------------------------------*/

section.Photographs {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 10rem;
	grid-row-gap: 0;
	grid-template-areas:
	"fg fg fg"

}
section.Photographs figure	{ grid-area: fg; }
section.Photographs  { max-width: 100rem; margin: 0 auto; background: #ffffff; margin: 2%;
  padding: 0;
  display: block; }
section.Photographs  figure { width: 115%;background: #ffffff; }

/*Photographs for Innovate Project
-------------------------------------------------------------------------------------------------*/

section.videoupdated {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 10rem;
	grid-row-gap: 0;
	grid-template-areas:
	"vd vd vd"

}
section.videoupdated video	{ grid-area: vd; }
section.videoupdated  { max-width: 120rem; margin: 0 auto; background: #ffffff; margin: 2%;
  padding: 0;
  display: block; }
section.Photographs  figure { width: 115%;background: #ffffff; }

/*Photographs for Innovate Project
-------------------------------------------------------------------------------------------------*/

section.videoupdatedforopen {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 10rem;
	grid-row-gap: 0;
	grid-template-areas:
	"vd vd vd"

}
section.videoupdatedforopen video	{ grid-area: vd; }
section.videoupdatedforopen         { max-width: 1230em; margin: 0 auto; background: #ffffff; ;padding: 0; display: block; }
section.Photographs  figure { width: 115%;background: #ffffff; }


	/* Karrie (Innovate Project)
--------------------------------------------------------------------------------------- */	

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

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

section.karrie p         {color: #191718;font-size:1.1em; text-align: left;margin-right: 15%;letter-spacing:1px ;}
section.karrie h3        {color: #191718;font-size: 1.5em; padding-top: 7%;margin-right:15% ;letter-spacing:1px ;}
section.karrie figure    {padding-top: 8%; margin-left: 12%;}
section.karrie  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.karrie body { background: #ffffff; }














	/* Route 1 (Innovate Project)
--------------------------------------------------------------------------------------- */	

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

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

section.route1 p         {color: #191718;font-size:1.1em; text-align: left;margin-left: 15%;letter-spacing:1px ;}
section.route1 h3        {color: #191718;font-size: 1.5em; padding-bottom: 1%;margin-left:15% ;letter-spacing:1px ;}
section.route1 figure    {padding-bottom: 8%; margin-right: 12%;}
section.route1  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.route1 body { background: #ffffff; }





	/* Route 2 (Innovate Project)
--------------------------------------------------------------------------------------- */	

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

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

section.route2 p         {color: #191718;font-size:1.1em; text-align: left;margin-right: 15%;letter-spacing:1px ;}
section.route2 h3        {color: #191718;font-size: 1.5em; padding-top: 7%;margin-right:15% ;letter-spacing:1px ;}
section.route2 figure    {padding-top: 8%; margin-left: 12%;}
section.route2  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.route2 body { background: #ffffff; }



	/* Route 3 (Innovate Project)
--------------------------------------------------------------------------------------- */	

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

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

section.route3 p         {color: #191718;font-size:1.1em; text-align: left;margin-left: 15%;letter-spacing:1px ;}
section.route3 h3        {color: #191718;font-size: 1.5em; padding-bottom: 1%;margin-left:15% ;letter-spacing:1px ;}
section.route3 figure    {padding-bottom: 8%; margin-right: 12%;}
section.route3  { max-width: 100rem; margin: 0 auto; background: #ffffff; }
section.route3 body { background: #ffffff; }





	/* TOP Title of project NEW WEBSITE DESIGN
--------------------------------------------------------------------------------------- */	


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

}

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



section.newtitles h3	{ color:#191718;font-size:7rem; margin-left:5%; letter-spacing:1px;padding-top:8% ;}

.projectlabel p1 {
	text-align: left;
	padding-left: 10%;
	color: #878787;
	font-size: 1.7em;
    
}



.projectlabel p2 {
	text-align: left;
	padding-left: 10%;
	color: #333;
	font-size: 1.2em;
    
}

/*(Illustration

--------------------------------*/


.carousel {
	margin:100px auto;
	width:90%;

	display:flex;
	overflow-x:auto ;
	gap: 1em;
}

.carouselimage {
	flex: 0 0 5em;
	height: 240px;	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;

	background:#652f92;
	font-size: 3rem;
	border-radius: 0.2em;


}



.group {
	display:flex;
	align-items:center;
	justify-content: center;
	gap:1em;
	animation: spin 5s infinite linear;
	padding-right:1em;
	
}

.card {
	flex: 0 0 5em;
	height: 5em;
	padding:1em;
	background:#652f92;
	font-size: 3rem;
	border-radius: 0.2em;
	text-align: center;
	align-content: center;
}
/*Contact Tings

--------------------------------*/



/* Container setup */
.contact-tings {
  position: relative;
  text-align: center;
}

/* Hide the checkbox */
.toggle-checkbox {
  display: none;
}

/* Contact button */
.contact-btn {
  display: inline-block;
  background-color: white;
  color: #191718;
  padding: 12px 28px;
  border: 2px solid white;
  border-radius: 25px;
  font-size: 16px;
  width: 180px;
  height: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-btn:hover {
  background-color: #191718;
  color: white;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Contact form (hidden by default) */
.contact-form {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  background-color: white;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  width: 620px;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}

/* Show form when checkbox is checked */
.toggle-checkbox:checked + .contact-btn + .contact-form {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}

/* Form content styling */
.contact-form h2 {
  margin-top: 0;
  font-size: 18px;
  color: #333;
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-form label {
  text-align: left;
  font-size: 14px;
  color: #555;
}

.contact-form input,
.contact-form textarea {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  font-size: 14px;
  resize: none;
}

.submit-btn {
  background-color: #191718;
  color: white;
  border: none;
  border-radius: 25px;
  padding: 10px;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-btn:hover {
  background-color: white;
  color: #191718;
}










/*Contact Tings 2

--------------------------------*/



/* Contact form (hidden by default) */
.contact-form2 {
  position: absolute;
  top: 170px;
  left: 50%;

  transform: translateX(-50%) scale(0.9);

  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  width: 920px;
  height: 480px;
  padding: 20px;


}






/* Form content styling */
.contact-form2 h2 {
  margin-top: 0;
  font-size: 60px;
  color: #191718;
  padding-bottom: 2%;
}

.contact-form2 form {
  display: flex;
  flex-direction: column;
  gap: 12px;

}

.contact-form2 label {
  text-align: left;
  font-size: 50px;
  color: #191718;
}

.contact-form2 input,
.contact-form2 textarea {
  border: 1px solid #191718;
  border-radius: 10px;
  padding: 10px;
  font-size: 17px;
  resize: none;
  height: 70px;
  padding-left: 3%;
  
}

.submit-btn2 {
  background-color: #191718;
  color: white;
  border: none;
  border-radius: 25px;
  padding: 10px;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  height: 60px;
}

.submit-btn2:hover {
  background-color: #777;
  color: #191718;
}