#hero {
	flex: 1;
}

#hero > div {
	padding: 10em 0;
}

#hero .heroBodyText {
	position: relative;
	/* top: 100%;
	transform: translateY(-100%);
	width: 50%; */
}

/* #hero .desc::before {
	content: "Pleased to meet you. I’m 15 years old and based in Sydney, Australia. I mostly create open-source projects, which I both design and produce. At the moment, I’m learning C++ with skillsets in web development & design, graphics design, various fields of technology and photography. ";
	position: absolute;
    z-index: -1;
    opacity: .4;
} */

#role {
	--content: "|";
	--animation: blink 0.5s infinite linear alternate;
	margin-top: -20px;
	margin-right: -20px;
	padding: 20px;
	padding-right: 0;
	z-index: 1;
}

#role::after {
	font-weight: 300;
	margin-left: -10px;
	content: var(--content);
	animation: var(--animation);
}

@keyframes blink {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 0.75;
	}
}

.sfx:has(svg) {
	position: relative;
	height: 20px;
	width: 20px;
	margin-left: auto;
	margin-right: 16px;
}

/* the next thing */

#about {
	display: flex;
	align-items: center;
	/* justify-content: center; */
}

#about h1 {
	transform: translateY(-25%);
}

.carousel {
	position: absolute;
	display: flex;
	transform: translateY(100px);
}

.flyBy {
	/* position: absolute; */
	transform: translateY(10em);
	animation: fly 25s linear infinite;
}

@keyframes fly {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}

.carousel ul {
	display: flex;
	flex-direction: row;
	gap: 20px;
}

.carousel li {
	list-style: none;
	font-size: 2em;
	white-space: nowrap;
}

.carousel li::before {
	content: "•";
	margin-right: 20px;
}

/** Progression section */
#next {
	align-items: center;
	justify-content: center;
	background: white;
	width:100%;
	height: 100vh;
}

#next > div {
	height: 100%;
	display: grid;
}

#next p {
	margin: auto;
	justify-self: flex-start;
}

#next .container {
	justify-self: flex-end;
}

#next .container {
	white-space: nowrap;
}

#next #select {
	display: inline-block;
	width: 320px;
	border: solid 5px;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-image: linear-gradient(90deg, var(--accent1), var(--accent2)) 10;
	cursor: pointer;
}

.mouseIndicatorContainer {
	opacity: 0%;
	position: absolute;
	bottom: 10vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	filter: blur(50px);
}

.mouseIndicatorContainer .outer {
	height: 60px;
	width: 30px;
	border: 2px solid var(--text);
	border-radius: 25px;
	background: var(--bg);
}

.mouseIndicatorContainer .inner {
	margin-left: auto;
	margin-right: auto;
	top: 2.5px;
	height: 25px;
	width: 25px;
	background: var(--text);
	border-radius: 50%;
	position: relative;
	animation: scrollIndicator 2s ease-in-out infinite alternate;
	animation-delay: 6s;
}

@keyframes scrollIndicator {
	0% {
		top: 2.5px;
	}
	100% {
		top: 32.5px;
	}
}

.mouseIndicatorContainer p {
	font-weight: 600;
}