@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@100;300;400;500;600&display=swap');

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

:root {
	--red:#cb5660;
	--green:#82d482;
	--cyan:#23eef2;
	--blackglass:#0008;
	--blackglass:#000A;
}




/* Base */
html,
body {background-color:black; color:white;}
body {font-family:Nunito,sans-serif; text-align:center; margin:0;}
div#container {display:flex; flex-direction:column; justify-content:space-between; align-items:center;}
div#container {position:relative; text-transform:uppercase; max-width:100em; min-height:100vh; margin:0 auto;}
/* Button Links */
div#container a.btn {color:inherit; text-decoration:none; text-transform:uppercase;}
div#container a.btn {display:grid; place-items:center; padding:.75em 1em .625em; /* border:.125em solid */ /* var(--green) */; border-radius:.25em;}
div#container a.btn.pr {background-color:white; color:black; /* border-color:white; */}
div#container a.btn.pr:hover {background-color:var(--green); color:black; /* border-color:var(--green); */}
/* Navigation List */
div#container ul.navlist {display:flex; flex-direction:row; align-items:center; /* grid-gap:1em; */}
div#container ul.navlist {list-style:none; padding:0; padding:.5rem; margin:0;}
div#container ul.navlist li.navitem {padding:.25rem;}
div#container ul.navlist li.navitem a.navlink {transition:.25s;}


/* Hero */
div#container div.hero {position:relative; padding:1em;}
div#container div.hero img.logo {font-size:3em;}
div#container div.hero img.logo {width:100%; /* max-width:65rem; */ /* margin-top:-10em; */}
/* Hero Vignette */
div#container div.hero div.vignette {position:absolute; inset:0;}
div#container div.hero div.vignette {background-color:var(--blackglass); display:flex; flex-direction:column; justify-content:center; align-items:center;}
div#container div.hero div.vignette p.textcopy {font-size:2em; font-size:1.5em; max-width:40em; margin:.5em auto;}
/* div#container div.hero div.vignette div.ctabox {} */
div#container div.hero div.vignette div.ctabox a.herolink {display:inline-grid; font-size:1.75em; /* font-size:2em; */ padding:.75em 2em .625em; margin-top:1em;}


/* Navigation Menu */
div#container nav.navmenu {position:absolute; top:0; right:0;}
/* Navigation Menu List */
/* div#container nav.navmenu ul.navlist {} */
/* div#container nav.navmenu ul.navlist li.navitem {} */
div#container nav.navmenu ul.navlist li.navitem a.navlink {min-width:6em;}


/* Footer */
div#container footer.footer {padding:3rem 0;}
/* Footer Navigation Menu List */
/* div#container footer.footer ul.navlist {} */
/* div#container footer.footer ul.navlist li.navitem {} */
/* div#container footer.footer ul.navlist li.navitem a.navlink {} */
div#container footer.footer ul.navlist li.navitem a.navlink svg.icon {display:none;}
div#container footer.footer ul.navlist li.navitem a.navlink span.caption {display:block;}




/* Small Screen */
@media screen and (max-width:32rem) {

	/* Base */
	div#container {min-height:87.5vh;}
	/* Button Links */
	/* div#container a.btn {} */
	/* Navigation List */
	div#container ul.navlist {flex-direction:column-reverse; align-items:stretch;}
	/* div#container ul.navlist li.navitem {} */
	div#container ul.navlist li.navitem a.navlink {font-size:.875em;}

	/* Hero */
	/* div#container div.hero {} */
	/* Hero Vignette */
	div#container div.hero div.vignette {position:static;}
	div#container div.hero div.vignette p.textcopy {font-size:1em;}
	/* div#container div.hero div.vignette div.ctabox {} */
	div#container div.hero div.vignette div.ctabox a.herolink {font-size:1.125em;}

	/* Navigation Menu */
	/* div#container nav.navmenu {} */
	div#container nav.navmenu ul.navlist li.navitem a.navlink.pr {display:none;} 

	/* Footer */
	div#container footer.footer {padding:2rem 0;}
	div#container footer.footer ul.navlist {flex-direction:row;}
	/* div#container footer.footer ul.navlist li.navitem {} */
	/* div#container footer.footer ul.navlist li.navitem a.navlink {} */
	div#container footer.footer ul.navlist li.navitem a.navlink svg.icon {display:block;}
	div#container footer.footer ul.navlist li.navitem a.navlink span.caption {display:none;}
}