* { margin: 0px; padding: 0px; box-sizing: border-box; user-select: none; } input { outline: none; border: none; } body, html { position: relative; text-transform: uppercase; height: 100%; width: 100%; font-size: 0.7292vw; overflow: hidden; color: white; } .container { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100vw; height: 100vh; background-image: url('../images/bg1.png'); background-size: 100vw 100vh; background-repeat: no-repeat; } .lgd { width: 100vw; height: 100vh; position: absolute; animation: pulsefromblg 2s ease-in-out infinite; opacity: 0.13; } .mid_wr { position: absolute; } .rw_hd { text-align: center; animation: pulsefromblock 2s ease-in-out infinite; } .rw_hd span:first-child { font-size: 5vw; font-family: 'Bold'; background: radial-gradient(63.91% 63.91% at 50.00% 43.48%, #FF4FAA 0%, #000 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.1625vw #FF4FAA; text-shadow: 0px 0px 6.40625vw #e6017fb3; } .rw_hd span:last-child { font-size: 2.5vw; font-family: 'Regular'; margin-top: -0.83333vw; text-shadow: 0px 0px 2.34375vw rgba(255, 255, 255, 0.75); } .bx_load { margin-top: 10.08333vw; position: relative; width: 4.375vw; height: 4.32865vw; } .bx_load img { position: absolute; width: 4.375vw; height: 4.32865vw; } .bx_load img:nth-child(2) { animation: spin 50s linear 0s infinite; filter: drop-shadow(0px 0px 2.55208vw rgba(255, 30, 150, 0.5)); } .bx_load span { font-size: 1.25vw; font-family: 'Medium'; text-shadow: 0px 0px 1.30208vw rgba(255, 255, 255, 0.50); } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(9000deg); } } .b_wrap { position: absolute; top: 13vh; padding: 1.25vw; border-radius: 0.41667vw; background: #b819711a; transform: skew(-9deg); } .arrw { cursor: pointer; width: 0.88542vw; height: 0.88542vw; } .arrw path, .bx_play svg path { transition: all 0.3s ease; } .arrw:hover path { fill-opacity: 0.5; } .arrw:active { opacity: 0.75; } .bx_play { margin-left: 0.41667vw; margin-right: 0.41667vw; cursor: pointer; transition: all 0.3s ease; width: 2.23958vw; height: 2.23958vw; border-radius: 100%; border: 0.10417vw solid #FF4FAA; background: radial-gradient(63.47% 63.47% at 50.00% 50.00%, #FF4FAA 0%, #171500 100%); box-shadow: 0px 0px 2.1875vw rgba(255, 30, 180, 0.35); } .bx_play svg { width: 0.78125vw; height: 0.83333vw; } .bx_play:hover { transform: translateY(0.1vw); box-shadow: 0px 0px 2.1875vw rgba(255, 30, 169, 0.5); } .bx_play:hover svg path { fill-opacity: 0.85; } .bx_play:active { opacity: 0.75; } .rw_p { margin-left: 1.25vw; } .rw_p span:first-child { font-size: 1.04167vw; font-family: 'Regular'; color: rgba(255, 255, 255, 0.50); } .rw_p span:last-child { font-size: 1.04167vw; font-family: 'Bold'; text-shadow: 0px 0px 1.30208vw rgba(255, 255, 255, 0.50); } .flex { display: flex; } .alcn { display: flex; align-items: center; } .jlcn { display: flex; align-items: center; justify-content: center; } .anik { animation: pulsefromblock 2s ease-in-out infinite; } .clmn { display: flex; flex-direction: column; } .flicker { width: 100vw; height: 100vh; position: absolute; background: white; mix-blend-mode: overlay; opacity: 0.02; animation: flicker 2s ease-in-out infinite; } @keyframes flicker { from { opacity: 0.02; } 50% { opacity: 0.5; } to { opacity: 0.02; } } @keyframes pulsefromblock { from { transform: scale(.95); } 50% { transform: scale(1); } to { transform: scale(.95); } } @keyframes pulsefromblg { from { transform: scale(1); } 50% { transform: scale(1.01); } to { transform: scale(1); } } .videobg { position: absolute; mix-blend-mode: color-dodge; object-fit: fill; width: 100vw; height: 100vh; opacity: 1; opacity: 0.25; transform: rotate(180deg); } .nws_tx { margin-top: 1.66667vw; max-width: 29.94792vw; text-align: center; text-transform: none; padding: 0.83333vw; border-radius: 0.10417vw; background: rgba(255, 255, 255, 0.05); font-size: 1.04167vw; font-family: 'Regular'; } .mid-box { position: absolute; top: 30vh; width: 113.380vh; height: 32.454vh; display: flex; justify-content: center; align-items: center; /* background: #b816163f; */ } .lineout { position: absolute; width: 113.380vh; height: 32.454vh; display: flex; justify-content: center; align-items: center; } .box_logo { position: absolute; left: 50%; top: 42vh; transform: translateX(-50%); animation: pulsefromblock 2s ease-in-out infinite; } .box_logo img { position: absolute; width: 27.870vh; } .server-name { position: absolute; top: 55.1vh; left: 50%; transform: translateX(-50%); font-size: 5.093vh; font-family: 'gilroyboldita'; background: linear-gradient( 180.27999999999997deg, #ff50aa 0%, #9e005200 100% ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.093vh #FF4FAA; text-shadow: 0.000vh 0.000vh 2.648vh #ff4faab8; } .desc { position: absolute; top: 61vh; left: 50%; transform: translateX(-50%); font-size: 2.593vh; font-family: 'gilroyextraboldita'; color: #fff; text-shadow: 0.000vh 0.000vh 2.648vh rgb(255, 255, 255); } .loading-frame { position: absolute; width: 52.977vh; height: 2.500vh; left: 50%; bottom: 23vh; transform: translateX(-50%); } .loading-bar-frame { position: absolute; bottom: 0vh; left: -0.2vh; } .loading-bars { display: flex; justify-content: space-between; align-items: flex-end; width: 45.9vh; height: 2.500vh; } .loading-bar { width: 2.880vh; transform: skew(-20deg); background: linear-gradient(150deg, #414141 0%, #e8e8e8 51.19%, #414141 100%); margin-right: 0.5vh; border: 0.2vh solid #e1e1e1; height: 2.500vh; } .active { background: linear-gradient(150deg, #414141 0%, #e6017e 51.19%, #414141 100%); border: 0.2vh solid #e6017e; } .loading-percents { position: absolute; font-family: 'gilroyboldita'; bottom: -0.8vh; left: 46.1vh; color: #fff; font-size: 3.333vh; border-radius: 0.41667vw; display: flex; } .percentage { margin-left: 0.1vh; color: rgb(255, 255, 255); } .music-box-frame { position: absolute; width: 80vh; height: 5.185vh; /* background: #e1e1e16c; */ left: 50%; transform: translateX(-50%); top: 17.2vh; justify-content: center; display: flex; align-items: center; font-family: 'grw-bold'; font-size: 1.296vh; } .music-box { position: absolute; width: 19.167vh; height: 2.778vh; /* background: #e1e1e18e; */ bottom: 0vh; gap: 3vh; } .music-title { position: absolute; display: flex; top: -0.1vh; gap: 1vh; } .te { color: rgba(255, 255, 255, 0.5); } .start-stop-play-frame { position: absolute; width: 19.167vh; height: 2.778vh; left: 0vh; bottom: 0vh; /* background: rgba(255, 255, 0, 0.256); */ } .music-bars { display: flex; justify-content: space-between; align-items: flex-end; width: 19.167vh; height: 2.778vh; } .music-bar { width: 2.778vh; background: #100D0E; border: 0.2vh solid #ffffff6a; height: 2.778vh; border-radius: 0.463vh; display: flex; align-items: center; justify-content: center; } .music-bar-volume { width: 9.352vh; background: #100D0E; border: 0.2vh solid #ffffff6a; height: 2.778vh; border-radius: 0.463vh; display: flex; align-items: center; justify-content: center; } .music-bar:hover { background: linear-gradient( 173.85000000000002deg, #FF4FAA 0%, #212121 100% ); border: 0.2vh solid #FF4FAA; cursor: pointer; } .icon-music-box { position: absolute; width: 2.778vh; height: 2.778vh; fill: #908E8F; } .icon-music-box:hover { fill: #fff; } .volume-slider { position: absolute; -webkit-appearance: none; width: 7.269vh; height: 0.370vh; border-radius: 500vh; background: #FF4FAA; } .volume-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 0.8vh; height: 0.8vh; border-radius: 500vh; background: #FF4FAA; filter: drop-shadow(0.000vh 0.000vh 0.9vh #FF4FAA); } .left-boxes-player-infos { position: absolute; /* background: #c80c0c90; */ left: 13.611vh; top: 50%; transform: translateY(-50%); gap: 2vh; display: flex; justify-content: center; align-items: center; flex-direction: column; text-transform: uppercase; } .left-box { position: relative; background: rgba(15, 13, 14, 0.6); width: 27.500vh; height: 6.574vh; border-radius: 1.389vh; border: solid 0.2vh rgba(255, 255, 255, 0.25); display: flex; align-items: center; } .icon-box { position: absolute; width: 3vh; height: 3vh; background: linear-gradient( 173.85000000000002deg, #FF4FAA 0%, #212121 100% ); border: 0.2vh solid #FF4FAA; border-radius: 0.463vh; left: 1.9vh; filter: drop-shadow(0.000vh 0.000vh 0.472vh rgba(0, 0, 0, 0.74)); display: flex; justify-content: center; align-items: center; } .icon-box-person { position: absolute; width: 1.33vh; filter: drop-shadow(0.000vh 0.000vh 0.472vh rgba(0, 0, 0, 0.74)); } .icon-box-job { position: absolute; width: 1.58vh; filter: drop-shadow(0.000vh 0.000vh 0.472vh rgba(0, 0, 0, 0.74)); } .icon-box-money { position: absolute; width: 1.5vh; filter: drop-shadow(0.000vh 0.000vh 0.472vh rgba(0, 0, 0, 0.74)); } .icon-box-bank { position: absolute; width: 1.6vh; filter: drop-shadow(0.000vh 0.000vh 0.472vh rgba(0, 0, 0, 0.74)); } .icon-box-money_bag { position: absolute; width: 1.55vh; filter: drop-shadow(0.000vh 0.000vh 0.472vh rgba(0, 0, 0, 0.74)); } .icon-box-group { position: absolute; width: 1.8vh; filter: drop-shadow(0.000vh 0.000vh 0.472vh rgba(0, 0, 0, 0.74)); } .header-info-box { position: absolute; left: 6vh; top: 1.8vh; font-family: 'grw-bold'; font-size: 1.111vh; color: rgba(255, 255, 255, 0.65); } .desc-info-box { position: absolute; left: 6vh; bottom: 1.8vh; font-family: 'grw-bold'; font-size: 1.2vh; color: rgb(255, 255, 255); } .right-boxes-player-infos { position: absolute; /* background: #c80c0c90; */ right: 13.611vh; top: 50%; transform: translateY(-50%); gap: 2vh; display: flex; justify-content: center; align-items: center; flex-direction: column; text-transform: uppercase; } .icon-box-right { position: absolute; width: 3vh; height: 3vh; background: linear-gradient( 173.85000000000002deg, #FF4FAA 0%, #212121 100% ); border: 0.2vh solid #FF4FAA; border-radius: 0.463vh; right: 1.9vh; filter: drop-shadow(0.000vh 0.000vh 0.472vh rgba(0, 0, 0, 0.74)); display: flex; justify-content: center; align-items: center; } .header-info-box-right { position: absolute; right: 6vh; top: 1.8vh; font-family: 'grw-bold'; font-size: 1.111vh; color: rgba(255, 255, 255, 0.65); } .desc-info-box-right { position: absolute; right: 6vh; bottom: 1.8vh; font-family: 'grw-bold'; font-size: 1.2vh; color: rgb(255, 255, 255); } .disclaimer2 { position: absolute; text-align: center; font-family: 'gilroy-semboldita'; font-size: 1.2vh; color: #B3B3B3; bottom: 13vh; }