:root { --theme-color: #f37021; --text-color: #fff; --border-primary: #5353534c; --border-secondary: #535353; --bg-1: #00000080; --bg-2: #2424243d; --bg-3: #000000; } #preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 999999; display: flex; justify-content: center; align-items: center; flex-direction: column; color: var(--text-color); background-color: #000; } .gradient-text { font-family: 'Lobster', cursive !important; font-size: 40px !important; margin-top: 20px; text-align: center; padding: 10px; font-weight: bold; background: linear-gradient(270deg, #fff, #f37021, #fff); background-size: 400% 400%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradientAnimation 10s ease infinite; user-select: none; } @keyframes gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } #content-preload { display: none; color: var(--text-color); } .fadeIn { animation: fadeIn 0s ease-in-out forwards; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .spinner { border: 4px solid #f3f3f3; border-top: 4px solid var(--theme-color); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loader { transform: rotateZ(45deg); perspective: 1000px; border-radius: 50%; width: 48px; height: 48px; color: var(--text-color); } .loader:before, .loader:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: inherit; height: inherit; border-radius: 50%; transform: rotateX(70deg); animation: 1s spin linear infinite; } .loader:after { color: var(--theme-color); transform: rotateY(70deg); animation-delay: 0.4s; } @keyframes rotate { 0% { transform: translate(-50%, -50%) rotateZ(0deg); } 100% { transform: translate(-50%, -50%) rotateZ(360deg); } } @keyframes rotateccw { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(-360deg); } } @keyframes spin { 0%, 100% { box-shadow: 0.2em 0px 0 0px currentcolor; } 12% { box-shadow: 0.2em 0.2em 0 0 currentcolor; } 25% { box-shadow: 0 0.2em 0 0px currentcolor; } 37% { box-shadow: -0.2em 0.2em 0 0 currentcolor; } 50% { box-shadow: -0.2em 0 0 0 currentcolor; } 62% { box-shadow: -0.2em -0.2em 0 0 currentcolor; } 75% { box-shadow: 0px -0.2em 0 0 currentcolor; } 87% { box-shadow: 0.2em -0.2em 0 0 currentcolor; } }