body{ margin:0; padding:0; } h2{ font-weight: 500; } .welcome_wrapper{ font-family: 'Poppins', sans-serif; text-align:center; position: absolute; z-index:999999; top: 50%;-ms-transform: translateY(-50%); transform: translateY(-50%); } .welcome_content{ position:relative; z-index:999999; background:#ffffff; width:30%; margin:auto; padding: 50px; -webkit-box-shadow: 0 .15rem 1.75rem 0 rgba(58, 59, 69 .15); box-shadow: 0 .15rem 1.75rem 0 rgba(58, 59, 69, .15); } .logo{ width:50%; margin-bottom:30px; } .file_location{ border:solid 2px rgb(50,70,98); width:fit-content; margin:auto; border-radius:10px; padding:5px 20px; } .background { position: relative; width: 100%; height: 100vh; top: 0; left: 0; background: #22262a; overflow: hidden; display: flex; align-items: center; justify-content: center; } @keyframes move { 100% { transform: translate3d(0, 0, 1px) rotate(360deg); } } .background .bulb { width: 1vmin; height: 1vmin; border-radius: 1vmin; backface-visibility: hidden; position: absolute; animation: move; animation-duration: 35; animation-timing-function: linear; animation-iteration-count: infinite; } .background .bulb:nth-child(0) { color: #3a4045; top: 14%; left: 10%; animation-duration: 113s; animation-delay: -68s; transform-origin: 12vw 3vh; box-shadow: -2vmin 0 1.2185214473465844vmin currentColor; } .background .bulb:nth-child(1) { color: #3a4045; top: 20%; left: 86%; animation-duration: 11s; animation-delay: -99s; transform-origin: -11vw 10vh; box-shadow: 2vmin 0 0.33889471187563824vmin currentColor; } .background .bulb:nth-child(2) { color: #b29a7e; top: 79%; left: 16%; animation-duration: 82s; animation-delay: -99s; transform-origin: -11vw -12vh; box-shadow: -2vmin 0 1.2239997998609442vmin currentColor; } .background .bulb:nth-child(3) { color: #3a4045; top: 43%; left: 63%; animation-duration: 40s; animation-delay: -148s; transform-origin: 15vw 0vh; box-shadow: 2vmin 0 0.46435088070839003vmin currentColor; } .background .bulb:nth-child(4) { color: #b29a7e; top: 64%; left: 47%; animation-duration: 59s; animation-delay: -4s; transform-origin: 12vw 3vh; box-shadow: 2vmin 0 0.8592983101917031vmin currentColor; } .background .bulb:nth-child(5) { color: #b29a7e; top: 87%; left: 4%; animation-duration: 56s; animation-delay: -140s; transform-origin: -15vw -6vh; box-shadow: 2vmin 0 0.27566925688578525vmin currentColor; } .background .bulb:nth-child(6) { color: #3a4045; top: 43%; left: 62%; animation-duration: 49s; animation-delay: -54s; transform-origin: 8vw 10vh; box-shadow: -2vmin 0 0.7414312882632275vmin currentColor; } .background .bulb:nth-child(7) { color: #b29a7e; top: 71%; left: 82%; animation-duration: 33s; animation-delay: -126s; transform-origin: -6vw 8vh; box-shadow: 2vmin 0 0.7928593683792595vmin currentColor; } .background .bulb:nth-child(8) { color: #b29a7e; top: 46%; left: 90%; animation-duration: 99s; animation-delay: -4s; transform-origin: -12vw -7vh; box-shadow: 2vmin 0 0.9259060365831153vmin currentColor; } .background .bulb:nth-child(9) { color: #b29a7e; top: 35%; left: 22%; animation-duration: 12s; animation-delay: -70s; transform-origin: -23vw -23vh; box-shadow: 2vmin 0 0.9150746636339171vmin currentColor; } .background .bulb:nth-child(10) { color: #3a4045; top: 24%; left: 13%; animation-duration: 20s; animation-delay: -137s; transform-origin: -10vw -1vh; box-shadow: 2vmin 0 0.8637967865307996vmin currentColor; } .background .bulb:nth-child(11) { color: #3a4045; top: 74%; left: 65%; animation-duration: 33s; animation-delay: -102s; transform-origin: -24vw -5vh; box-shadow: -2vmin 0 0.36572700614419773vmin currentColor; } .background .bulb:nth-child(12) { color: #b29a7e; top: 26%; left: 78%; animation-duration: 108s; animation-delay: -56s; transform-origin: -1vw -17vh; box-shadow: -2vmin 0 0.9316183318464453vmin currentColor; } .background .bulb:nth-child(13) { color: #3a4045; top: 6%; left: 29%; animation-duration: 129s; animation-delay: -122s; transform-origin: 6vw -5vh; box-shadow: -2vmin 0 0.25732731794992936vmin currentColor; } .background .bulb:nth-child(14) { color: #3a4045; top: 66%; left: 92%; animation-duration: 147s; animation-delay: -146s; transform-origin: 9vw -17vh; box-shadow: -2vmin 0 1.2295145334240223vmin currentColor; } .background .bulb:nth-child(15) { color: #3a4045; top: 13%; left: 84%; animation-duration: 75s; animation-delay: -70s; transform-origin: -22vw -19vh; box-shadow: 2vmin 0 0.4956387491052643vmin currentColor; } .background .bulb:nth-child(16) { color: #3a4045; top: 32%; left: 46%; animation-duration: 35s; animation-delay: -1s; transform-origin: 17vw -3vh; box-shadow: -2vmin 0 0.28356822695166306vmin currentColor; } .background .bulb:nth-child(17) { color: #b29a7e; top: 63%; left: 98%; animation-duration: 39s; animation-delay: -15s; transform-origin: 0vw 14vh; box-shadow: 2vmin 0 1.2460705341524947vmin currentColor; } .background .bulb:nth-child(18) { color: #b29a7e; top: 71%; left: 59%; animation-duration: 29s; animation-delay: -45s; transform-origin: -9vw 0vh; box-shadow: 2vmin 0 0.4571535709323129vmin currentColor; } .background .bulb:nth-child(19) { color: #3a4045; top: 72%; left: 35%; animation-duration: 9s; animation-delay: -21s; transform-origin: -1vw -19vh; box-shadow: -2vmin 0 0.8832436543597086vmin currentColor; } .background .bulb:nth-child(20) { color: #b29a7e; top: 87%; left: 96%; animation-duration: 90s; animation-delay: -150s; transform-origin: 12vw -6vh; box-shadow: 2vmin 0 1.2258895715436955vmin currentColor; } .background .bulb:nth-child(21) { color: #b29a7e; top: 74%; left: 55%; animation-duration: 23s; animation-delay: -58s; transform-origin: -4vw 24vh; box-shadow: -2vmin 0 0.400566542841684vmin currentColor; } .background .bulb:nth-child(22) { color: #b29a7e; top: 78%; left: 35%; animation-duration: 72s; animation-delay: -139s; transform-origin: -8vw -17vh; box-shadow: 2vmin 0 0.7636831993144702vmin currentColor; } .background .bulb:nth-child(23) { color: #b29a7e; top: 28%; left: 43%; animation-duration: 75s; animation-delay: -114s; transform-origin: -18vw 7vh; box-shadow: 2vmin 0 1.169158031413998vmin currentColor; } .background .bulb:nth-child(24) { color: #b29a7e; top: 19%; left: 68%; animation-duration: 122s; animation-delay: -139s; transform-origin: -20vw -14vh; box-shadow: 2vmin 0 1.0967062677011954vmin currentColor; } .background .bulb:nth-child(25) { color: #3a4045; top: 97%; left: 18%; animation-duration: 74s; animation-delay: -24s; transform-origin: 11vw -3vh; box-shadow: -2vmin 0 0.7059872973785506vmin currentColor; } .background .bulb:nth-child(26) { color: #b29a7e; top: 47%; left: 37%; animation-duration: 19s; animation-delay: -13s; transform-origin: 0vw 23vh; box-shadow: -2vmin 0 0.7780720039121778vmin currentColor; } .background .bulb:nth-child(27) { color: #b29a7e; top: 86%; left: 68%; animation-duration: 149s; animation-delay: -113s; transform-origin: 15vw 18vh; box-shadow: 2vmin 0 0.7747344366371187vmin currentColor; } .background .bulb:nth-child(28) { color: #b29a7e; top: 47%; left: 1%; animation-duration: 149s; animation-delay: -137s; transform-origin: -13vw -22vh; box-shadow: 2vmin 0 0.6727314438445602vmin currentColor; } .background .bulb:nth-child(29) { color: #3a4045; top: 87%; left: 73%; animation-duration: 122s; animation-delay: -78s; transform-origin: -18vw -2vh; box-shadow: -2vmin 0 1.119462335644481vmin currentColor; } .background .bulb:nth-child(30) { color: #3a4045; top: 83%; left: 16%; animation-duration: 136s; animation-delay: -15s; transform-origin: -22vw 22vh; box-shadow: -2vmin 0 0.28470550999829225vmin currentColor; } .background .bulb:nth-child(31) { color: #3a4045; top: 69%; left: 58%; animation-duration: 143s; animation-delay: -21s; transform-origin: -21vw 21vh; box-shadow: 2vmin 0 0.8724223854842288vmin currentColor; } .background .bulb:nth-child(32) { color: #b29a7e; top: 88%; left: 79%; animation-duration: 18s; animation-delay: -116s; transform-origin: 3vw -16vh; box-shadow: -2vmin 0 1.0979832984657463vmin currentColor; } .background .bulb:nth-child(33) { color: #3a4045; top: 60%; left: 85%; animation-duration: 106s; animation-delay: -105s; transform-origin: 25vw -3vh; box-shadow: 2vmin 0 0.25885159692359316vmin currentColor; } .background .bulb:nth-child(34) { color: #3a4045; top: 63%; left: 95%; animation-duration: 148s; animation-delay: -28s; transform-origin: -23vw -19vh; box-shadow: -2vmin 0 0.963743047959482vmin currentColor; } .background .bulb:nth-child(35) { color: #b29a7e; top: 27%; left: 99%; animation-duration: 85s; animation-delay: -44s; transform-origin: 3vw 13vh; box-shadow: -2vmin 0 0.5376273957422693vmin currentColor; } .background .bulb:nth-child(36) { color: #b29a7e; top: 93%; left: 2%; animation-duration: 84s; animation-delay: -1s; transform-origin: -12vw -18vh; box-shadow: -2vmin 0 0.5754463731020305vmin currentColor; } .background .bulb:nth-child(37) { color: #3a4045; top: 86%; left: 67%; animation-duration: 91s; animation-delay: -92s; transform-origin: 18vw -4vh; box-shadow: 2vmin 0 0.7136747576362781vmin currentColor; } .background .bulb:nth-child(38) { color: #b29a7e; top: 68%; left: 82%; animation-duration: 18s; animation-delay: -127s; transform-origin: 23vw -22vh; box-shadow: 2vmin 0 0.3597961535396039vmin currentColor; } .background .bulb:nth-child(39) { color: #3a4045; top: 34%; left: 25%; animation-duration: 143s; animation-delay: -91s; transform-origin: -7vw -6vh; box-shadow: -2vmin 0 0.9165250798122vmin currentColor; } .background .bulb:nth-child(40) { color: #b29a7e; top: 31%; left: 42%; animation-duration: 65s; animation-delay: -123s; transform-origin: 21vw 5vh; box-shadow: -2vmin 0 0.8817838277296712vmin currentColor; } .background .bulb:nth-child(41) { color: #3a4045; top: 68%; left: 88%; animation-duration: 133s; animation-delay: -142s; transform-origin: 3vw 24vh; box-shadow: 2vmin 0 0.25293212841377577vmin currentColor; } .background .bulb:nth-child(42) { color: #b29a7e; top: 76%; left: 49%; animation-duration: 23s; animation-delay: -43s; transform-origin: 3vw -16vh; box-shadow: 2vmin 0 0.44318325214928533vmin currentColor; } .background .bulb:nth-child(43) { color: #3a4045; top: 2%; left: 88%; animation-duration: 80s; animation-delay: -37s; transform-origin: -13vw 0vh; box-shadow: -2vmin 0 0.3441703765390076vmin currentColor; } .background .bulb:nth-child(44) { color: #b29a7e; top: 41%; left: 18%; animation-duration: 90s; animation-delay: -29s; transform-origin: -9vw -4vh; box-shadow: 2vmin 0 0.7573053417869562vmin currentColor; } .background .bulb:nth-child(45) { color: #b29a7e; top: 72%; left: 1%; animation-duration: 108s; animation-delay: -42s; transform-origin: 12vw 25vh; box-shadow: -2vmin 0 0.3952701555936149vmin currentColor; } .background .bulb:nth-child(46) { color: #3a4045; top: 64%; left: 63%; animation-duration: 73s; animation-delay: -80s; transform-origin: 0vw -3vh; box-shadow: -2vmin 0 0.45230223345327136vmin currentColor; } .background .bulb:nth-child(47) { color: #3a4045; top: 29%; left: 40%; animation-duration: 6s; animation-delay: -81s; transform-origin: -8vw 16vh; box-shadow: 2vmin 0 0.5546780568744116vmin currentColor; } .background .bulb:nth-child(48) { color: #b29a7e; top: 84%; left: 21%; animation-duration: 144s; animation-delay: -70s; transform-origin: 13vw -7vh; box-shadow: 2vmin 0 0.7006685231548027vmin currentColor; } .background .bulb:nth-child(49) { color: #3a4045; top: 65%; left: 97%; animation-duration: 56s; animation-delay: -88s; transform-origin: 3vw 22vh; box-shadow: 2vmin 0 0.6520508546711612vmin currentColor; }