:root { --ThemeColor: #ffffff; } .body { height: 100vh; width: 100%; padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #3b39ff; } .spinner { width: 20px; height: 20px; border-radius: 50%; background: red; background-image: conic-gradient(white, #3b39ff); animation-name: spinn; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: ease; } .easein { animation-timing-function: ease-in; } .easeout { animation-timing-function: ease-out; } .easeinout { animation-timing-function: ease-in-out; } .linear { animation-timing-function: linear; } .stepstart { animation-timing-function: step-start; } .stepend { animation-timing-function: step-end; } .spinner:after { position: fixed; content: ""; width: 17px; height: 17px; background-color: #3b39ff; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); } @keyframes spinn { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .content { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0px auto 0; position: fixed; bottom: 35px; width: 100%; right: 0; left: 0; justify-content: center; flex-direction: column; } .box { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; flex: 1 1 0; } .try { display: none; height: 50px; width: 85%; border-radius: 6px; background-color: #000; color: var(--ThemeColor); justify-content: center; align-items: center; font-family: vazirmatn !important; font-size: 12px;margin:0 auto } .copyright {font-family:vazirmatn; display: flex; width: 100%; border-radius: 6px; color:#fff; justify-content: center; align-items: center; font-family: vazirmatn !important; font-size: 12px;font-weight:bold } .flex { display: flex !important; } .none { display: none !important; } .logo-type { width: 100%; text-align: center; font-size: 34px; padding-top: 0px; font-family: vazirmatn !important; color: #fff; } body { display: flex; min-height: 100vh; flex-direction: column; } main { flex: 1 0 auto; } h1.title, .footer-copyright a { font-family: vazirmatn, cursive; text-transform: uppercase; font-weight: 900; } body.welcome {overflow: hidden; -webkit-font-smoothing: antialiased; } .welcome .splash { height: 0px; padding: 0px; border: 130em solid #fff; position: fixed; left: 50%; top: 100%; display: block; box-sizing: initial; overflow: hidden; border-radius: 50%; transform: translate(-50%, -50%); animation: puff 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards; } .welcome #welcome { background: #ffffff; width: 56px; height: 56px; position: absolute; left: 50%; top: 50%; overflow: hidden; opacity: 0; transform: translate(-50%, -50%); border-radius: 50%; animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards, hide 2s 2.9s ease forwards; } .welcome header, .welcome a.btn { opacity: 0; animation: moveIn 2s 3.1s ease forwards; } @keyframes init { 0% { width: 0px; height: 0px; } 100% { width: 56px; height: 56px; margin-top: 0px; opacity: 1; } } @keyframes puff { 0% { top: 100%; height: 0px; padding: 0px; } 100% { top: 50%; height: 100%; padding: 0px 100%; } } @keyframes borderRadius { 0% { border-radius: 50%; } 100% { border-radius: 0px; } } @keyframes moveDown { 0% { top: 50%; } 50% { top: 40%; } 100% { top: 100%; } } @keyframes moveUp { 0% { background: #ffffff; top: 100%; } 50% { top: 40%; } 100% { top: 50%; background: #fff; } } @keyframes materia { 0% { background: #fff; } 50% { /*background: #fff; top: 26px;*/ } 100% { background: transparent; width: 0%; height: 0px; border-radius: 0px; top: 40%; } } @keyframes moveIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes hide { 0% { opacity: 1; } 100% { opacity: 0; } }