@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 {

	/* Theme Colors */
	--black:#040404;
	--lightgrey:#CCC;
	--lightblack:#333;
	
	/* Gradient Colors */
	/* --bgimg:linear-gradient(135deg,dodgerblue,white,wheat); */

	/* Page Sizes */
	--dt:.5s;
	--pagewidth:100rem;
	--cornersize:.5rem;
	--headerheight:3.5rem;
	
	/* Box Shadows */
	--boxshadow:0 0 1rem 0 #fff2;
	--boxshadow:0 0 .25rem 0 #fff6;
}

body {

	--backcolor:var(--lightgrey);
	--forecolor:black;
}

body/* .dark */ {

	/* --backcolor:var(--lightblack); */
	--backcolor:var(--black);
	--forecolor:white;
}


body {background-color:var(--backcolor); background-image:var(--bgimg); margin:0;}
body {color:var(--forecolor); font-family:Nunito,sans-serif;}


/* Main Container */
div#container {background-color:var(--backcolor); color:var(--forecolor); min-height:100vh; /* padding:1rem; */}
/* div#container {display:grid; place-items:center; } */


/* Navbar */
/* div#container nav.navbar {} */
div#container nav.navbar {position:absolute; top:0; right:0; left:0; width:100%;}
div#container nav.navbar {background-color:var(--backcolor); /* min-height:4rem; */ padding:.5rem 1rem; box-shadow:var(--boxshadow);}
div#container nav.navbar div.bin {display:grid; grid-template-columns:repeat(3,1fr); justify-content:space-between; /* justify-content:center; */ align-items:center; max-width:var(--pagewidth); margin:0 auto;}
div#container nav.navbar div.bin div.left {display:flex; justify-content:flex-start;}
div#container nav.navbar div.bin div.right {display:flex; justify-content:flex-end;}
div#container nav.navbar div.bin div.brand {display:flex; justify-content:center;}
div#container nav.navbar div.bin div.brand img.logo {display:block; height:var(--headerheight); width:calc(var(--headerheight)*3); object-fit:cover;}

/* Navbar: Navigation Menu */
div#container nav.navbar div.bin div.navmenu {}
div#container nav.navbar div.bin div.navmenu ul.navlist {background-color:var(--backcolor);}
div#container nav.navbar div.bin div.navmenu ul.navlist {display:flex; flex-direction:row; align-items:center; list-style:none; padding:0; margin:0;}
div#container nav.navbar div.bin div.navmenu ul.navlist li.navitem {position:relative; padding:.125rem;}
div#container nav.navbar div.bin div.navmenu ul.navlist li.navitem.x {display:none;}
div#container nav.navbar div.bin div.navmenu ul.navlist li.navitem a.navlink {display:block; color:inherit; font-size:.875rem; text-decoration:none; white-space:nowrap; padding:.5em .75em;}
div#container nav.navbar div.bin div.navmenu ul.navlist li.navitem ul.droplist {background-color:var(--backcolor); display:none; list-style:none; padding:0; margin:0;}
div#container nav.navbar div.bin div.navmenu ul.navlist li.navitem ul.droplist {position:absolute; top:100%; margin-top:1em; box-shadow:var(--boxshadow);}
div#container nav.navbar div.bin div.navmenu ul.navlist li.navitem:hover ul.droplist {display:block;}
div#container nav.navbar div.bin div.navmenu ul.navlist li.navitem.active ul.droplist {display:block;}
/* div#container nav.navbar div.bin div.navmenu ul.navlist li.navitem ul.droplist li.navitem {} */
div#container nav.navbar div.bin div.navmenu div.navtoggler {display:none; cursor:pointer;}
div#container nav.navbar div.bin div.navmenu div.navtoggler svg.icon {display:block; font-size:1.75rem;}

/* Navbar: Control Panel */
div#container nav.navbar div.bin div.controlpanel {position:relative;}
div#container nav.navbar div.bin div.controlpanel div.searchbtn {cursor:pointer;}
div#container nav.navbar div.bin div.controlpanel div.searchbtn svg.icon {display:block; font-size:1.125rem;}
div#container nav.navbar div.bin div.controlpanel div.searchbar {position:absolute; top:100%; right:0;}
div#container nav.navbar div.bin div.controlpanel div.searchbar {background-color:var(--backcolor); display:none; padding:1rem; box-shadow:var(--boxshadow);}
div#container nav.navbar div.bin div.controlpanel.active div.searchbar {display:block;}
div#container nav.navbar div.bin div.controlpanel div.searchbar svg.icon {color:var(--backcolor);}
div#container nav.navbar div.bin div.controlpanel div.searchbar svg.icon {position:absolute; left:0; top:50%; transform:translateY(-50%); margin-left:1.75rem;}
div#container nav.navbar div.bin div.controlpanel div.searchbar input.searchquery {padding:.75rem 1rem; padding-left:2rem;}


/* General Section */
div#container section {/* border-radius:var(--cornersize); */ padding:1rem;}
div#container section div.grid {max-width:var(--pagewidth); width:100%; margin:0 auto; /* box-shadow:var(--boxshadow); */}


/* Hero Section */
div#container section.hero {/* background-color:white; */ text-align:center; margin-top:var(--headerheight);}
div#container section.hero div.grid {background-size:cover; background-image:url('./images/biglogo.jpg'); background-position:center;}
div#container section.hero div.grid {padding-top:50%; transition:.5s;}
div#container section.hero div.grid a.followbtn {background-color:white; color:black; font-size:1rem; display:block; max-width:fit-content; text-decoration:none; padding:.75rem 1.5rem; border-radius:.25rem; margin:0 auto;}
div#container section.hero div.grid a.followbtn span.caption {display:block;}
div#container section.hero div.grid p.countdown {font-size:1.5rem;}


/* Blog Section */
div#container section.blog {}
div#container section.blog div.grid {}
div#container section.blog div.grid ul.postlist {list-style:none; padding:0; margin:0;}
div#container section.blog div.grid ul.postlist li.postitem {}


/* Footer Section */
div#container section.footer {box-shadow:var(--boxshadow);}
div#container section.footer div.grid {text-align:center;}





/* Tablet Screen */
@media screen and (max-width:64rem) {

	/* Main Container */
	/* div#container {} */

	/* Navbar */
	/* div#container nav.navbar {} */
	/* Navbar: Navigation Menu */
	/* div#container nav.navbar div.bin div.navmenu {} */
	/* Navbar: Control Panel */
	/* div#container nav.navbar div.bin div.controlpanel {} */

	/* General Section */
	/* div#container section {} */

	/* Hero Section */
	/* div#container section.hero {} */
}

/* Big Smartphone Screen */
@media screen and (max-width:48rem) {

	/* Main Container */
	/* div#container {} */

	/* Navbar */
	/* div#container nav.navbar {} */
	/* Navbar: Navigation Menu */
	/* div#container nav.navbar div.bin div.navmenu {} */
	div#container nav.navbar div.bin div.navmenu ul.navlist {position:absolute;}
	div#container nav.navbar div.bin div.navmenu ul.navlist {display:none;}
	div#container nav.navbar div.bin div.navmenu.open ul.navlist {display:block;}
	div#container nav.navbar div.bin div.navmenu div.navtoggler {display:block;}
	/* Navbar: Control Panel */
	/* div#container nav.navbar div.bin div.controlpanel {} */

	/* General Section */
	/* div#container section {} */

	/* Hero Section */
	/* div#container section.hero {} */
	div#container section.hero div.grid {padding-top:100%;}
}

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

	/* Main Container */
	/* div#container {} */

	/* Navbar */
	/* div#container nav.navbar {} */
	/* Navbar: Navigation Menu */
	/* div#container nav.navbar div.bin div.navmenu {} */
	/* Navbar: Control Panel */
	/* div#container nav.navbar div.bin div.controlpanel {} */

	/* General Section */
	/* div#container section {} */

	/* Hero Section */
	/* div#container section.hero {} */
}