body { background-color: #FFE49F; color: #E07A31; font-family: "League Spartan"; } .start { display: flex; } #eins { display: flex; justify-content: right; } .text-rechts { width: 46%; margin-right: 100px; } #eins h2 { font-weight: bold; font-size: 150px; position: relative; text-align: justify; text-align-last: justify; display: flex; line-height: 0.3; } p { position: relative; font-size: 20px; text-align: right; z-index: 60; } .main-title { font-family: "League Spartan Black"; font-size: 170px; display: flex; text-align: center; justify-content: center; align-items: center; width: 60%; height: 100%; z-index: 100; position: relative; flex-direction: column; opacity: 90%; animation: raise 0.5s ease-in; } @keyframes raise { 0% {z-index: 0; opacity: 0%;} 70% {opacity: 50%;} 100% {z-index: 100; opacity: 90%;} } body::before, body::after { position: absolute; left: 0; top: 0; content: ''; width: 2048px; height: 2048px; z-index: 50; opacity: 80%; } body::before { background: url("noise-texture.svg"); mix-blend-mode: soft-light; } #blobs { display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: -2; height: 100%; width: 40%; position: relative; } .blob { border-radius: 200px; filter: blur(60px); width: 400px; height: 350px; top: 250px; } .blue { background-color: rgb(80, 80, 244); position: relative; right: 200px; animation: appear 0.4s 0s ease-in; } .green { background-color: rgb(48, 227, 48); position: relative; top: -200px; right: 150px; animation: appear 0.4s -0.075s ease-in; } .red { background-color: rgb(255, 63, 63); position: relative; left: 60px; top: -45px; animation: appear 0.4s -0.15s ease-in; } @keyframes appear { 0% {transform: scale(0); opacity: 0%;} 60% {transform: scale(0.8)} 80% {transform: scale(1.1); opacity: 100%;} 100% {transform: scale(1)} } @keyframes move-down-1 { 0% {top: 0px; right: 0px} 100% {top: 1000px; right: 1000px} }