@import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);
:root {
	scroll-behavior: smooth;
}
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	padding: 0;
	font: 22px Roboto,sans-serif;
	background: white;
}
h1, h2, nav, b {
	color: seagreen;
}
h1, h2 {
	text-align: center;
	letter-spacing: -0.02em;
	line-height: 0.9;
}
a {
	font-weight: 300;
	text-decoration: none;
	color: rebeccapurple;
}
b {
	color: seagreen;
	letter-spacing: 0;
}
p {
	padding: 1em;
	max-width: 1000px;
	margin: 0 auto;
}
#features {
	max-width: 24em;
	margin: 0 auto;
}
nav {
	background:white;
	box-shadow: 0 0.5em 1em #0004;
	color:#666;
	letter-spacing:0;
}
nav ul {
	margin:0; padding:0;
	list-style:none;
}
nav li {
	display: inline-block;
	height:70px;
	line-height:70px;
	margin:0;
	padding:0 1em;
	cursor:pointer;
	transition:all 0.5s;
}
nav li:hover {
	background: #0002;
}
nav li img {
	height:50px;
	padding:2px;
	filter:drop-shadow(0 0 4px #0004);
	vertical-align:middle;
}
nav li a {
	color: inherit;
}
button, input[type="submit"] {
	display:inline-block;
	appearance:none;
	border:none;
	background:seagreen;
	font:inherit;
	color:white;
	padding:0.5em;
	border-radius:0.5em;
	cursor:pointer;
	transition:all 0.2s;
}
button:disabled {
	opacity:0.5;
	cursor:not-allowed;
}
input[type="text"],
input[type="number"],
input[type="password"] {
	border:1px solid #aaa;
	padding:0.5em;
	border-radius:0.5em;
	font:inherit;
}
#transfer_amount {
	width:4em;
}
button:active,
input[type="submit"]:active {
	transform: scale(0.95);
}
label {
	font-size: 0.8em;
}
#logo {
	width: 95%;
	max-width: 400px;
	filter: drop-shadow(0 3px 4px #0002);
}
.video {
	width: 100%;
	height: 400px;
	border: 0;
}
#l1, #r2, #l3 {
	min-height: 50vh;
}
#l1 { background: url(images/coins.jpg) center/cover; }
#r2 { background: url(images/aiart.jpg) center/cover; }
#l3 { background: url(images/keyboard.jpg) center/cover; }
fieldset {
	border: 1px solid #ccc;
	border-radius: 1em;
	margin: 1em auto;
	padding: 1em;
	max-width: 1000px;
}
fieldset legend {
	text-align: center;
	padding: 0.2em;
}
#currentlyworth {
	text-align: center;
	font-size: 0.8rem;
	margin: 0 auto;
	padding: 0.5em;
	border-radius: 0.5em;
	box-shadow: 0 0.5em 1em #0002;
}
#vandercard {
	display: grid;
	align-items: center;
	background: linear-gradient(#111, #333);
	max-width: 1000px;
	margin: 2em auto;
	padding: 1em;
	border-radius: 1em;
	box-shadow: 0 0.5em 1em #0002;
}
#card {
	display: block;
	margin: 0 auto;
	width: 336px;
}
#vandercard h2,
#vandercard span {
	margin: 0;
	color: white;
	text-align: left;
}
#currentlyworth .health {
	display: block;
	color: seagreen;
	font-size: 2rem;
}
#selectfundingsource {
	color: #666;
	font-size: 0.9em;
}
.health {
	font-weight: bold;
	color: forestgreen;
}
.vc_div, #cashoutmessage {
	display: none;
}
#vandercard-intro {
	display: grid;
	grid-gap: 1em;
	align-items: center;
	justify-items: center;
}
#vandercard-features {
	background: #dee;
	padding: 2em;
	border-radius: 2em;
	font-size: 0.9em;
}
#vandercard-amethyst {
	display: grid;
	grid-gap: 1em;
	align-items: start; /* shrink wrap items - for h2 gradient */
	background: linear-gradient(black, #111);
	color: white;
	padding: 1em;
}
#vandercard-amethyst h2 {
	font-size: 3em;
	margin: 0;
	text-align: left;
	background: linear-gradient(190deg, mediumpurple, rebeccapurple 50%, mediumpurple 50%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
#vandercard-amethyst img {
	max-width: 336px;
	animation: card 2s 0s infinite;
}
#vandercard-amethyst img:last-child {
	animation-duration: 0.2s;
}
#card-container {
	transform-style: preserve-3d;
	perspective: 500px;
}
@keyframes card {
	0%,100% { transform: rotatex(10deg) rotatey(10deg); filter: brightness(1); }
	25% { transform: rotatex(-10deg) rotatey(10deg); filter: brightness(1.3); }
	50% { transform: rotatex(-10deg) rotatey(-10deg); filter: brightness(1.3); }
	75% { transform: rotatex(10deg) rotatey(-10deg); filter: brightness(1); }
}

@media screen and (min-width:600px) {
	h1 {
		font-size: 5em;
	}
	.griddy {
		display: grid;
		grid: "l1 r1" "l2 r2" "l3 r3";
	}
	.griddy p {
		padding: 5em;
	}
	#currentlyworth {
		float: right;
		margin: 0.5em;
	}
	#vandercard {
		grid: auto / auto 1fr;
		padding: 0 1em;
	}
	#vandercard #card {
		width: 400px;
		height: 200px;
		object-fit: cover;
	}
	#vandercard-intro {
		grid: auto / auto auto;
	}
	#vandercard-amethyst {
		grid: auto auto / auto auto;
		padding: 3em;
	}
}