#wrapper::before { content: ""; display: inline-block; position: absolute; top: 35em; right: 12em; width: 200px; height: 200px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background: rgb(89 106 140 / 24%); box-shadow: inset 3px 4px 9px 0px rgb(81 95 123); backdrop-filter: blur( 2.0px ); -webkit-backdrop-filter: blur( 2.0px ); border: 1px solid rgb(89 112 154); z-index: 1; } #wrapper { z-index: 9999 !important; position: fixed; background: linear-gradient(to right, rgb(46, 55, 73) 0%, rgb(130, 155, 205) 100%); height: 100vh; width: var(--width-100); display: flex; justify-content: center; align-items: center; } #wrapper::after { content: ""; display: inline-block; position: absolute; top: 8em; left: 19em; width: 200px; height: 200px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background: rgb(89 106 140 / 35%); box-shadow: inset 3px 4px 9px 0px rgb(81 95 123); backdrop-filter: blur( 2px ); -webkit-backdrop-filter: blur( 2.0px ); border: 1px solid rgb(89 112 154); z-index: 1; } #words { position: absolute; top: 0; left: 0; overflow: hidden; z-index: -11; } .center { display: flex; flex-direction: column; align-items: center; justify-content: space-around; width: 35em; height: 13em; background: rgb(255 255 255 / 3%); backdrop-filter: blur( 2.0px ); -webkit-backdrop-filter: blur( 2.0px ); border-radius: 10px; border: 1px solid rgba(255,255,255,0.2); background-color: #ffffff52; } .loader .image, .loader .image2, .loader .image3 { width: 80px; } .loader span { display: block; width: var(--width-100); text-align: center; } #hi:after { content: ""; animation: spin 5s linear infinite; } .image i, .image2 i, .image3 i{ color: white; text-align: center; --size: 4rem; width: var(--size); height: var(--size); display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 2.5rem; border: 1px solid rgba(255,255,255,0.2); background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur( 2.0px ); border-radius: 0.2rem; box-shadow: 0px calc(var(--size) / 6) calc(var(--size) / 3) rgb(0 21 43 / 33%); } @keyframes rotate { 0% { transform: rotate(90deg); } 10% { opacity: 0; } 35% { transform: rotate(0deg); opacity: 1; } 65% { transform: rotate(0deg); opacity: 1; } 80% { opacity: 0; } 100% { transform: rotate(-90deg); } } #hi { animation: pulse 3s infinite; } @keyframes pulse { 0% { color: #051e3e; } 10% { color: #051e3e; } 30% { color: white; } 50% { color: #051e3e; } 60% { color: #051e3e; } 80% { color: white; } 100% { color: #051e3e; } } @keyframes spin { 0% { content: "Welcome to circular economy sankey"; } 50% { content: "Bienvenue dans l'économie circulaire sankey"; } 100% { content: "Willkommen bei Sankey für die Kreislaufwirtschaft"; } }