body{ margin:0; padding:0; } h2{ font-weight: 500; color: #ffffff; margin-bottom:30px; } p{ color: #ffffff; font-weight: 200; } .welcome_wrapper{ font-family: 'Poppins', sans-serif; text-align:center; position: absolute; z-index:999999; top: 40%; -ms-transform: translateY(-50%); transform: translateY(-50%); } .welcome_content{ position:relative; z-index:999999; margin:auto; padding: 50px; } .logo{ width:20%; margin-bottom:30px; } .file_location{ width: fit-content; margin: auto; border-radius: 10px; padding: 10px 30px; background: #ffffff; } .background { position: relative; width: 100%; height: 100vh; top: 0; left: 0; background: rgb(50,70,98); overflow: hidden; display: flex; align-items: center; justify-content: center; } .waves { position:relative; width: 100%; height:15vh; margin-bottom:-7px; /*Fix for safari gap*/ min-height:100px; max-height:150px; } .parallax > use { animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite; } .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } .parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } .parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } @keyframes move-forever { 0% { transform: translate3d(-90px,0,0); } 100% { transform: translate3d(85px,0,0); } }