/********************************
STARTING AT MAIN - INDEX.HTML
********************************/
.index-main {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	justify-content: center;
}

.index-main>div {
	text-align: center;
}

.index-main .title {
	font-size: clamp(1rem, 8.5vw, 9.5rem);
}

.index-main .heading {
	font-size: clamp(1rem, 2.5vw, 2.5rem);
}

.index-main .button {
	align-self: center;
	font-size: clamp(1rem, 3vw, 3rem);
	line-height: .5;
	border: 4px solid black;
	border-radius: 180px;
	background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
	min-width: 100px;
	padding: 15px 30px;
	font-weight: bold;
	margin-top: 15px;
}

@media (hover: hover) {
	.index-main .button:hover::before {
		transform: scale(1.1);
		box-shadow: 0 0 15px black;
	}

	.index-main .button:hover {
		color: white;
		box-shadow: 0 0 5px black;
		text-shadow: 0 0 5px black;
	}
}

/* animated things */
@media screen and (min-width: 1000px) {
	.title {
		text-transform: uppercase;
		background-image: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
		background-size: auto auto;
		background-clip: border-box;
		background-size: 200% auto;
		color: #fff;
		background-clip: text;

		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: textclip 2s linear infinite;
		display: inline-block;
		font-size: clamp(1rem, 8.5vw, 9.5rem);
		margin-left: 5px;
		margin-right: 5px;
	}

	@keyframes textclip {
		to {
			background-position: 200% center;
		}
	}


	.sub-title {
		font-size: clamp(1rem, 2.5vw, 2.5rem);
		overflow: hidden;
		border-right: .15em solid black;
		white-space: nowrap;
		margin: 0 auto;
		letter-spacing: .15em;
		animation: typing 3.5s steps(40, end),
			blink-caret .75s step-end 3.5;
		border-right: .15em solid transparent;
	}

	@keyframes typing {
		from {
			width: 0
		}

		to {
			width: 100%
		}
	}

	/* The typewriter cursor effect */
	@keyframes blink-caret {

		from,
		to {
			border-color: transparent
		}

		50% {
			border-color: black;
		}

	}
}