@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap');
body {
	margin: 0;
	min-height: 100vh;
	display: grid;
	grid-template-rows: auto 1fr auto;
	background-color: #FDFBD4;
	font: 400 16px/1.5 'Manrope', sans-serif;
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.5rem;
}

header p {
	margin: 0;
	text-align: left;
}

.header-links {
	display: flex;
	gap: 1rem;
}

.hero {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
}

.hero h1 {
	margin: 0;
}

#changetxt {
	display: inline-block;
	white-space: nowrap;
	transform-origin: left center;
	transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform, opacity, width;
}

.text-drop-out {
	animation: textDropOut 320ms ease-in forwards;
}

.text-drop-in {
	animation: textDropIn 320ms ease-out forwards;
}

body > * {
    animation: renderanimation 1s ease-out forwards;
}

@keyframes renderanimation {
		0% {
				transform: translatey(-1vh);
				opacity: 0;
		}
		100% {
				transform: translatey(0);
				opacity: 1;
		}
}

@keyframes textDropOut {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	100% {
		transform: translateY(18px);
		opacity: 0;
	}
}

@keyframes textDropIn {
	0% {
		transform: translateY(-18px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}
.small {
	font-size: 0.875rem;
}
div a {
	color: inherit;
	text-decoration: none;
}