@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); html, body { padding: 0; } body { background: linear-gradient( 160deg, rgb(5, 0, 18), rgb(30, 71, 47), rgb(51, 96, 63) ); background-repeat: no-repeat; background-attachment: fixed; } .main { display: flex; flex-direction: column; text-align: center; justify-content: center; align-items: center; height: 90vh; gap: 60px; } .container { margin: 0; h1 { opacity: 0; margin: 0; font-size: 60px; font-family: 'Poppins', sans-serif; font-style: bold; background: linear-gradient(140deg, #817d7d, #026d48); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transform: translateY(50px); } p { opacity: 0; font-family: 'Inter', sans-serif; font-size: 20px; color: rgb(93, 145, 120); margin: 0; } span { color: rgb(223, 222, 222); font-weight: 700; } } .links { display: flex; flex-direction: row; gap: 20px; a { text-decoration: none; opacity: 0; } p { margin: 0; background: -webkit-linear-gradient(140deg, #817d7d, #026d48); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: 'Poppins', sans-serif; font-size: 25px; } p:hover { background: -webkit-linear-gradient(140deg, #252424, #026d48); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } } .intro { animation: first 1s ease-in forwards; } .fadein { animation: poptext 1s ease-in forwards; } @keyframes first { to { opacity: 1; transform: translateY(0); } } @keyframes poptext { to { opacity: 1; } }