:root {
    color-scheme: light dark;

	--bg:#fff;
	--light-bg:#f7f7f7;
	--dark-bg:#ccc;
	

	--light-fg:#777;
	--fg:#444;
	--dark-fg:#000;

	--fs:0.9rem;
	--medium-fs:1rem;
	--large-fs:1.2rem;
	--xlarge-fs:1.4rem;
	--xxl-fs:1.6rem;

	--lrpad:calc((100vw - 1000px) / 2);
}

/* common */
.thick { font-weight:bold; }
ul { list-style-type:disc; margin-left:1.5em; }
li { line-height:1.6em; }
p { margin:1.2em 0; }
a { color:inherit; }
a:visited { color:inherit; }
span.green { color:rgba(0,172,127, 1); }
span.blue { color:#07c; }
span.gray { color:#777; }
div.right { text-align:right; }
span.itl { font-style:italic; }

/* top level set the width and height and defaults */
html { width:100%; height:100%; scroll-behavior:smooth; scroll-padding-top:5rem; }
body {
	width:100%;
	height:100%;
	font-family: Mulish, sans-serif;
	background-color:var(--bg);
	color:var(--fg);
	font-size:var(--fs);
	line-height:1.6em;
}

/* header */
div.header {
	padding:1.25rem var(--lrpad);
	display:flex;
	justify-content:space-between;
	align-items:center;
	position:sticky;
	top:0;
	-webkit-backdrop-filter:blur(5px);
	backdrop-filter:blur(5px);
	background-color:rgba(255,255,255,0.7);
	z-index:10;

	div.logo { text-transform:uppercase; }
	div.logo img { width:1.5rem; height:1.5rem; }
	div.logo span { font-size:1.9rem; font-weight:bold; color:var(--dark-fg); }
	div.menu > div { display:inline-block; padding:0 1rem; color:var(--fg); font-size:var(--medium-fs); }
	div.contact_us button { padding:0.5rem 1.5rem; border-radius:1rem; background-color:#07c; color:#fff; border:0; font-size:var(--fs); cursor:pointer; }
}

/* footer */
div.footer {
	display:flex;
	justify-content:space-between;
	font-size:var(--fs);
	color:#bbb;
	background-color:var(--dark-fg);
	padding:2rem var(--lrpad);
	line-height:1.7rem;

	a { color:#0095ad; margin-left:1rem; }
}

/* each section, set the padding and default font size */
div.web_section {
	padding:8em var(--lrpad);
	font-size:var(--medium-fs);
}

/* customize the different sections */
div.web_section.gray { background:linear-gradient(180deg,rgba(247, 247, 247, 1) 30%, rgba(225, 225, 225, 1) 100%); box-shadow:inset 0 0 5px rgba(0,0,0, 0.3); }
div.web_section.green { background:linear-gradient(180deg,rgba(0, 172, 127, 0.7) 0%, rgba(0, 172, 127, 0.5) 35%, rgba(0, 172, 127, 0.7) 100%); color:#000; }
div.web_section.blue { background:radial-gradient(circle,rgba(85, 172, 238, 0.3) 0%, rgba(85, 172, 238, 0.7) 100%); }
div.web_section.blue div.box { background:rgba(255,255,255, 0.8); }

/* title of each section */
div.section_title {
	font-size:2.4rem;
	line-height:3rem;
	font-weight:450;
	color:var(--dark-fg);
	margin-bottom:1.2em;
}

/* first section is a bit taller */
#home {
	padding:9em var(--lrpad);
	div.section_title { font-size:3.6rem; line-height:4.5rem; margin-bottom:1.5rem; }
}

/* text part of each section */
div.section_desc { padding-right:10%; }
#compliance div.section_desc { display:flex; justify-content:space-between; padding-right:0; }
div.info { width:30rem; height:26rem; padding:0; display:flex; flex-direction:column; justify-content:center; }

/* 2 column text blocks that are ~50 chars wide*/
div.halftext { display:inline-block; width:30rem; padding:0 2rem 0 0; vertical-align:top; }
div.halftext.last { padding:0; }

/* PT and FTT section */
div.token_cards {
	display:flex;
	gap:0;
	justify-content:start;
	border-radius:2rem;
	box-shadow:0px 2px 3px rgba(0, 0, 0, 0.6);

	div.section_subtitle { background-color:rgba(255,255,255, 0.3); padding:0.8rem; }

	div.half_card { width:50%; padding:1.25rem; color:#fff; }
	div.half_card.blue {
		background:linear-gradient(180deg,rgba(85, 172, 238, 0.7) 0%, rgba(85, 172, 238, 1) 100%);
		border-radius:2rem 0 0 2rem;

		div.section_subtitle { border-radius:1.8rem 0 0 1.8rem; margin:-0.62rem -1.25rem 2.5rem -0.62rem; box-shadow:0px 2px 3px rgba(150,150,150, 0.3); }
	}
	div.half_card.green {
		background:linear-gradient(180deg,rgba(0, 172, 127, 0.7) 0%, rgba(0, 172, 127, 1) 100%);
		border-radius:0 2rem 2rem 0;

		div.section_subtitle { border-radius:0 1.8rem 1.8rem 0; margin:-0.62rem -0.62rem 2.5rem -1.25rem; box-shadow:2px 2px 3px rgba(150,150,150, 0.3); }
	}
	div.half_card div.thick { font-size:1.1rem; margin-bottom:2rem; display:inline-block; vertical-align:top; }
	div.half_card div.image { display:inline-block; width:3em; height:3em; margin-right:1.5em; background-color:#fff; }
	div.half_card div.section_subtitle {
		font-size:1.5rem;
		font-weight:600;
		margin-bottom:1.8em;
		text-align:center;
		
	}

	img { width:2rem; height:2rem; margin-top:0.5rem; margin-right:1rem; }
}

/* cards displayed horizontally */
div.hboxes { display:flex; justify-content:space-between; margin-top:2em; }
div.hboxes div.box {
	padding:1.4rem;
	border-radius:25px;
	/*background:linear-gradient(0deg, rgba(235, 235, 235, 1) 0%, rgba(255, 255, 255, 1) 100%);*/
	background-color:var(--bg);
	border:0;
	box-shadow:0px 1px 2px rgba(0, 0, 0, 0.3);

	div.thick { font-size:1.1rem; margin-bottom:1.4em; color:#555; }
}

div.hboxes.two div.box { width:27.5rem; }
div.hboxes.three {
	margin-top:4rem;
	div.box { width:16rem; }
	img { margin:0.5rem 1em 0 0; float:left; width:2rem; height:2rem; }
}
div.hboxes li { font-size:var(--fs); padding:3px 0; }
 
/* circles in the transparency section */
div.hboxes.circle {
	display:block;

	div.circle {
		display:inline-block;
		text-align:center;
		border-radius:50%;
		width:13rem; !important;
		height:11rem;
		padding:5rem;
		z-index:2;
	}

	div.thick { margin:1rem 0 1.4rem 0; }
	div.left { background:rgba(0,172,127, 0.7); color:#fff; }
	div.center { margin-left:-4rem; margin-right:-4rem; z-index:3; position:relative; background:rgba(255,255,255, 0.7); }
	div.center div.thick { color:#555 !important; }
	div.right { background:rgba(85,172,238, 0.7); color:#fff; }
}
div.hboxes.circle div.box div.thick { color:#fff; font-size:1.4rem; }

/* horizontal data flow in How it works section */
div.data_flow {
	margin-top:2em;
	display:flex;
	gap:20px;
	background-color:rgba(255, 255, 255, 0.6);
	padding:10px 15px;
	border-radius:15px;

	div.step { font-weight:500; }
	div.next { color:var(--light-fg); opacity:0.5; }
}

/* Compliance section */
div.compliance {
	height:26rem;
	width:30rem;
	padding:0;
	overflow:hidden;
	position:relative;

	div.cdesc { display:none; }
	div.edge { width:8rem; height:8rem; border-radius:50%; background-color:rgba(255,255,255, 1); position:absolute; top:calc(50% - (8rem / 2)); left:calc(50% - (8rem / 2)); z-index:2; border:1px solid #eee; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; }
	div.oc12 { transform:translate(0, -8.5rem); }
	div.oc10 { transform:rotate(210deg) translate(8.5rem) rotate(-210deg); }
	div.oc2 { transform:rotate(330deg) translate(8.5rem) rotate(-330deg); }
	div.oc4 { transform:rotate(30deg) translate(8.5rem) rotate(-30deg); }
	div.oc8 { transform:rotate(150deg) translate(8.5rem) rotate(-150deg); }
	div.oc6 { transform:translate(0, 8.5rem); }
	div.center { width:10rem; height:10rem; border-radius:50%; background-color:rgba(0,172,127, 0.5); color:#fff; padding:4rem; position:absolute; left:calc(50% - (10rem / 2)); top:calc(50% - (10rem / 2)); z-index:3; display:flex; justify-content:center; align-items:center; font-size:2rem; font-weight:bold; box-sizing:border-box; }

	div.thick { text-align:center; font-size:0.9rem; }
	div.location { text-align:center; }
	div.location div { display:inline-block; padding:0; color:#777; font-size:0.9rem; }
}

/* LNG section */
div.lng {
	div.stages { margin-bottom:2rem; }
	div.stage { display:inline-block; padding:1rem; width:17rem; background:linear-gradient(0deg, rgba(235, 235, 235, 1) 0%, rgba(245, 245, 245, 1) 100%); margin:0 0 1rem 1rem; border-radius:2rem; box-shadow:0px 1px 2px rgba(0, 0, 0, 0.3); }
	div.stage.left { margin-left:0; }
	img { width:3rem; height:4.5rem; margin-right:1rem; float:left; }
	div.stage div.thick { color:#07c; margin-bottom:0.3rem; }

	div.halftext { padding-top:2rem; }
}

/* Build Trust section */
span.checkmark { font-size:18px; color:rgba(0,172,127, 1); margin-right:10px; }