styles.css

* {
	box-sizing: border-box;
}

body {
	font-size: 16px;
	font-family: 'Muli', sans-serif;
}

section {
	padding: 40px;
	min-height: 600px;
}

h1 {
	font-family: 'Sintony', sans-serif;
	font-size: 55px;
	line-height: 65px;
	color: white;
}

h2 {
	font-family: 'Sintony', sans-serif;
	font-size: 30px;
	border-bottom: 2px solid grey;
	margin: 0 0 20px 0;
	padding: 15px 0;
}

a::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: white;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
}

a:hover::before {
    visibility: visible;
    transform: scaleX(1);
}

a {
    position: relative;
    color: white;
    font-weight: bold;
    text-decoration: none;
}

.inner-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	z-index: 999;
}

.hero-section {
	position: relative;
	padding: 60px!important;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background: #0F1033;
}

.hero-section #world {
	position: absolute;
}

.hero-section p {
	margin: 50px 0;
	color: white;
	font-size: 18px;
}

.social-icons {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 160px;
}

.social {
	color: white;
	cursor: pointer;
	transition: all .4s;
}

.social:hover {
	opacity: 60%;
}

@media (max-width: 980px) {
	.hero-section {
		text-align: center;
		padding: 20px!important;
	}
	.hero-section h1 {
		font-size: 50px;
		line-height: 55px;
	}
	.social-icons {
		margin: 0 auto;
	}
}


.gradient-text {
  background-color: #FF3B38;
	background-image: linear-gradient(
			45deg,
			#FF3B38 16.666%,
			#F27500 16.666%,
			#F27500 33.333%,
			#FFC938 33.333%,
			#FFC938 50%,
			#32C17E 50%,
			#32C17E 66.666%,
			#544FFF 66.666%,
			#544FFF 83.333%,
			#C13286 83.333%
		);
  background-size: 100%;
  background-repeat: repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	animation: rainbow-text-rev 1.5s cubic-bezier(.6, -0.3, .44, 1.36) forwards;

}

.gradient-text:hover{
	animation: rainbow-text 1.5s cubic-bezier(.6, -0.3, .44, 1.36) forwards;
}

@keyframes rainbow-text-rev {
    0% {
        background-size: 280%;
    }
    20% {
        background-size: 280%;
    }
    100% {
        background-size: 100%;
    }
}

@keyframes rainbow-text {
    0% {
        background-size: 100%;
    }
    80% {
        background-size: 280%;
    }
    100% {
				background-size: 280%;
    }
}