@import"https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap";
@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";
@import"https://fonts.googleapis.com/css2?family=Rubik:wght@400&display=swap";
@import"https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100..900;1,100..900&display=swap";
@import"https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Saira:ital,wght@0,100..900;1,100..900&display=swap";
@import"https://fonts.googleapis.com/css2?family=Inter:wght@800&family=Lato:wght@300;400;700&family=Mulish:wght@400;500;600;700&display=swap";
@import"https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600&display=swap";
@import"https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap";
@import"https://fonts.googleapis.com/css2?family=Righteous&display=swap";
@font-face {
    font-family: nokiafc22;
    src: url(../assets/fonts/nokiafc22.ttf) format("opentype")
}

@font-face {
    font-family: Highman Trial;
    src: url(./Highman.048f262c.otf) format("opentype")
}

.with-hover,
.withhover,
.withhover:hover {
    cursor: pointer
}

.saira-text {
    position: absolute;
    display: flex;
    font-size: .8vw;
    font-family: Saira;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: #fff
}

@font-face {
    font-family: Highman;
    src: url(./Highman.048f262c.otf) format("opentype")
}

@font-face {
    font-family: Satoshi;
    src: url(./Satoshi.711c6243.otf) format("opentype")
}

@font-face {
    font-family: There Brat;
    src: url(./There\ Brat.863bf089.otf) format("opentype")
}

html {
    color-scheme: normal !important
}

body {
    background: none !important;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100vh;
    user-select: none;
    overflow: hidden !important
}

.text {
    display: flex;
    font-family: Rubik;
    font-size: 1vw;
    font-weight: 500;
    font-style: normal;
    color: #fff
}

.wrapper {
    position: absolute;
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center
}

.icon {
    position: absolute;
    display: flex;
    font-size: .8vw;
    color: #fff
}

.radial-gradient-box {
    position: absolute;
    display: flex;
    width: 60vw;
    height: 40vw;
    border-radius: 20vw;
    background: radial-gradient(50% 50% at 50% 50%, rgba(32, 32, 230, .3) 0%, rgba(32, 32, 230, .2) 100%);
    filter: blur(10vw)
}

p {
    margin: 0
}

#root {
    height: 100%
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace
}

::-webkit-scrollbar {
    background-color: transparent;
    padding: 0;
    margin: 0;
    width: 0;
    height: 0
}

.loadingscreen-wrapper {
    width: 100%;
    height: 100%
}

.loadingscreen-container {
    font-family: Mulish;
    position: absolute;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: radial-gradient(50% 50% at 50% 50%, rgba(49, 49, 49, .05) 0%, rgba(200, 200, 200, .05) 100%), linear-gradient(0deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .05) 100%), rgba(4, 3, 6, .1);
    box-shadow: 6px 8px 12px #00000029;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.loadingscreen-hidden {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.7vw;
    height: 1.7vw;
    border-radius: .3vw;
    top: 2.6vw;
    right: 2vw;
    border: 1px solid transparent;
    background: rgba(160, 160, 160, .3);
    box-shadow: 1px 6px 12px #00000014;
    backdrop-filter: blur(2px);
    transition: all .5s ease
}

.loadingscreen-hidden:hover {
    cursor: pointer;
    border: 1px solid rgb(32, 32, 230);
    box-shadow: 0 0 20px 25px #2020e614 inset
}

.loadingscreen-header {
    position: absolute;
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    border-radius: 6px;
    top: 1.5vw;
    left: 2vw;
    width: 30vw;
    height: 10vw
}

.loadingscreen-header .loadingscreen-loading {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6vw;
    height: 1.3vw;
    border-radius: 4px;
    background: rgba(160, 160, 160, .3)
}

.loadingscreen-info {
    position: absolute;
    display: flex;
    align-items: start;
    left: 2.5vw;
    width: 20vw;
    height: 21vw;
    top: 19.5vw;
    font-size: 1vw;
    font-weight: 700
}

.loadingscreen-info .loadingscreen-info-wrapper {
    position: absolute;
    display: flex;
    flex-direction: column;
    bottom: 0vw;
    width: 20vw;
    height: 16.5vw;
    left: -.05vw;
    gap: .6vw
}

.loadingscreen-info .loadingscreen-info-wrapper .loadingscreen-info-cont {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0vw;
    width: 100%;
    height: 3.6vw;
    border-radius: 6px;
    border: 1px solid rgba(50, 50, 50, .8);
    background: linear-gradient(90deg, rgba(17, 17, 19, .73) 40%, rgba(17, 17, 19, .37) 100%);
    transition: all .5s ease
}

.loadingscreen-info .loadingscreen-info-wrapper .loadingscreen-info-cont:hover {
    cursor: pointer;
    border: 1px solid rgb(32, 32, 230);
    box-shadow: 0 0 20px 25px #2020e614 inset
}

.loadingscreen-info .loadingscreen-info-wrapper .loadingscreen-info-cont .loadingscreen-info-icon {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: .8vw;
    width: 2.4vw;
    height: 2.4vw;
    border-radius: 4px;
    border: 1px solid rgb(32, 32, 230);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .42) 100%), linear-gradient(90deg, rgb(32, 32, 230) 0%, rgba(32, 32, 230, 0.6) 100%);
    box-shadow: 1px 6px 12px #00000014
}

.loadingscreen-sidebar {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .7vw;
    bottom: .7vw;
    flex-direction: column;
    width: 40vw;
    height: 5.5VW;
    border-radius: 5px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .06) 0%, rgba(215, 215, 215, 0) 50%), radial-gradient(59.47% 50% at 50% 50%, rgba(81, 81, 81, 0) 0%, rgba(17, 17, 17, .1) 100%), linear-gradient(0deg, rgba(15, 14, 19, .32) 0%, rgba(15, 14, 19, .32) 100%), rgba(0, 0, 0, .54)
}

.loadingscreen-sidebar .loadingscreen-slider {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, .04);
    background: linear-gradient(90deg, rgba(85, 85, 85, .32) .01%, rgba(220, 220, 220, .1) 100%), rgba(15, 14, 19, .52);
    box-shadow: 1px 6px 12px #00000014;
    backdrop-filter: blur(2px);
    width: 86%;
    height: .8vw;
    bottom: .5vw
}

.loadingscreen-sidebar .loadingscreen-player {
    position: absolute;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: fit-content;
    height: fit-content;
    gap: .7vw;
    top: 1.2vw
}

.loadingscreen-sidebar .loadingscreen-player .loadingscreen-play {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.7vw;
    height: 1.7vw;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, .04);
    background: linear-gradient(90deg, rgba(85, 85, 85, .32) .01%, rgba(220, 220, 220, .1) 100%), rgba(15, 14, 19, .52);
    box-shadow: 1px 6px 12px #00000014
}

.loadingscreen-sidebar .loadingscreen-volume {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: fit-content;
    right: 2.1vw
}

.loadingscreen-text {
    color: #fff;
    text-shadow: 0px 9px 14px rgba(200, 200, 200, .3);
    font-family: There Brat;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 145.602%
}

.info-text {
    color: #fff;
    text-shadow: 0px 9px 14px rgba(200, 200, 200, .3);
    font-family: Righteous, sans-serif;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 145.602%
}