*{margin:0;padding:0;}
[v-cloak]{ display: none; }
html{
	min-height:100vh;
}
html{
	/*
	background-color: #726cf8;
	background: linear-gradient(193deg, #726cf8, #e73c7e, #23a6d5, #23d5ab);
    background-size: 800% 800%;
	animation: bgmove 24s ease infinite;
	
	color:white;
	/**/
	/*
	alt
	background-color: #726cf8;
	background-image: linear-gradient(315deg, #726cf8 0%, #e975a8 74%);
	/**/
	background:#f8f7fb;
	color:#200B4F;
}
html, input, textarea, select{
	font-family: 'Space Grotesk', sans-serif;
	font-size:13pt;
	font-weight:400;
}
@keyframes bgmove {
    0%{background-position:71% 0%}
    50%{background-position:30% 100%}
    100%{background-position:71% 0%}
}
h1{
	font-size:1.57rem;
	font-weight:400; 
	margin-top:1em;
	transform:translateY(0.15em);
}
p{
	margin-bottom:1em;
}
.main{
	position:relative;
}
.nowrap{
	white-space:nowrap;
}


button, .btn{
	display:inline-block;
	text-decoration:none;
	text-align:center;

	font-size:1em;
	border:0;
	outline: none;
	border-radius:3px;
	padding: 0.5em 1em;
	box-sizing: border-box;
	line-height: 1.5;
	vertical-align: middle;
	
	position:relative;
	overflow:hidden;
	font-weight:400;
	cursor:pointer;
	
	background:	#FF746F;
	background: linear-gradient(113deg, #FE827A 0%, #FE5858 50%, #FE5858 100%);
	background-size:200%;
	color:#FDE4E7;
	
	transition: all 0.13s linear;
}
button.pink, .btn.pink{
	background-color: #da72a7;
	background-image: linear-gradient(113deg, #FF7676 0%, #9F6AF5 50%, #9F6AF5 100%);
}
button.transparent, .btn.transparent{
	background: transparent;
	border:1px solid #FF746F;
	color:#FF746F;
}
button.pink.transparent, .btn.pink.transparent{
	background:linear-gradient(113deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%);
	border: 1px solid #9F6AF5;
	color:#9F6AF5;
}
button.disabled{
	background:#e9e1ee;
	color:white;
	pointer-events:none;
}
button:not(.disabled):hover, .btn:not(.disable):hover{
	/*background-color:#FE5858;*/
	background-color:#FF746F;
	background-position:100%;
	transition:background-position 0.2s cubic-bezier(0.29, 0.01, 0.41, 1.02);
}
button.transparent:not(.disabled):hover, .btn.transparent:not(.disable):hover{
	color:#f8f7fb;
	transition:all 0.2s cubic-bezier(0.29, 0.01, 0.41, 1.02);
}
button.pink.transparent:not(.disabled):hover, .btn.pink.transparent:not(.disable):hover{
	background:linear-gradient(113deg, #FF7676 0%, #9F6AF5 50%, #9F6AF5 100%);
}
.red{
	color:#fe5959;
}

.diamonds{
	position:absolute;
	top:0;left:0;
	width:100%;
	min-height:100vh;
	height:100%;
	overflow:hidden;
}
.diamond {
	position: absolute;
	background: url('/img/diamond.png') center center no-repeat;
	background-size: auto;
	background-size: contain;
	width: 80vw;
	height: 80vw;
	max-width: 1000px;
	max-height: 1000px;
	margin-left: -40vw; margin-top:-40vw;
	left: 70%;
	top: 40vh;
	/*pointer-events: none;*/
	transition: transform 0.07s ease-out;
}
.diamond.d2{
	width:60vw; height:60vw;
	max-width:750px;max-height:750px;
	margin-left:-30vw; margin-top: -30vw;
	left: 33%; top:90vh;
}
.diamond.d3{
	width:25vw; height:25vw;
	max-width:312.5px;max-height:312.5px;
	margin-left:-12.5vw; margin-top: -12.5vw;
	left: 17%; top:35vh;
}
@media (min-width:1250px){
	.diamond.d1{ margin-left:-500px; margin-top:-500px; }
	.diamond.d2{ margin-left:-375px; margin-top:-375px; }
	.diamond.d3{ margin-left:-156.25px; margin-top:-156.25px; }
}
@media (max-width:640px){
	.diamond.d1{
		width: 150vw; height: 150vw;
		margin-left: -75vw; margin-top: -75vw;
	}
	.diamond.d2{
		width:100vw; height:100vw;
		margin-left:-50vw; margin-top:-50vw;
		left: 13%;
		top: 91vh;
	}
	.diamond.d3{ top:15vh; }
}

.centerbox{
	position:relative;
	margin:auto;
	box-sizing:border-box; 
	text-align:center;
	min-height:100vh;
	padding:1em;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
}
.centerbox h1{
	display:flex;
	flex-direction:row;
	margin-top:0;
}
.homebox .intro{
	width:100%;
	max-width:40em;
}
.homebox p{
	max-width:34em;
	margin:auto;
	margin-bottom:1rem;
}
.homebox .desc{
	font-weight:900;
}
.homebox .mailplease{
	font-size:0.95em;
	margin-bottom:2.5rem;
}
.logo{
	position:relative;
	width:30rem;
	max-width:100%;
	margin-left:auto; margin-right:auto;
	margin-bottom:2em;
}
.homebox .logo{
	width:40rem;
}
.logo img{
	max-width:100%;
}
.logo .beta{
	position: absolute;
	right: 1%;
	margin-right: -0.5em;
	top: 2%;
	width: 16%;
}
.logo .beta-textual{
	position: absolute;
	right: 7%;
	margin-right: -0.5em;
	top: 2%;
	font-size: 1.5em;
	font-weight: 700;
	color: #dff8fe;
	text-shadow: 0 0 3px rgba(206, 91, 244, 0.7);
	background: linear-gradient(00deg, #265FAE 0%, #96D1F6 55%, #A1D7EA 100%);
	background-clip: border-box;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
	color: transparent;
}
.logo .byadspawn{
	position: absolute;
	white-space: nowrap;
	font-size: 1rem;
	right: -0.5em;
	bottom: 0;
	color: #9e6efe;
}
.logo .byadspawn img{
	max-width: none;
	width: 5em;
	margin-left: 0.2em;
}
.message{
	border-radius: 4px;
	background: rgba(255,255,255,0.25);
	opacity: 1;
	max-width: 30em;
	margin: auto;
	padding: 1em;
	display:none;
}
.form-group{
	display:block;
	position:relative;
	margin:0 auto;
	margin-bottom:1em;
}
html.index .form-group{
	max-width:15em;
}
.form-group.labelled input::placeholder{
	color:transparent;
	opacity:0;
}
.form-group input, textarea{
	color:#200B4F;
	padding: 0 0.75em;
	border: 1px solid #200B4F;
	border-radius: 4px;
	font-size: 1em;
	box-sizing: border-box;
	background: transparent;
	line-height: 2;
}
textarea{
	line-height:1.2;
	padding: 0.3em 0.5em;
}
.form-group label.floating{
	position: absolute;
	left: 0.79em;
	top: 0.37em;
	transition: all 0.15s cubic-bezier(.55,.06,.68,.19);
	pointer-events: none;
}
.form-group input:focus ~ label.floating,
.form-group input:not(:placeholder-shown) ~ label.floating {
	top: -1.7em;
	left: -0.1em;
	font-size: 0.8em;
	transition-timing-function:cubic-bezier(.22,.61,.36,1);
}
.form-group label.centered{
	width: 100%;
	text-align: center;
	left: 0;
}
.form-group input:focus ~ label.gobottom,
.form-group input:not(:placeholder-shown) ~ label.gobottom {
	margin-top:0.1em;
	top:100%;
}
input:disabled, button:disabled{
	opacity:0.75;
	pointer-events:none;
}

.intro .request{
	max-width:30em;
	margin:auto;
	margin-top:3em;
	margin-bottom:3em;
	padding:0px;
	box-shadow:0 1em 3em -1em rgba(0,0,0,0.25);
	background:white; /*gradient bg*/
	transition:max-width 0.3s ease-in-out;
	border-radius:3px;
}
.intro .request .inside{
	position:relative;
	border-radius:3px;
	
	/*regular adspawn gradient but softer*/
	background: linear-gradient(90deg, #6B29FF90, #935efe90, #fcdbdd90, #FE827A90, #6B29FF90);
	background: linear-gradient(90deg, rgba(107, 41, 255, 0.56), rgba(147, 94, 254, 0.56), rgba(252, 219, 221, 0.56), rgba(254, 130, 122, 0.56), rgba(107, 41, 255, 0.56));
	background-attachment: fixed;
	background-size:200% auto;
	animation: gradientmove linear 10s infinite; 
	
	padding:1em;
}
@keyframes gradientmove {
	0% { background-position: 0 0; }
	100% { background-position: 200% 0; }
}
.intro .request .form-group{
	margin:0 auto;
	width:100%;
	max-width:none;
}
.intro .request .inputwrap{
	position:relative;
}
.intro .request .email{
	box-sizing:border-box;
	border-width:0;
	text-align:left;
	background:rgba(255,255,255,0.5);
	box-shadow: 0 0.2em 1.3em 0 rgba(0,0,0,0.05);
	margin:0;
	margin-bottom: 0.75em;
	margin-top: 0.75em;
	padding: 0.5em 1em;

	font-weight:400; 
	line-height:1.5;
	color:#5b4c7d;
	text-align:left;
	vertical-align: middle;
	width:100%;
}
.intro .request .email::placeholder{
	color:#5b4c7d;
	font-style:normal;
	text-align:left;
}
.intro .request .email:focus{
	outline: 1px solid rgba(255,255,255, 0.15);
	box-shadow: rgba(255, 255, 255, 0.15) 0 0 1em 0.2em;
}
.intro .request .email:focus::placeholder{
	color:rgba(91, 76, 125, 0.5);
}
.intro .request button.disabled{
	opacity:0.8;
	background:	#FF746F;
	background: linear-gradient(113deg, #FE827A 0%, #FE5858 50%, #FE5858 100%);
	background-size:200%;
	color:#FDE4E7;
	pointer-events:none;
}

@media (min-width:520px){
	.intro .request .inputwrap{
		display:flex;
		align-items: center;
		justify-content: space-between;
		gap:0.5em;
	}
	.intro .request .email{
		width:auto;
		flex: 1 0 0%;
	}
	.intro .request button{
		flex: 0 0 auto;
	}
}

.badinput{
	animation: shake 0.39s ease-out both;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
}
@keyframes shake {
	87.5% { transform: translate3d(-1px, 0, 0); }
	75% { transform: translate3d(2px, 0, 0); }
	12.5%, 37.5%, 62.5% { transform: translate3d(-4px, 0, 0); }
	25%, 50% { transform: translate3d(4px, 0, 0); }
}

.how{
	max-width:1100px;
	margin-left:auto;
	margin-right:auto;
}
.how-title{
	font-size:2em;
	text-transform:uppercase;
	margin-top:3rem;
	margin-bottom:1.25rem;
	color:#6B29FF;
}
.how li{
	list-style:none; margin:0;
	padding:1em;
	background:white;
	border-radius:1em;
	box-shadow:0 1em 1em rgba(0,0,0,0.1);
	margin-bottom:2em;
}
.how li:before{
	content:"";
	display:block;
	background:url('/img/eye.svg') center center no-repeat;
	background-size:contain;
	margin:auto;
	width:5em;
	padding-top:5em;
	margin-bottom:1em;
}
.how .pick:before{
	width:4.5em;
	background-image:url('/img/tasty.svg');
}
.how .mix:before{
	width:4em;
	background-image:url('/img/clapperboard.svg');
}
@media (min-width:500px){
	.logo .byadspawn{
		font-size: 1.2rem;
		right: auto;
		left: 73%;
		bottom: 8%;
	}
}
@media (min-width:640px){
	.how{
		display:flex;
		flex-direction:row;
		gap:1em;
	}
	.how li{
		flex:1;
	}
	/*
	.how li:before{
		width:40%;
	}
	.how .pick:before{
		width:35%;
	}
	.how .mix:before{
		width:30%;
	}
	*/
}
@media (min-width:900px){
	.how{
		gap:3em;
	}
	.how li:before{
		padding-top:4em;
	}
	.how .analyze:before{
		width:4em;
	}
	.how .pick:before{
		width:3.5em;
	}
	.how .mix:before{
		width:3em;
	}
}
@media (min-width:1400px){
	.how{
		gap:4em;
	}
	.how li{
		padding:1.5em;
	}
}

@media (min-height:30em){
	.homebox .logo{
		margin-top:2em;
	}
}
@media (min-height:40em){
	.homebox .logo{
		margin-top:2em;
	}
	.how-title{
		margin-bottom:2rem;
	}
}
@media (min-height:50em){
	.logo{
		width:40rem;
	}
	.homebox .intro{
		max-width:50em;
	}
	.homebox .logo{
		width:50em;
		margin-top:3em;
	}
}