.hero-background {
	width: 100%;
	height: 100%;
	position: absolute;
	background: radial-gradient(circle at 275px 95%,
        #FBBF24 0%,
        #FDBA74 10%,
        #60A5FA 40%,
        #1E3A8A 100%);

	animation: fadeIn 2.5s ease-in forwards;
}

.hero-content {
    width: 100%;
    height: 100%;
    position: relative;
}

.main-greeting {
	margin: 0;
	padding-top: 30vh;
	opacity: 0;

    translate: 0 -130px;
	animation:
		fadeIn 1s 2s ease-in-out forwards,
		slideIn 1s 2s ease-in-out forwards;
}

.sub-text {
	opacity: 0;
	animation: fadeIn 0.4s 3.25s ease-in forwards;

}

.scrolling-text {
	white-space: pre;
    translate: 100vw 0;
	animation:
		slideIn 1s 4s ease-out,
		scrollLeft 50s 5s linear infinite;
}

.tag {
    opacity: 0;
}

#sun {
	width: 150px;
	height: 150px;
	border-radius: 50%;

	position: absolute;
	bottom: -5%;
	left: 200px;

	background: #fff4d6;
	opacity: 0.4;

	box-shadow:
		0 0 20px #fff59d,
		0 0 40px #fff176,
		0 0 60px #ffca28,
		0 0 80px #ff9800,
		0 0 100px #f57c00;

    z-index: 5;
	animation:
		sun-slideIn 3s ease,
		hover 1s 3s ease-in-out infinite alternate;
}

.fade-out {
    animation: fadeOut 1s ease-in-out forwards;
}
.slide-out {
    animation: slideOut 1s ease-in-out forwards;
}