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

html {
scroll-behavior: smooth; }

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

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

body { background: #fffaee; }


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


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

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

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

@font-face {
	font-family: Poppins;
	src: url(fonts/Poppins/Poppins/Poppins-Light.ttf);
	font-weight: 500;
	font-style: normal;
	unicode-range: U+00-FF;
}

@font-face {
	font-family: Poppins;
	src: url(fonts/Poppins/Poppins/Poppins-Regular.ttf);
	font-weight: 600;
	font-style: normal;
	unicode-range: U+00-FF;
}

@font-face {
	font-family: Poppins;
	src: url(fonts/Poppins/Poppins/Poppins-SemiBold.ttf);
	font-weight: 700;
	font-style: normal;
	unicode-range: U+00-FF;
}

@font-face {
	font-family: Poppins;
	src: url(fonts/Poppins/Poppins/Poppins-Bold.ttf);
	font-weight: 800;
	font-style: normal;
	unicode-range: U+00-FF;
}

@font-face {
	font-family: Poppins;
	src: url(fonts/Poppins/Poppins/Poppins-Black.ttf);
	font-weight: 900;
	font-style: normal;
	unicode-range: U+00-FF;
}


body		{ font-family: Poppins, Arial, sans-serif; }
h1, h2, h3	{ font-family: Poppins, Arial, sans-serif;font-weight:700; font-size: 3rem; }
h2          { font-family: Poppins, Arial, sans-serif;font-weight:700; font-size: 3rem; text-align: center; }
p			{ font-family: Poppins, Arial, sans-serif; font-weight:500; line-height: 1.6rem; }
figcaption	{ font-family: Poppins, Arial, sans-serif; }


/*  top navigation section
--------------------------------------------------------------------------------------- */
nav 	{ padding: .5em 2.5svw; min-height: 4rem; border-bottom: 2px #eee solid;background: #7620E5;}
nav h1	{ font-size: 1.75rem; font-weight: 700; } 

nav a	{ white-space: nowrap; }

nav ul		{ list-style-type: none; }
nav ul li	{ font-size: 1.75rem; display: inline-block; margin-right: 1.5rem; }
nav {
	position: sticky;
	top: 0;
	z-index: 999;
}

nav h1 {
	max-width: 4rem;
}

/*  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; text-align: center;
	
	
}

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

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.8rem; font-weight: 500; max-width: 28em;}
/* p { line-height: 2.0625rem; } */ 


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

video	{ width: 100%; }

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


/*  link styling
--------------------------------------------------------------------------------------- */
a			{ color: #fffaee; text-decoration: none; }
a:visited	{ color: #fffaee; }
a:hover		{ color: #ffd039;  }
a:active	{ color: #EB652F; }

nav a			{ color: #fffaee; text-decoration: none; font-size: 1rem; }
nav a:visited	{ color: #fffaee; }
nav a:hover		{ color: #ffd039;  }
nav a:active	{ color: #fffaee; }

nav h1 a {font-size: 1.45rem;}

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

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


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

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


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

	nav h1	{ font-size: 1.75rem; margin-top: 0 ; 
	min-height: 2.5rem;   }

	nav ul { margin: 0;display: flex;
  align-items: center;
  padding:
1ex 0; }
	nav ul li { font-size: 1.75rem; margin: 0 0 0 1.25rem;display: flex; }


svg{
height:100%;
}
/*  main page title after top navigation
--------------------------------------------------------------------------------------- */
	
	.container > h2 { 
		font-size: 1rem;
		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 4rem 1.5rem; padding-top: 2rem;  }

	section figure { margin: 0; }

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


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

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


/*  simple 3 column grid
--------------------------------------------------------------------------------------- */
	section.three {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 2rem auto;
		grid-column-gap: 3rem;
		grid-row-gap: .5rem;
		grid-template-areas:
		"fg hd hd"
		"fg dv dv";
	}

	section.three h3		{ grid-area: hd; }
	section.three figure	{ grid-area: fg; }
	section.three div		{ grid-area: dv; }
	
	section.three h3		{ margin-top: -0.6rem; }
	section.three div		{ margin-top: 0; }
	
	
/*  simple 3 column grid
--------------------------------------------------------------------------------------- */
	section.three {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 2rem auto;
		grid-column-gap: 3rem;
		grid-row-gap: .5rem;
		grid-template-areas:
		"f1 hd f2"
		"f1 dv f2";
	}

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

/*  3 column grid with right hand image
--------------------------------------------------------------------------------------- */	
	section.my-try {
		display: grid;
		grid-template-columns: minmax(20rem, 1fr) 1fr 1fr;
		grid-template-rows: minmax(2rem, auto) auto;
		grid-column-gap: 1.5rem; grid-column-gap: 4rem;
		grid-row-gap: 0;
		grid-template-areas:
		"fg fg hd"
		"fg fg dv";
	}
	
	section.my-try p {padding-right: 3rem; font-size: 1rem; }
	section.my-try h3		{ grid-area: hd; }
	section.my-try figure	{ grid-area: fg; }
	section.my-try div		{ grid-area: dv; }

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


/*  wide right hand image spanning two columns
--------------------------------------------------------------------------------------- */
	section.wide {
		display: grid;
		grid-template-columns: minmax(10rem, 1fr) 1fr 1fr;
		grid-template-rows: minmax(2.5rem, auto);
		grid-column-gap: 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: 1rem; 
		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 page
--------------------------------------------------------------------------------------- */
	section.about {
	background-color: #7620e5;
	min-height: 50svh;
	display: block;
	padding-top: 6rem; 
	color: white;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 1.5rem;
	grid-row-gap: 0;
	grid-template-areas:
	    "fg fg fg fg fg . hd hd hd hd hd hd"
        "fg fg fg fg fg . dv dv dv dv dv dv";
	}
	
	section.about img{
	width:100%;
	height:auto;
	
	}

	
	section.about h3 {
	padding-left: 0rem;
  text-align: left;
  font-size:40pt;
	}
	
	
	
	
	section.about p {
	font-size: 1rem;
  line-height: 1.6rem;
  font-weight: 500;
  max-width: 30em;
  display: block;
	
	}


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

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

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


/*  home page auto grid
--------------------------------------------------------------------------------------- */		
section.home {
	display: flex;
	flex-flow: row wrap;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"h1 h1 h1"
	"h2 h3 h4";
}

section.home { padding: 0 .5rem 2rem; }

/* 
section.home figure.one   { grid-area: h1; }
section.home figure.two   { grid-area: h2; }
section.home figure.three { grid-area: h3; }
section.home figure.four  { grid-area: h4; }
 */
section.home figure {flex: 1 0 calc(50% - 0.5rem);position:relative;background-color: #8015ed;border-radius: 1rem;
	overflow: clip;}

section.home h3 {
	position: absolute;
	top: 50%;
	width: 100%;
	text-align:center;
	transform: translateY(-50%);
	opacity: 0;
	transition: opacity 0.5s;
	z-index: 1;
}

section.home figure img {
	aspect-ratio: 1920/1080;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: cover;
	transition: opacity 0.5s;
	display: block;
	
}

section.home figure:hover h3 {opacity: 1;}
section.home figure:hover img {opacity: 0.6;}


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

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


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

.home .purple {
	min-height: 80svh; 
	color: white;
	display: flex;
	align-items:center;
	padding: 0;
	justify-content: center;
}

.home .purple h2 {
	color: #fffaee;max-width:30ch; text-align: center;
}

section.yellow {
	background-color: #ffd039;
	min-height: 50svh;
	display: block;
	padding-top: 5rem;
	padding-bottom:3rem;
	padding-left: 10rem;
	color: white;
	margin-bottom: 1rem;
	align-content: center;
	margin-top: -1rem;
}
	
section.yellow p {
/* 	color: white;  */
	
}

section.yellow h3 {
/* color: white; */

}

section.orange {
	background-color: #EB652F;
	min-height: 50svh;
	display: block;
	padding-top: 4rem;
	padding-bottom:4rem;
	padding-left: 10rem;
	color: white;
	align-content: center;
}

section.purple {
	background-color: #7620e5;
	min-height: 50svh;
	display: block;
	padding-top: 4rem;
	padding-bottom:4rem;
	padding-left: 10rem;
	color: white;
	align-content: center;
}

/* purple with subtitle
-----------------------------------------------------------------*/
/* 
section.purpletwo {
	background-color: #7620e5;
	min-height: 50svh;
	display: grid;
	padding-top: 5rem; 
	padding-left: 10rem;
	color: white;
	align-content: center;
	grid-area: auto;
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 0;
	grid-template-areas: 
	"h2"
	"h3";
	
section.purpletwo header h2   {grid-area: h2;}
section.purpletwo div         {grid-area: h3;}
	
	
	
}
 */



div.project1 {
    display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto ;
	grid-gap: 1rem;
	padding-inline: 3rem;

	}

div.project1 img {
	aspect-ratio: 6/4;
}

div.japaneseschool-pics {
    display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto ;
	grid-gap: 1rem;
	padding-inline: 4rem;

	}

xdiv.japaneseschool-pics img {
	aspect-ratio: 4/4;
}

.khapli figure, .khapli section.yellow,.khapli div.project1, section.orange, .wheat figure, .experience figure, section.purple,soup-menue-apron {
	margin-bottom: 1rem;
}

section.text-only p {
  font-size: 1rem;
  line-height: 1.6rem;
  font-weight: 500;
  max-width: 45em;
  display: block;
  

}

section.text-only h3 {
padding-left: 0rem;
text-align: left;
}




section.left-text {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: minmax(2rem, auto) auto;
    grid-template-areas:
        "fg fg fg fg fg fg .. hd hd hd hd hd"
        "fg fg fg fg fg fg .. dv dv dv dv dv";  
    padding-bottom: 1rem;
    padding-top: 1rem;
          
    }
    
section.left-text h3 {
    
padding-top: 0rem;
text-align: left;
    }
    
section.left-text p {
font-size: 1rem;
/* margin: 0 1rem 1rem 1rem; */
  line-height: 1.6rem;
  font-weight: 500;
  max-width: 60em;
  display: block;
  text-align: left;
  
  }
  
figure:hover figcaption {
    display: flex;

}

div.left-text img {
    padding-right: 5rem;
    padding-bottom: 1rem;
    }
    
xdiv.left-text img {
	aspect-ratio: 4/4;
}




section.right-text {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: minmax(2rem, auto) auto;
    grid-template-areas:
        "hd hd hd hd hd hd .. fg fg fg fg fg"
        "dv dv dv dv dv dv .. fg fg fg fg fg";  
        padding-bottom: 1rem;
        padding-top: 1rem;
          
    }
    
section.right-text h3 {
    /* padding-right: 5rem; */
text-align: left;
    }
    
section.right-text p {
font-size: 1rem;
  line-height: 1.6rem;
  font-weight: 500;
  max-width: 50em;
  display: block;
 /*  padding-right: 5rem; */
  
  }

xfigure:hover figcaption {
    display: flex;
}

div.right-text img {
    padding-right: 5rem;
    padding-bottom: 1rem;
    }
    
xdiv.right-text img {
	aspect-ratio: 4/4;
}



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

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

	section.video-image div h3,
	section.video-image div p { font-size: 1.5rem; }
	
	
	
	
	
	

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

section.left-text img {
/* aspect-ratio: 16/9; */
width: 100%;
height: auto;

}	


section.right-text p {}
ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}





footer {
  background-color: #7620E5;
  font-size: 2rem;
  text-align: center;
  color: #fff9e0;
  padding: 2rem;
  min-width: 100vw;
}
footer h3 {
font-weight:500;
font-size:1.63rem;
}

footer a {
	font-weight: 700;
	font-size: 3rem;
}

.footer-text {
  text-align: center;
  color: #f1e7c1;
  font-family: Poppins, sans-serif;
  font-size: medium;
  display:block;
  padding-bottom:1rem;
}
.footer-text a {
font-size: 1rem;
font-weight: 400;
color:#FFF8E4;
}

.footer-text a:hover {
color:#FFCD00;
}

section.footer-text {
text-align: centre;
font-family: poppins;
display:center;

}

.rounded-corners {
	border-radius: 1rem;
	overflow: clip;
}

.audio h3 {
    /* padding-right: 5rem; */
text-align: left;
padding-bottom: 100rem;
    }
    
    
    
div.five {
    display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto ;
	grid-gap: 1rem;
	padding-inline: 3rem;

	}
/* 
.svg {
height:100%
}



	scroll-behavior: smooth;
	cursor: url('data:image/svg+xml,<svg id="uuid-c37d8df5-47c3-4de2-84d6-28a3bed15d68" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="50.5" cy="50.5" r="50" stroke="%231d1d1b" stroke-miterlimit="10"/></svg>') 16 0, auto;
}


html a:hover { 	cursor: url('data:image/svg+xml,<svg id="uuid-c37d8df5-47c3-4de2-84d6-28a3bed15d68" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 101 101"><circle cx="50.5" cy="50.5" r="50" stroke="%231d1d1b" stroke-miterlimit="10"/></svg>') 16 0, auto;
 
 */