/* homepage style.css */


body {background-image: url(./media/linky-bg-2-l.jpg); background-color: #0c0d0e; background-size: cover; background-repeat: no-repeat; xmin-width: 100vw; xmin-height: 100vh; }
.background-cover {position: absolute; top:0; bottom:0; left:0; right:0; background: rgba(0,0,0,0.34);}

.intro-video {font-size: 16px; margin-top: 5px; xdisplay: flex; margin-bottom: 25px;}
.intro-video .xtext {border-bottom: 2px #76bfeb dotted; padding-bottom: 2px;}
.intro-video a {display: flex; align-items: center; gap: 5px; color: #24a4f1;}

svg {display: block;}

input {xoutline: none; border: none; border-radius: 5px; padding: 5px 15px 5px 15px; font-size: 18px; width: 9em; margin-bottom: 5px;}

.waiting-list-register-section {margin-top: 25px;}

body:not(.edit-waiting-list) .hide-if-not-showing-waiting-list {display: none;}
body.edit-waiting-list .hide-if-showing-waiting-list {display: none;}


/* fill */

body.fill {
	background-color: #1e1f20;
	color:#ced0d5;
	}

	/* upg: intersting abstract p2p artwork in bg if full screen 
	 * cool if live
	 * and cooler if showing sync progress happening, while you're entering data.
	 */


body.fill main {
	xmin-height: 100vh;
	}


/* contain */
body.contain {background-color: #38393c; xbackground: #1e1f20; color: #ced0d5;}


body.contain main {
	padding: 25px;
	background: #525458;
	min-height: 100vh;
	}

main {margin-left: 33vw; margin-top: 25vh; line-height: 1.65em;
	background: rgba(0,0,0,0.35);
	padding: 25px;
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
}

.intro-video .time {font-size: 75%;}

main h1 {text-shadow: 2.25px  2.25px #22223350; margin-bottom: 12px;}

main .hero {text-shadow: 1.5px  1.5px #22223350;}
main .extra {font-weight: bold; text-transform: uppercase;}

main .hero-description {font-size: 12px; line-height: 1.3em; xdisplay: none; }

main .ps {font-size: 14px; line-height: normal; opacity: 0.5;}

li {padding-bottom: 5px;}
ul {margin-bottom: 15px;}

main .call-to-action {margin-top: 50px;}
main .call-to-action .subtext {font-size: 12px; max-width: 225px; padding: 5px; line-height: 1.2em;}

main .learn-more-button {display: block; font-size: 14px; margin-top: 15px; text-transform: uppercase;}

.about {color: #517499; justify-content: center; padding: 50px; background-color: #333;}
.about .options {display: flex; gap: 7px; justify-content: center; margin-bottom: 5px;}
.about .subtext {display: flex; gap: 7px; justify-content: center; font-size: 9px;}
.about .subtext a {font-size: 12px;}


.hidden {display: none;}

/* .about {text-align: center; padding: 50px;} */

body:not(.is-sending-waiting-list-email) .hide-on-not-sending {display: none;}
body.is-sending-waiting-list-email .hide-on-sending {display: none;}



@media screen and (min-width: 575px)  {

	body {
		font-size: 28px;
		}

	main {margin-top: 33vh; padding-left: 50px;}

	main .hero .content  {
		xmax-width: min(33vw, 500px);
		}


	main .hero-description {font-size: 18px; margin-top: 25px;}


	.intro-video a {font-size: 24px;}

	body.contain main {
		width: 575px; 
		margin: auto;
		}
	
	}

@media screen and (min-width: 1280px)  {

	main .hero .content  {
		max-width: 850px;
		}


	main .hero-description  {
		max-width: 650px;
		xtext-align: justify;
		}

	}