/*  ============= WEB BROWSER RESETS ============ */

* { margin: 0; padding: 0; border: none }
*, *::before, *::after { box-sizing: border-box }
html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline;
scroll-behavior: smooth; scroll-padding-top: 20px }
body { /* max-width: 1920px; */ line-height: 1.5; margin-left: auto; margin-right: auto; 
min-height: 100vh; text-rendering: optimizeSpeed }  
img { width: 100%; height: auto; display: block }

/* Last element at bottom of section or footer */
section *:last-child, footer *:last-child { margin-bottom: 0 !important }

body { font-family: 'Inter', sans-serif }


  /* inter-300 - latin */
  @font-face {
	font-display: swap; 
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	src: url("../../assets/fonts/inter-v13-latin/inter-v13-latin-300.woff2") format('woff2'); 
  }
  
  /* inter-regular - latin */
  @font-face {
	font-display: swap; 
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	src: url("../../assets/fonts/inter-v13-latin/inter-v13-latin-regular.woff2") format('woff2'); 
  }
  
  /* inter-500 - latin */
  @font-face {
	font-display: swap; 
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	src: url("../../assets/fonts/inter-v13-latin/inter-v13-latin-500.woff2") format('woff2'); 
  }
  
  /* inter-600 - latin */
  @font-face {
	font-display: swap; 
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	src: url("../../assets/fonts/inter-v13-latin/inter-v13-latin-600.woff2") format('woff2'); 
  }
  
  /* inter-700 - latin */
  @font-face {
	font-display: swap; 
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	src: url("../../assets/fonts/inter-v13-latin/inter-v13-latin-700.woff2") format('woff2'); 
  }
  
  /* inter-800 - latin */
  @font-face {
	font-display: swap; 
	font-family: 'Inter';
	font-style: normal;
	font-weight: 800;
	src: url("../../assets/fonts/inter-v13-latin/inter-v13-latin-800.woff2") format('woff2'); 
  }



:root {

	/* Alternatives to default monospace font */
	--font-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --gray-400: #cbd5e0;

	--yellow-050: #FEFCE8;
	--yellow-100: #fffff0;
	--yellow-200: #fefcbf;
	--yellow-300: #faf089;
	--yellow-400: #f6e05e;
	--yellow-500: #ecc94b;
	--yellow-600: #d69e2e;
	--yellow-700: #b7791f;
	--yellow-800: #975a16;
	--yellow-900: #744210;

    /* Alternatives to default sans-serif font */
    --font-sans: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Fira Sans, Ubuntu, Oxygen, Oxygen Sans, Cantarell, Droid Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Emoji, Segoe UI Symbol, Lucida Grande, Helvetica, Arial, sans-serif;

   /* Fluid font scale */
   --font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
   --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.29rem);
   --font-size-md: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
   --font-size-lg: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
   --font-size-xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
   --font-size-xxl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
   --font-size-xxxl: clamp(3.05rem, 3.54vw + 2.17rem, 5rem);	
}




/* === FONTS === */


  /* inter-300 - latin */
  @font-face {
	font-display: swap; 
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	src: url('../fonts/inter-v13-latin/inter-v13-latin-300.woff2') format('woff2'); 
  }
  
  /* inter-regular - latin */
  @font-face {
	font-display: swap; 
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/inter-v13-latin/inter-v13-latin-regular.woff2') format('woff2'); 
  }
  
  /* inter-500 - latin */
  @font-face {
	font-display: swap; 
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	src: url('../fonts/inter-v13-latin/inter-v13-latin-500.woff2') format('woff2'); 
  }
  
  /* inter-600 - latin */
  @font-face {
	font-display: swap; 
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/inter-v13-latin/inter-v13-latin-600.woff2') format('woff2'); 
  }
  
  /* inter-700 - latin */
  @font-face {
	font-display: swap; 
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/inter-v13-latin/inter-v13-latin-700.woff2') format('woff2'); 
  }
  
  /* inter-800 - latin */
  @font-face {
	font-display: swap; 
	font-family: 'Inter';
	font-style: normal;
	font-weight: 800;
	src: url('../fonts/inter-v13-latin/inter-v13-latin-800.woff2') format('woff2'); 
  }
  
  
/* inter-tight-600 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter Tight';
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/inter-tight-v7-latin/inter-tight-v7-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* inter-tight-600italic - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter Tight';
	font-style: italic;
	font-weight: 600;
	src: url('../fonts/inter-tight-v7-latin/inter-tight-v7-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  


/* ============ SEMANTIC BLOCKS =========== */

header { width: 100% }

/* ============ WRAPPER FOR CONTENT =========== */

.wrapper { 
	margin: 0 auto; padding: 0 16px; position: relative; 
	display: flex; justify-content: space-between; flex-wrap: wrap 
}

@media (max-width: 575px)                          { .wrapper { max-width: 90% } }
@media (min-width: 576px)  and (max-width: 767px)  { .wrapper { max-width: 90% } }
@media (min-width: 768px)  and (max-width: 1024px) { .wrapper { max-width: 92% } }
@media (min-width: 1025px) and (max-width: 1199px) { .wrapper { max-width: 88% } }
@media (min-width: 1200px) and (max-width: 1399px) { .wrapper { max-width: 94% } }
@media (min-width: 1400px)                         { .wrapper { max-width: 80% } }


/* ================== HEADER ==================== */


header {
	background: linear-gradient(#0460CD, #021b79);
	box-shadow: rgba(0, 0, 0, 0.5) 0 2px 4px 0;
}

/* Main content of header */
header h1, header h2, header content p { color: #fff }
header h1 { 
    font-weight: 600; line-height: 1.3; letter-spacing: -1px;
    margin-bottom: 20px;
    font-size: calc(var(--font-size-xxl) * 0.75);
	text-shadow: 1px 1px 1px #222;
}

header h2 { 
    font-weight: 400; line-height: 1.8; 
    font-size: var(--font-size-base);
}

header h2 a { text-decoration: underline solid; text-underline-position: under; font-weight: 600 }

header h2 a:link, header h2 a:visited  {
	color: #fff; text-decoration-color: #fff;
}

header h2 a:hover, header h2 a:hover, header h2 a:active  {
	color: yellow; text-decoration-color: yellow;
}

header content p { line-height: 1.6; color: #fff }

/* Small Mobiles */
@media (max-width: 500px) { 
	header { padding: 0 0 10% 0 } 
	header .sidebar, header .content { width: 100% }
}

/* Big Mobiles */
@media (min-width: 501px) and (max-width: 767px) { 
	header { padding: 0 0 7% 0 } 
	header .sidebar, header .content { width: 100% }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1024px) { 
	header { padding: 3.5% 0 3.7% 0; margin-bottom: 32px } 
	header .sidebar { width: 20% }
	header .content { width: 80% }   
    header h1 { font-size: calc(22px + (36 - 22) * ((100vw - 320px)/(1600 - 320))); }
    header h2 { font-size: calc(16px + (20 - 16) * ((100vw - 320px)/(1600 - 320))); }
}

/* Small Desktops */
@media (min-width: 1025px) and (max-width: 1199px){ 
	header { padding: 2.5% 0 2.7% 0; margin-bottom: 32px } 
	header .sidebar { width: 15% }
	header .content { width: 85% }   
}

/* Big Desktops */
@media (min-width: 1200px) { 
	header { padding: 2.5% 0 2.7% 0; /* margin-bottom: 32px */ } 
	header .sidebar { width: 20% }
	header .content { width: 80%; padding-right: 16% }   
}

/* Sidebar of header */
header .sidebar picture img { margin-bottom: 20px; max-width: 300px }
header .sidebar div { display: flex }

/* Viewports */
@media (max-width: 767px) { 
    header .sidebar div { flex-direction: row; margin-bottom: 22px } 
    header .sidebar div p { margin-left: 14px; align-self: center } 
}

@media (min-width: 768px) and (max-width: 1299px) { 
    header .sidebar div { flex-direction: column } 
    header .sidebar div p { margin-left: 0; margin-top: 12px; align-self: flex-start } 
}

@media (min-width: 1300px)  { 
    header .sidebar div { flex-direction: column } 
    header .sidebar div p { 
        font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1600 - 320))); 
		word-break: break-all;
    }
}

header .sidebar div img { border-radius: 50%; max-width: 60px; max-height: 60px; margin-bottom: 12px }
header .sidebar div p { color: #fff; line-height: 1 }

header .sidebar div .emailAnimation {
    animation: emailTextColor 2s step-end both;
}

@keyframes emailTextColor {
    from { color: yellow }
    to   { color: white }
}

/* ================== CONTENTS BLOCK ==================== */

/* Desktops  */
@media (min-width: 768px) { nav { padding: 1% 10% 1% 10%; margin-bottom: 24px } }

/* Mobiles */
@media (max-width: 767px) { nav { padding: 9% 8% 10% 8% } }

/* ============== TABLE OF CONTENTS ================= */

nav.box-toc { 
	border: solid 1px #d8f5fe; background: #d8f5fe; padding: 0 20px 18px 30px
}

nav.box-toc h2 { font-weight: 400;	color: #230cea }

nav.box-toc p a { 
	font-weight: 600;
	color: #230cea;
	text-decoration: none;
	padding-bottom:2px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
}

nav.box-toc p.toc-indent a { font-weight: 400 }


nav.box-toc p a:link, nav.box-toc p a:visited { 
	border-bottom-color: #230cea;
}

nav.box-toc p a:hover, nav.box-toc p a:active {
	border-bottom-color: #000;
	transition: 0.2s
}

nav.box-toc p a.further-title { font-weight: 600 }

nav.box-toc p.toc-indent { margin-left: 40px }


/* Desktops */
@media (min-width: 768px) {
	nav.box-toc { padding: 18px 20px 32px 30px }
	nav.box-toc p { line-height: 1.8; margin-bottom: 8px; margin-top: 18px }
	nav.box-toc p.toc-indent { line-height: 1.4; margin-bottom: 6px; margin-top: 0 }
}

/* Mobiles */
@media (max-width: 767px) {
	nav.box-toc { padding: 20px 20px 18px 20px }
	nav.box-toc p { line-height: 1.6 }
}



/* ================== MAIN CONTENT AREA ==================== */

main {
	display: flex; 
	justify-content: space-between; 
	flex-wrap: wrap; 
}

@media (min-width: 1280px) {
	main { padding: 3px 20% 2% 0 }
}

@media (min-width: 1025px) and (max-width: 1279px) { 
	main { padding: 3px 10% 2% 0 }
	main section:last-child { margin-bottom: 0 }	 
}

@media (min-width: 768px) and (max-width: 1024px) { 
	main { padding: 3px 5% 2% 0 }
	main section:last-child { margin-bottom: 0 }	 
}

/* Mobiles */
@media (max-width: 767px) { main { padding: 9% 8% 10% 8% } }


/* ================== ASIDE AND ARTICLE ==================== */

/* Desktops  */
@media (min-width: 768px) { 
	aside { 
        width: 27.7%; 
        top: 0.5%; height: 110vh; min-height: 200px; overflow: auto;
        position: -webkit-sticky; position: sticky;
        padding: 0 3% 0 5%;
		background-color: #ECF0F1;
		margin-bottom: -26px;
    }
    article { padding-top: 32px; width: 66%; min-height: 1000px }
}

/* Mobiles */
@media (max-width: 767px) { aside, article { width: 100% } }

aside:last-child, article:last-child { margin-bottom: 0 } 
aside   > *:last-child,
article > *:last-child { margin-bottom: 0 }

/* Aside hyperlinks */
main aside h3 { 
	font-size: calc(var(--font-size-sm) * 1.2);
	margin-top: 18px; line-height: 1.4;
}

aside p { 
	font-size: calc(var(--font-size-sm) * 1.05);
	margin-bottom: 12px; line-height: 1.4;
}

aside p.toc-indent { margin-left: 26px } 
aside p.toc-indent a { font-weight: 400 } 

aside p i, aside li i { color: #230cea }

aside p a, aside li a {
	text-decoration: underline solid; 
	text-underline-position: under; 
	font-weight: 500;
}

main aside p a:link, 
main aside p a:visited,
main aside li a:link,
main aside li a:visited {
	color: #230cea 
}

main aside p a:focus, 
main aside p a:hover, 
main aside p a:active, 
main aside li a:focus
main aside li a:active,
main aside li a:hover {
	color: #222;
	transition: 0.3s;
}

main aside p a.menu-item-selected { font-weight: 600 }

/* ================== SECTIONS ==================== */

/* Desktops */
@media (min-width: 768px) { section { padding: 1.5% 0 5% 0 } }

/* Mobiles */
@media (max-width: 767px) { section { padding: 2% 0 1% 0 } }

/* Section: headings */
section h1, section h2, section h3, section h4 {
	font-weight: 600;
    color: #230cea;
	line-height: 1.1;
	font-family: 'Inter Tight', sans-serif;
}

/* Desktops */
@media (min-width: 768px) { 
	section h2 { margin: 8px 0 4px 0 }
	section h3 { margin: 48px 0 4px 0 }
}

/* Mobiles */
@media (max-width: 767px) { 
	section h2 { margin: 32px 0 4px 0 }
	section h3 { margin: 28px 0 4px 0 }
}

section h2 {
	font-size: calc(var(--font-size-xl) * 0.8)
}

section h2 span { 
    font-family: var(--font-monospace);
    letter-spacing: -3px;
    font-size: 90%;
	color: #888;
}

section h3 {
	font-size: calc(var(--font-size-lg) * 0.9);
	border-top: solid 2px #230cea; 
	padding-top: 6px; margin-bottom: 12px;
}

@media(min-width:768px) { section h3 { margin-top: 48px } }
@media(max-width:767px) { section h3 { margin-top: 42px } }

/* Section: text */
section p, section li { 
	font-weight: 400;
    color: #023753;
	font-size: calc(var(--font-size-base) * 0.92);
}

@media (max-width: 767px) { 
	section p, section li { 
		font-size: var(--font-size-base);
	}
}


/* Section: bold text */
section p b, section ul li b, section ol li b,
section ol li ul li b { color: #222; font-weight: 600 }

/* Section: hyperlinks */
section p a, section li a { 
	font-weight: 500;
	text-decoration: underline solid; 
	text-underline-position: under;
	text-decoration-thickness: 1.5px;
}

section p a:link, section li a:link,
section p a:visited, section li a:visited {
	color: #000;
}

section p a:focus, section p a:hover, section p a:active,
section li a:hover, section li a:hover, section li a:active {
	color: #230cea;
	transition: 0.2s
}

/* Mobiles */
@media (max-width: 767px) { 
	section p a, section li a {
		text-decoration-thickness: 1px;
	}
}



/* Section: images */
section img { margin: 20px 0 20px 0 }

/* Section: paragraphs */

/* Desktops */
@media (min-width: 768px) { 
	section p { margin: 0 0 12px 0; line-height: 1.6 }
}

/* Mobiles */
@media (max-width: 767px) { 
	section p { margin: 0 0 12px 0; line-height: 1.6 }
}

/* Section lists */
section ul, section ol,
section ul li ul, section ol li ul { list-style-type: none }

section ul > li span.inside-ul,
section ul > li span.inside-ol,
section ol > li span.inside-ol { 
	display: block; 
	line-height: 1.4; 
	margin: -12px 0 0 0;
}

/* Desktops */
@media (min-width: 768px) { 
	section ul > li img, section ol > li img { margin: 20px 0 10px 0 }
}

/* Mobiles */
@media (max-width: 767px) { 
	section ul > li img, section ol > li img { margin: 8px 0 12px 0 }
}

section p i.fas { color: rgb(35, 12, 234) }

/* ========= Learning Goals ======== */

#learning-goals {
	background-color: #d8f5fe;
	border-radius: 5px;
	margin: 20px 0 32px 0;
	padding: 14px 24px 28px 24px;
	border-radius: 4px;
}

#learning-goals h2 {
	margin-top: 0;
}

#learning-goals p, #learning-goals ul li {
	color: #000;
}

#learning-goals p {
    margin-bottom: 8px;
    line-height: 1.5;
}

#learning-goals ul li {
    margin-bottom: 12px;
    line-height: 1.5;
}

/* Bullet character */
#learning-goals ul > li:before { 
	color: #230cea;
	transform: translateY(2px);
	content: '\2714';
	font-size: 100%;
}

#learning-goals ul, 
#learning-goals ul li:last-child {
    margin-bottom: 0;
}

/* Desktops */
@media (min-width: 768px) {
	#learning-goals ul li { 
		padding-left: 20px ;
		text-indent: -21px ;
		margin: 0 0 12px 21px;
		line-height: 1.5
	}	
}

/* Mobiles */
@media (max-width: 767px) {
	#learning-goals { margin-top: 30px }
	#learning-goals p, #learning-goals ul li {
		font-size: calc(15px + (17 - 15) * ((100vw - 320px)/(1600 - 320)));
	}

	#learning-goals p { margin-bottom: 10px }

	#learning-goals ul li { 
		margin: 0 0 10px 18px;
		padding-left: 10px;
		text-indent: -14px;
		line-height: 1.5;
	}	
	#learning-goals ul li:before { margin-right: 14px }
}


#resources {
	background-color: #d8f5fe;
	border-radius: 5px;
	margin: 20px 0 32px 0;
	padding: 14px 24px 28px 24px;
	border-radius: 4px;
}

#resources h2 {
	margin-top: 0;
}

#resources p, #resources ul li {
	color: #000;
}

#resources p {
    margin-bottom: 8px;
    line-height: 1.5;
}

#resources ul li {
    margin-bottom: 12px;
    line-height: 1.5;
}

/* Bullet character */
#resources ul > li:before { 
	color: #230cea;
	transform: translateY(2px);
	content: '\2714';
	font-size: 100%;
}

#resources ul, 
#resources ul li:last-child {
    margin-bottom: 0;
}

/* Desktops */
@media (min-width: 768px) {
	#resources ul li { 
		padding-left: 20px ;
		text-indent: -21px ;
		margin: 0 0 12px 21px;
		line-height: 1.5
	}	
}

/* Mobiles */
@media (max-width: 767px) {
	#resources { margin-top: 30px }
	#resources p, #resources ul li {
		font-size: calc(15px + (17 - 15) * ((100vw - 320px)/(1600 - 320)));
	}

	#resources p { margin-bottom: 10px }

	#resources ul li { 
		margin: 0 0 10px 18px;
		padding-left: 10px;
		text-indent: -14px;
		line-height: 1.5;
	}	
	#resources ul li:before { margin-right: 14px }
}



/* Lists following paragraph */

/* Desktops */
@media (min-width: 768px) {
	/* section p + ul, section p + ol { margin-top: -4px } */
}

/* Mobiles */
@media (max-width: 767px) {
	section p + ul, section p + ol { margin-top: -4px }
}

/* Lists with images */

/* Desktops */
@media (min-width: 768px) {
	ul li img, ol li img { margin-bottom: 14px }
}

/* Mobiles */
@media (max-width: 767px) {
	ul li img, ol li img { margin-bottom: 14px }
}

/* Section: unordered lists */
section ul, section ul.bad { list-style-position: inside }

/* Bullet character */
section ul > li::before { 
	display: inline-block;
	color: #230cea;
	transform: translateY(2px);
	content: '\279C';
	font-size: 130%;
}

section ul.bad > li::before { 
	display: inline-block;
	color: red;
	transform: translateY(-1px);
	content: '\26A0';
	font-size: 100%;
	font-weight: 600
}


/* Desktops */
@media (min-width: 768px) {
	section ul, section ul.bad { margin: 0 0 24px 0 }
	section ul li, section ul.bad li { 
		padding-left: 20px ;
		text-indent: -22px ;
		margin: 0 0 6px 21px;
		line-height: 1.5
	}	
	section ul li:before, 
	section ul.bad li:before { margin-right: 20px }
}

/* Mobiles */
@media (max-width: 767px) {
	section ul, section ul.bad { margin: 0 0 12px 0 }
	section ul li,
	section ul.bad li { 
		line-height: 1.5;
		padding-left: 18px;
		text-indent: -20px;
		margin: 0 0 12px 18px
	}
	section ul li:before,
	section ul.bad li:before { margin-right: 18px }	
}

/* Unordered lists - tighter */

section p + ul.tighter { margin-top: -4px } 
section ul.tighter { margin-bottom: 0 }
section ul.tighter li { margin-bottom: 12px }


/* Section ordered lists */

section ol { counter-reset: li-counter }
section ol > li { position: relative }
section ol > li > ul { list-style-type: none }

section ol > li:before {
    position: absolute; top: 2px; left: -32px; line-height: 1; text-align: center; 
    border-radius: 50%; padding: 2px 4px 2px 3px; font-weight: 600; 
    content: counter(li-counter); counter-increment: li-counter;
    color: #023753; background-color: #fff;
    border: solid 2px #023753;
	font-size: calc(15px + (17 - 15) * ((100vw - 320px)/(1600 - 320)));
}

/* Desktops */
@media (min-width: 768px) {
	section ol { margin: 28px 0 20px 32px }
   	section ol > li { margin-bottom: 20px; padding-left: 30px; line-height: 1.6 }

	section ol > li:before { line-height: 1.3;  width: 28px; height: 28px }
	section ol > li > ul { margin: 12px 0 0 16px }
   	section ol > li > ul > li { padding-left: 24px; margin: 0 0 12px 0 }
}

/* Mobiles */
@media  (max-width: 767px) {
	section ol { margin: 0 0 20px 32px }
	section ol > li { margin-bottom: 20px; padding-left: 16px; line-height: 1.4 }
	section ol > li:before { 
		line-height: 1.3; 
		width: 24px; height: 24px; 
		padding: 0;
	}
	section ol > li > ul { margin: 6px 0 0 22px }
	section ol > li > ul > li { padding-left: 18px; margin: 0 0 8px 0; text-indent:-20px }
}


/* ========== BUTTONS ========== */

/* ============== TABLES =================== */

.table-geo-one {
	margin: 24px 0 40px 0;
	border-top: solid 2px #044d6c;
	min-width: 50%;
	border-bottom: solid 1px #044d6c;
}

.table-geo-one th, .table-geo-one td {
	text-align: left;
	line-height: 1.4; margin: 0; padding: 7px 0 9px 0;
	font-size: calc(15px + (19 - 15) * ((100vw - 320px)/(1600 - 320)));
	vertical-align: top;
}

.table-geo-one td p { margin-bottom: 8px; font-size: 96%; letter-spacing: 0 }
.table-geo-one td p:last-child { margin-bottom:0 }

.table-geo-one th {
	font-size: calc(15px + (19 - 15) * ((100vw - 320px)/(1600 - 320)));
}

.table-geo-one td hr { height: 2px; padding: 0; margin: 0}

table.table-gray {
	background-color: #f0f5f4;
	width: 100%;
	margin-bottom: 32px;
	padding:20px 20px 10px 20px;
}

table.table-gray td {
  vertical-align: top;
}

table.table-gray td p:not(:last-child) {
  margin-bottom: 12px;
}

table.table-gray thead {
	background-color: gray;
	color: #fff;
}

table.table-gray thead th p {
	background-color: gray;
	color: #fff;
}

.table-js {
	background-color: #ecf0f1;
	width: 100%;
	padding: 0;
	margin: 0 0 32px 0;
	border-collapse: collapse;
}

.table-js thead th {
	text-align: left;
	background-color: gray;
	background-color: #636e72;
	border-color: gray;
	color: #fff;
}

.table-js thead tr th p {
	margin: 0; color: #023753;
}

.table-js thead tr th p b {
	margin: 0; color: #fff;
}

.table-js th, .table-js td {
	vertical-align: top;
	padding: 10px 18px 10px 20px;
}

.table-js tbody td p { 
	margin-bottom: 8px; 
}

/* =========== Screenshots ============= */

/* Desktops */
@media (min-width: 768px) {
	img.wider-105 { width: 105% }
	img.wider-110 { width: 110% }
	img.wider-115 { width: 115% }
}

/* ================== FOOTER ==================== */

footer {
	display: flex; 
	justify-content: space-between; 
	flex-wrap: wrap; 
	background: linear-gradient(#0460CD, #021b79);
}

footer:last-child { margin-bottom: 0 } 

/* Desktops  */
@media (min-width: 768px) { 
	footer { padding: 4% 10% 4% 10% } 
	footer .item-3:nth-child(1) { width: 19% }
	footer .item-3:nth-child(2) { width: 52% }
	footer .item-3:nth-child(3) { width: 19% }
}

/* Mobiles */
@media (max-width: 767px) { 
	footer { padding: 10% 8% 4% 8% } 
	footer .item-3 { width: 100%; margin-bottom: 10% }
	footer .item-3:nth-child(2) { order: 1 }
	footer .item-3:nth-child(1) { order: 2 }
	footer .item-3:nth-child(3) { order: 3 } 
}
 
/* Styles for footer background, text, icons and links */
 
footer .item-3 h4, footer .item-3 p, footer .item-3 p i, footer .item-3 p a {
	color: #fff
}
 
footer .item-3 h4 {
	font-weight: 600;
	margin-bottom: 12px;
	font-size: calc(17px + (19 - 17) * ((100vw - 320px)/(1600 - 320)));
}
 
footer .item-3 p {
	font-weight: normal;
	margin-bottom: 12px;
	font-size: calc(15px + (18 - 15) * ((100vw - 320px)/(1600 - 320)));
	line-height: 1.6
}
 
footer .item-3 i { 
	padding-right: 26px;
} 
 
footer .item-3 p a {
	font-weight: 600;
	text-decoration: none;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	padding-bottom: 2px;
}
 
footer .item-3 p a:link, 
footer .item-3 p a:visited  {
	border-bottom-color: transparent;
}
 
footer .item-3 p a:hover, 
footer .item-3 p a:active {
	border-bottom-color: #fff
}




/* ========== SOME BACKGROUND COLOURS ========== */

.bg-gray-light    { background-color: #f0f5f4 }
.bg-beige-light   { background-color: #fde8cd }
.bg-green-light   { background-color: #e1ffe1 }
.bg-salmon-light  { background-color: #F7CACA }
.bg-purple-light  { background-color: #f2e1f9 }
.bg-teal-light    { background-color: #d0f8f8 }
.bg-yellow-light  { background-color: #f3fcce }
.bg-yellow-less-light  { background-color: #ffce01 }
.bg-orange-light  { background-color: #ffe6d0 }
.bg-brown-light   { background-color: #fef8f1 }
.bg-blue-light    { background-color: #dde9fa }

.bg-slate-gray-dark { background-color: #556271 }
.bg-purple-dark   { background-color: #6b5b95 }
.bg-crimson-dark  { background-color: #af0069 }
.bg-blue-dark     { background-color: #3c40c6 }
.bg-brown-dark    { background-color: #380312 }
.bg-teal-dark     { background-color: #007188 }
.bg-green-dark    { background-color: #066756 }
.bg-black-dark    { background-color: #000000 }

.bg-shadow-light {
	background-color: #fff;
	box-shadow: rgba(160,160,160,0.8) 5px 5px 20px;
	border-radius: 12px;
}


/* ================== UTILITY CLASSES =================== */

section.text-center > * { text-align: center  }
 



pre {
	font-family: 'Roboto Mono', monospace, sans-serif;
	color: #fff;
	font-weight: bold;
	font-weight: 400;
	font-size: calc(var(--font-size-base) * 0.9);
	line-height: 1.8;
	margin: 12px 0 24px 0;
	background-color: rgb(24,53,75); /* HTML ? */
	background-color: #282c34;
	word-break: normal;
	hyphens: none;
	white-space: pre;
	border-radius: 6px;
	overflow-x: auto;
}

@media (min-width: 768px) { 
	pre { padding: 16px 14px 8px 18px; }
}

@media (max-width: 767px) { 
	pre { padding: 42px 16px 18px 10px; }
}

pre.language-html { color: rgb(128,128,128) }
pre.language-html .token.selector { color: rgb(206,145,120) }
pre.language-html .token.content { color: #fff }
pre.language-html .blue-dark { color: rgb(86,156,202 ) }
pre.language-html .blue-light { color: rgb(156,220,254 ) }
pre.language-html .brown { color: rgb(206,145,120) }
pre.language-html .yellow { color: rgb(220,220,170) }
pre.language-html .green-bright { color: rgb(78,201,143) }
pre.language-html .white { color: #fff;font-weight: 400 }

pre.language-css .token.asterisk { color: rgb(62,196,202) }
pre.language-css .token.class { color:  rgb(215,186,125) }
pre.language-css .token.punctuation { color: #fff }
pre.language-css .token.property { color: rgb(123,220,254) }
pre.language-css .token.number, pre.language-css .token.unit { color: rgb(181,206,168) }
pre.language-css .token.value-text { color: rgb(206,145,81) }
pre.language-css .purple { color: rgb(197,134,161); }

pre.language-html .token.comment,
pre.language-css  .token.comment { color: rgb(106,153,85); color: rgb(34,170,68) }
pre.language-html .yellow,
pre.language-css  .yellow { color: rgb(220,220,170) }

span.syn { 
	color: #fff; 
	background-color: #230cea; 
	padding: 1px 6px 1px 6px;
	font-size: 92%;
	font-family: var(--font-monospace);
	border-radius: 4px;
	font-style: normal;
	white-space: nowrap;
}

span.csyn { 
	background-color: #000; 
	color: rgb(241,199,51);
	padding: 1px 6px 1px 6px;
	font-size: 92%;
	font-family: var(--font-monospace);
	border-radius: 4px;
	font-style: normal;
}

span.csyn-blue-light { 
	background-color: #000; 
	color: rgb(123,220,254);
	padding: 1px 6px 1px 6px;
	font-size: 92%;
	font-family: var(--font-monospace);
	border-radius: 4px;
	font-style: normal;
}

span.csyn-orange { 
	background-color: #000; 
	color:  #FF7F50;
	padding: 1px 6px 1px 6px;
	font-size: 92%;
	font-family: var(--font-monospace);
	border-radius: 4px;
	font-style: normal;
}

span.csyn-green { 
	background-color: #000; 
	color:  rgb(78,201,143);
	padding: 1px 6px 1px 6px;
	font-size: 92%;
	font-family: var(--font-monospace);
	border-radius: 4px;
	font-style: normal;
}

span.atsyn { 
	background-color: #d8f5fe; 
	color: #000;
	padding: 1px 6px 1px 6px;
	font-size: 92%;
	font-family: var(--font-monospace);
	border-radius: 4px;
	font-style: normal;
}



span.bold { font-weight: 600}
span.comment { color: rgb(106,153,85); color: #14f195 }
span.white { color: #fff; font-weight: 600 }



span.green-light { color: rgb(147,206,168); font-style: normal; font-weight: 600 }


span.green-bright { color: rgb(78,201,143) }

span.green-dark { color: rgb(106,153,85) }

span.var, span.purple { color: rgb(130,167,255); font-weight: 600 }
span.blue-em { color: rgb(103,216,219); font-style:italic; font-weight: 600 }

span.string { color: rgb(255,51,51); font-style:italic; font-weight: 600 }
span.red { color: rgb(255,51,51); font-weight: 600 }
span.green { color: #7FFF00; font-weight: 600 }

span.orange { color: #FF7F50; font-style: normal; font-weight: normal }
span.orange-light { color: rgb(215,186,125); font-style: normal; font-weight: 600 }
span.purple { color: rgb(197,134,161); font-style: normal; font-weight: 600 }

span.orangered { color: orangered; font-style: italic; font-weight: 600 }
span.erroneousLine { background: yellow; color: red; font-weight: 600 }


.brown-code    { color: #f08d49}
.string        { color: #00fbca }
.blue-light    { color: rgb(123,220,254) }
.blue-dark     { color: rgb(86,156,214) }
.comment-code  { color: rgb(106,153,85) }
.keyword-code  { color: rgb(197,134,161) }
.function-code { color: rgb(220,220,170) }
.green-number  { color: rgb(181,206,168) } 
.deep-purple   { color: rgb(197,134,192) }

/* EXERCISES */

.flex-exercises {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 42px;
	background-color: #d8f5fe;
}

.flex-exercises .flex-exercises-item { 
	margin: 0 0 16px 0;
	padding: 16px 16px 0 16px;
}



.flex-exercises .flex-exercises-item:first-child { 
	background-color: #0000ff;
	background-image: linear-gradient(#1435b3,#0575e6);
	margin-bottom:0;
	width: 50%;
}

.flex-exercises .flex-exercises-item:last-child { 
	width: 50%;
	padding-left: 26px
}


/* Mobiles */
@media screen and (max-width: 767px) {
	.flex-exercises .flex-exercises-item { width: 100% }
}

.flex-exercises .flex-exercises-item > h3 {
	font-size: calc(18px + (26 - 18) * ((100vw - 320px)/(1600 - 320)));
	font-family: 'Inter Tight', sans-serif;
	font-weight: 600;
	margin: 0 0 8px 0;
	color:#fff;
}

.flex-exercises .flex-exercises-item > p,
.flex-exercises .flex-exercises-item > p b {
	font-size: calc(15px + (18 - 15) * ((100vw - 320px)/(1600 - 320)));
	font-family: 'Inter', sans-serif;
	margin: 0 0 16px 0;
	line-height: 1.5;
	color:#fff;
}

.flex-exercises .flex-exercises-item h3 > a {
	text-decoration: none;
	color: blue;
	padding-bottom: 3px;
	color:#fff;
}

.flex-exercises .flex-exercises-item > h3 a:link,
.flex-exercises .flex-exercises-item > h3 a:visited {
	border-bottom: solid 2px #fff;
}

.flex-exercises .flex-exercises-item > h3 a:hover,
.flex-exercises .flex-exercises-item > h3 a:active {
	color: lightblue;
	border-bottom: solid 2px lightblue;
}

.flex-exercises .flex-exercises-item .flex-exercises-sub {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.flex-exercises .flex-exercises-item .flex-exercises-sub .flex-exercises-sub-item {
	width: 47%;
	margin-bottom: 32px;
}

.flex-exercises .flex-exercises-item .flex-exercises-sub .flex-exercises-sub-item img { 
	margin: 0 0 8px 0;
	width: 100%;
	height: auto;
}
.flex-exercises .flex-exercises-item .flex-exercises-sub-item a { 
	text-decoration: none;
	margin:  0;
}

.four-samples div a.link-exercise,
a.link-exercise {
	text-decoration: none;
	color:#fff;
	padding: 6px 12px;
	display: inline-block;
	margin:  0;
	font-weight: 600;
}

.four-samples div a.link-exercise { margin-bottom: 20px }


a.link-exercise:link, a.link-exercise:visited {
	background-color: blue;
}

a.link-exercise:hover, a.link-exercise:active {
	background-color: deeppink;
}

.four-samples {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 40px;
}

.four-samples div { width: 47% }

.four-samples div img { margin: 0 0 -20px 0 }

.four-samples div a { 
	display: block; margin: 0 0 32px 0; line-height: 1;
	font-size: calc(14px + (16 - 14) * ((100vw - 320px)/(1600 - 320)));
}

span.link-bold { font-weight: 600 }


.ui-kit-instructions {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 6px;
	border-bottom: solid 1px #000;
	margin-bottom: 12px;
	width: 90%;
}

.ui-kit-instructions.border-top {
	border-top: solid 1px #000;
}
	

.ui-kit-instructions div:nth-child(1) { 
	width: 25% 
}

.ui-kit-instructions div:nth-child(2) { 
	width: 72%
}

section .ui-kit-instructions div p { 
	margin: 6px auto 6px auto;
}

section .ui-kit-instructions div:nth-child(1) p { 
	font-weight: 600;
}

section img.menu-pic { max-height: 58px; width: auto }



/* ==== FOR MARKING UP WITH HTML TUTORIAL  ==== */
div.typewriter {
	margin-top: 5%;
	border: solid 1px #000;
	padding: 2%;
	background: rgb(234,234,234);
}

div.typewriter h1,
div.typewriter h2,
div.typewriter h3,
div.typewriter p { font-family: var(--font-monospace); color: #000; font-size: 15px }

/* === Chapters TOC ==== */

div.box-toc {
	margin: 0;
	background-color:  #d8f5fe;
	border-radius: 5px;
	margin-bottom: 24px;
	color:#000;
	padding: 14px 24px 14px 24px;
}

div.box-toc p {
	font-size: calc(15px + (17 - 15) * ((100vw - 320px)/(1600 - 320)));
}

div.box-toc p a { 
	border-bottom-width: 1px;
	padding-bottom: 2px;
}

	.box-warning {
		border-radius: 5px;
		margin-bottom:24px;
		background-color: #FFFF99;
		color:#000;
		padding: 18px 14px 18px 14px;
		display: flex; 
		justify-content: space-between; 
		flex-wrap: wrap;
	}

	.box-warning div:first-child img { margin: 0 }
	.box-warning div:last-child p {
		font-size: calc(15px + (17 - 15) * ((100vw - 320px)/(1600 - 320)));
		margin-bottom: 8px;
		line-height: 1.6; 
	}

	.box-warning div:first-child { width: 18%; padding: 0 10px 0 0 }
	.box-warning div:last-child  { width: 76% }
	.box-warning div:last-child span {
		background-color:red; color: #fff; 
		font-weight:bold; padding: 0 4px
	}

	pre.language-html { color: rgb(128,128,128) }
	pre.language-html .token.selector { color: rgb(206,145,120) }
	pre.language-html .token.content { color: #fff }
	pre.language-html .blue-dark { color: rgb(86,156,202 ) }
	pre.language-html .blue-light { color: rgb(156,220,254 ) }
	pre.language-html .brown { color: rgb(206,145,120) }
	pre.language-html .yellow { color: rgb(220,220,170) }
	pre.language-html .green-bright { color: rgb(78,201,143) }
	pre.language-html .white { color: #fff; font-weight: 400 }
	
	pre.language-css .token.asterisk { color: rgb(62,196,202) }
	pre.language-css .token.class { color:  rgb(215,186,125) }
	pre.language-css .token.punctuation { color: #fff }
	pre.language-css .token.property { color: rgb(123,220,254) }
	pre.language-css .token.number, pre.language-css .token.unit { color: rgb(181,206,168) }
	pre.language-css .token.value-text { color: rgb(206,145,81) }
	pre.language-css .purple { color: rgb(197,134,161); }
	
	pre.language-html .token.comment,
	pre.language-css  .token.comment { color: rgb(106,153,85); color: rgb(34,170,68) }
	pre.language-html .yellow,
	pre.language-css  .yellow { color: rgb(220,220,170) }
	
	pre.language-js { color: #fff }
	pre.language-js .comment { color: #14f195; }
	pre.language-js .token.selector { color: rgb(206,145,120) }
	pre.language-js .token.content { color: #fff }
	pre.language-js .blue-dark { color: rgb(86,156,202 ) }
	pre.language-js .blue-light { color: rgb(156,220,254 ) }
	pre.language-js .brown { color: rgb(206,145,120) }
	pre.language-js .yellow { color: rgb(220,220,170) }
	pre.language-js .green-bright { color: rgb(78,201,143) }
	pre.language-js .white { color: #fff; font-weight: 400 }
	pre.language-js .green-light { color: rgb(181,206,168); font-weight: 400 }
	
	span.syn-js {
		padding: 1px 6px 1px 6px;
		font-size: 96%;
		font-family: var(--font-monospace);
		border-radius: 4px;
		background-color: #f7df1e;
		color: #000;
		white-space: nowrap;
	}


	kbd.tutorial-key, kbd {
		display: inline-block;
		background-color: #eee;
		border-radius: 5px;
		border: 1px solid #b4b4b4;
		box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
		color: #555;
		font-weight: 600;
		line-height: 1;
		padding: 3px 5px;
		white-space: nowrap;
		cursor: default;
		letter-spacing: 1px;
		user-select: none;
		font-family: 'Open Sans', sans-serif;
		display: inline-block;
		margin: 0 2px;
		font-size: 84%;
	}

	ul li kbd {
		display: inline-block;
		background-color: #eee;
		border-radius: 5px;
		border: 1px solid #b4b4b4;
		box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
		color: #555;
		font-weight: 600;
		line-height: 1;
		padding: 3px 5px;
		white-space: nowrap;
		cursor: default;
		letter-spacing: 1px;
		user-select: none;
		font-family: 'Open Sans', sans-serif;
		display: inline-block;
		margin: 0 2px;
		font-size: 84%;
		text-indent: 0;
	}


	.no-margin-top { margin-top: 0 }
	.no-margin-bottom { margin-bottom: 0 }

	/* ==== Text definitions === */
.defhead {
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	margin: 48px 0 0 0;
	background-color: #f7df1e;
	padding: 6px 14px 6px 21px;
	color: #222;
	font-size: calc(15px + (16 - 15) * ((100vw - 320px)/(1600 - 320)));
}

.deftext {
	margin: 0 0 48px 0;
	padding: 8px 14px 10px 20px;
	background-color: #ffffe0;
	border-left: solid 1px #f7df1e;
	border-right: solid 1px #f7df1e;
	border-bottom: solid 1px #f7df1e;
	color: #222;
	font-size: calc(15px + (16 - 15) * ((100vw - 320px)/(1600 - 320)));
	margin-bottom: 20px
}

h2 code, h3 code {
	letter-spacing: -2.5px;
	font-weight: 600;
	font-size: 106%;
	color: gray;
	font-family: var(--font-monospace);
}

aside p a code {
	letter-spacing: -1px;
	font-weight: 500;
	font-size: 106%;
}

.table-js-arithmetic {
	margin: 24px 0 24px 0;
	border-top: solid 2px #044d6c;
	background: linear-gradient(90deg, var(--yellow-050), var(--yellow-200));
	min-width: 96%;
}

.table-js-arithmetic td {
	border-bottom: solid 1px #044d6c;
	padding: 6px 0 8px;
	vertical-align: top;
}

.table-js-arithmetic td:nth-child(1) {
	min-width: 12%; padding-left: 10px;
}

.table-js-arithmetic td:nth-child(2) {
	min-width: 20%;
}

.table-js-arithmetic td:nth-child(3) {
	min-width: 35%; padding-right: 10px;
}

.table-js-arithmetic td p span {
	font-weight: 500;
}

.table-js-arithmetic td p  {
	margin-bottom: 6px;
	line-height: 1.4;
}


.table-js-methods {
	margin: 24px 0 24px 0;
	border-top: solid 2px #044d6c;
	background: linear-gradient(90deg, var(--yellow-050), var(--yellow-200));
	min-width: 96%;

}

.table-js-methods td {
	border-bottom: solid 1px #044d6c;
	padding: 6px 0 8px
}

.table-js-methods td:nth-child(1) {
	min-width: 30%;
	vertical-align: top;
}

.table-js-methods td p span {
	font-weight: 500;
}

.table-js-methods td p  {
	margin-bottom: 6px;
	line-height: 1.4;
	padding-right: 6px;
}

div.code-snippets {
	padding: 20px 20px 14px 32px;
	border: solid 2px var(--yellow-400);
	background: linear-gradient(90deg, var(--yellow-050), var(--yellow-200));
	min-width: 96%;
	border-radius: 4px;
}

.code-snippets p { 
	margin-bottom: 12px; line-height: 1.6;
	font-size: calc(var(--font-size-base) * 0.90);
}

.code-snippets p a:link, 
.code-snippets p a:visited { 
	text-decoration: underline;
	text-underline-offset: 5px;
	font-size: calc(var(--font-size-base) * 0.90);
}

.code-snippets p a:hover,
.code-snippets p a:active { 
	color: #023753;
	text-decoration: none;
}

section div.code-snippets ul > li::before {
	display: inline-block;
	color: var(--yellow-600);
	transform: translateY(2px);
	content: '\279C';
	font-size: 130%;
}


.js-box {
	border: solid 1px yellow;
	padding: 20px;
	background-color: lightyellow;
	margin-bottom: 48px;
}

.flex-50 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background-color: #d8f5fe;
	margin-bottom: 32px
}

.flex-50 > img { margin-top: 0; margin-bottom: 0 }

.flex-50 > div, .flex-50 > img { 
	display: flex; flex-wrap: wrap; 
	justify-content: flex-start; 
	align-content: flex-start; 
}

.flex-50 > div p {
	font-size: calc(15px + (17 - 15) * ((100vw - 320px)/(1600 - 320)));
}

@media ( min-width: 768px ) { 
	.flex-50 { flex-direction: row; row-gap: 12px; }
	.flex-50 { row-gap: 32px }
	.flex-50 > img { width: 68% }
	.flex-50 > div { width: 29%; padding: 8px 8px 8px 0 } 


}
@media ( max-width: 767px ) { 
	.flex-50 { flex-direction: column } 
	.flex-50 > div, .flex-50 > img { width: 100% }
	.flex-50 > img { margin-bottom: 8px }
	.flex-50 > div { padding: 4px 10px } 
	.flex-50 > div p { margin-bottom: 12px !important }
}

main pre { position: relative } 

button.copy-html, 
button.copy-css, 
button.copy-code,
button.copy-text,
div.gpt button.copy-gpt { 
	position: absolute;
	z-index: 2;
	border-width: 2px;
	border-style: solid;
	border-radius: 4px;
	line-height: 1;
	display: inline-block;
	-webkit-appearance: none;
	appearance: none;
	text-decoration: none;
	cursor: pointer;
	border: solid 2px lightskyblue;
	color: lightskyblue;
	background-color: transparent;
	font-size: calc(var(--font-size-base) * 0.85);
}

@media(min-width: 768px) {
	button.copy-html, 
	button.copy-css, 
	button.copy-code,
	button.copy-text,
	div.gpt button.copy-gpt { 
		top: 10px; right: 12px;
		padding: 8px 12px 10px 12px;
		min-width: 140px;
	}
	button.copy-text {
		top: 56px; right: 16px;
		min-width: 124px;
	}
	div.gpt button.copy-gpt { top: 16px; right: 16px }
}

@media(max-width: 767px) {
	button.copy-html, 
	button.copy-css, 
	button.copy-code,
	button.copy-text,
	div.gpt button.copy-gpt { 
		top: 10px; right: 12px;
		padding: 8px 12px 10px 12px;
		min-width: 100px;
	}
	button.copy-text {
		top: 56px; right: 16px;
		min-width: 100px;
	}
	div.gpt button.copy-gpt { top: 16px; right: 16px }
}

button.copy-html:link, button.copy-html:visited,
button.copy-css:link, button.copy-css:visited,
button.copy-code:link, button.copy-code:visited,
div.gpt button.copy-gpt:link, div.gpt button.copy-gpt:visited,
button.copy-text:link, button.copy-text:visited { 
	border: solid 2px lightskyblue;
	color: lightskyblue;
	background-color: transparent;
}

button.copy-html:focus, button.copy-html:hover, button.copy-html:active,
button.copy-css:focus, button.copy-css:hover, button.copy-css:active,
button.copy-code:focus, button.copy-code:hover, button.copy-code:active,
div.gpt button.copy-gpt:focus, 
div.gpt button.copy-gpt:hover, 
div.gpt button.copy-gpt:active {
/* div.gpt button.copy-text:focus, 
div.gpt button.copy-text:hover, 
div.gpt button.copy-text:active {  */
	border: solid 2px var(--yellow-200);
	color: var(--yellow-200);
	background-color: transparent;
}

button.copy-gpt i,
button.copy-text svg,
button.copy-code i,
button.copy-html i { margin-left: 8px; color: inherit }


div.gpt {
	margin: 12px 0 24px 0;
	padding: 72px 30px 20px 30px;
	background-color: #343541;
	color: var(--gray-400);
	font-size: calc(var(--font-size-base) * 0.95); 
	font-weight: 400;
	border-radius: 8px;
	font-family: var(--font-sans) !important;
	position: relative
}

div.gpt > code {
	font-family: var(--font-sans) !important;
	font-size: calc(var(--font-size-base) * 0.9); 
}

button.copy-text svg.filter-blue {
    filter: invert(72%) sepia(44%) saturate(469%) hue-rotate(172deg) brightness(100%) contrast(97%);
}

button.copy-text svg.filter-yellow {
	filter: invert(100%) sepia(45%) saturate(1065%) hue-rotate(7deg) brightness(104%) contrast(101%)
}

button.copy-text svg.filter-green {
	filter: invert(58%) sepia(32%) saturate(4749%) hue-rotate(81deg) brightness(118%) contrast(124%);
}

main pre span.highlight {
	color: deeppink; font-weight: 600; 
	color: rgb(255, 121, 198)
}

main pre span.yellow {
	color: yellow; font-weight: 600; 
	color: rgb(241, 250, 140)
}

main pre span.blue {
	color: yellow; font-weight: 600; 
	color: rgb(73, 148, 255)
}
pre.html {
	background-color: #1e3a8a;
}

h2 code, h3 code { font-weight: normal !important}
span.grey { color: lightgray }
span.green { color: green }

span.red { background-color: red; color: #fff; padding: 2px 4px }

#cookie-banner {
	position: fixed; z-index:100;
	bottom: 0; left: 0; right: 0; background-color: #111;
	padding: 20px 32px; 
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	display: none;
}

@media(max-width: 767px) {
	#cookie-banner { padding: 20px 18px }
}

#cookie-banner.show {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#cookie-banner p { 
	font-family: Helvetica,Calibri,Arial,sans-serif; font-size: 16px; line-height: 1.5em;
	margin: 0; padding-right: 20px; color: #fff; 
}

#cookie-banner p a:link, 
#cookie-banner p a:visited { 
	color: #fff; text-underline-offset: 5px; text-decoration-thickness: 1.5px
}  

#cookie-banner p a:hover, 
#cookie-banner p a:active { color: lightblue; text-decoration: none }  

#cookie-banner .buttons { display: flex; gap: 10px }
#cookie-banner button {
	border: none;
	padding: 6px 16px;
	border-radius: 3px;
	cursor: pointer;
	font-weight: bold;
	font-family: Helvetica,Calibri,Arial,sans-serif; font-size: 16px; line-height: 1.5em;
}
#accept-cookies {
	background-color: rgb(255, 252, 38);
	color: #111;
}

#accept-cookies:hover, #accept-cookies:focus, #accept-cookies:active {
	background-color: lightgreen;
	color: #111;
}

.resources-learning {
	background-color: #d8f5fe;
	border-radius: 5px;
	margin: 20px 0 48px 0;
	padding: 18px 24px 28px 24px;
	border-radius: 4px;
}

.resources-learning h2 { margin-top: 0; font-size: calc(var(--font-size-xl) * 0.7); }
.resources-learning p { 
	color: #000; margin-bottom: 8px; line-height: 1.5;
	font-size: calc(var(--font-size-base) * 0.92);
}


/* Mobiles */
@media (max-width: 767px) {
	.resources-learning { 
		margin-top: 30px; padding: 14px 10px 28px 10px; }
	.resources-learning p { margin-bottom: 10px }
}


		/* Flex Container */
		.flex-container { 
			display: flex; flex-wrap: wrap; gap: 30px; margin-top: 16px
		}

		/* Text and audio containers */
		.text-container, .audio-container {
			position: relative;
			display: flex;
			flex-direction: column;
			position: relative;
			background-size: cover;
			background-color: #333;
			border-radius: 4px;
			z-index: 1;
			justify-content: space-between;
		}

		@media (min-width: 1440px) {
			.flex-container { flex-direction: row }
			.text-container, .audio-container {
				flex-grow: 1;
				flex-shrink: 1;
				flex-basis: 300px; /* Minimum width of 300px */
				min-width: 300px; /* Ensure it doesn't shrink below 200px */
				min-height: 240px; /* Minimum height */
				width: 100%; /* Full width on smaller screens */ 
			}
			.audio-container { padding: 6px 10px 12px 10px; }
			.text-container { padding: 6px 20px 12px 18px; }
		}

		@media (min-width: 1280px) and (max-width: 1439px) {
			.flex-container { flex-direction: row }
			.text-container, .audio-container {
				flex-grow: 1;
				flex-shrink: 1;
				flex-basis: 200px; /* Minimum width of 300px */
				min-width: 200px; /* Ensure it doesn't shrink below 200px */
				min-height: 220px; /* Minimum height */
				max-width: 320px;				
				width: 100%; /* Full width on smaller screens */ 
			}
			.text-container { padding: 6px 20px 15px 18px; }
			.audio-container { padding: 6px 10px 6px 10px; }
		}

		@media (min-width: 1025px) and (max-width: 1279px) {
			.flex-container { flex-direction: column }
			.text-container, .audio-container {
				flex-grow: 1;
				flex-shrink: 1;
				flex-basis: 200px; /* Minimum width of 300px */
				min-width: 200px; /* Ensure it doesn't shrink below 200px */
				min-height: 200px; /* Minimum height */
				max-width: 320px;
				width: 100%; /* Full width on smaller screens */ 
			}
			.audio-container { padding: 12px 10px; }
			.text-container { padding: 6px 20px 15px 18px; }
		}

		@media (max-width: 1024px) {
			.flex-container { flex-direction: column }
			.text-container, .audio-container {
				flex-grow: 1;
				flex-shrink: 1;
				flex-basis: 200px; /* Minimum width of 300px */
				min-width: 200px; /* Ensure it doesn't shrink below 200px */
				min-height: 200px; /* Minimum height */
				max-width: 320px;
				width: 100%; /* Full width on smaller screens */ 
			}
			.text-container { padding: 9px 20px 15px 18px; }
			.audio-container { padding: 9px 10px 12px 10px; }
		}

		/* Text Container */
		.text-container {
			background: url('../../assets/img/quiz.png') no-repeat center center;
			color: #fff;
			background-size: cover;
		}

		.text-container h3, .audio-container h3 {
			border: none;
			margin: 0;
			padding: 0;
		}

		.text-container h3 span, .audio-container h3 span {
			background-color: blue;
			color: #fff;
			font-size: calc(var(--font-size-base) * 0.8);
			padding: 6px 10px 6px 10px;
			letter-spacing: 1px;
			border-radius: 4px;
		}

		/* Audio Container */
		.audio-container {
			background: url('../../assets/img/podcast.png') no-repeat center center;
			background-size: cover;
		}

		/* Align Child Items to the Bottom */
		.text-container > p {
			margin-top: auto; /* Push child item to the bottom */
		}

		.audio-container > * {
			margin-top: auto; /* Push child item to the bottom */
		}


		/* ======== QUIZ =========*/

		.text-container p {
			font-size: calc(var(--font-size-base) * 0.8);
			letter-spacing: 2px;
			margin: 0;
		}

		.text-container p a:link, 
		.text-container p a:visited,
		.text-container p a:hover,
		.text-container p a:active {
			text-decoration: none;
			line-height: 1;
			letter-spacing: 0;
		}

		.firefox .text-container p { 
			background-color: #000;
			padding: 7px 6px 9px 20px;
		}

		.firefox .text-container p a:link, 
		.firefox .text-container p a:visited { color: #fff}

		.firefox .text-container p a:hover,
		.firefox .text-container p a:active { color: rgb(72,160,247) }

		.chrome .text-container p {
			background-color: #F1F3F4;
			padding: 15px 6px 15px 20px;
			border-radius: 40px;
			font-size: calc(var(--font-size-base) * 0.8);
		}

		.chrome .text-container p a:link, 
		.chrome .text-container p a:visited,
		.chrome .text-container p a:hover,
		.chrome .text-container p a:active { color: #000 }

		.safari .text-container p {
			background-color: #F1F3F4;
			padding: 15px 6px 15px 20px;
			border-radius: 40px;
			font-size: calc(var(--font-size-base) * 0.8);
		}

		.safari .text-container p a:link, 
		.safari .text-container p a:visited,
		.safari .text-container p a:hover,
		.safari .text-container p a:active { color: #000 }		

		section ul > li span.inside-ul, section ul > li span.inside-ol, section ol > li span.inside-ol {
			display: block;
			line-height: 1.4;
			margin: -12px 0 0 0;
		  }