@font-face {
    font-family: Quicksand;
    font-style: normal;
    font-weight: 400;
    src: local("Quicksand Regular"), local("Quicksand-Regular"), url(/assets/quicksand-regular-latin-CNx4TYHb.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215
}

@font-face {
    font-family: Quicksand;
    font-style: normal;
    font-weight: 400;
    src: local("Quicksand Regular"), local("Quicksand-Regular"), url(/assets/quicksand-regular-latin-ext-D3uMoZ-9.woff2) format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: Quicksand;
    font-style: normal;
    font-weight: 700;
    src: local("Quicksand Bold"), local("Quicksand-Bold"), url(/assets/quicksand-bold-latin-BDKXAizD.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215
}

@font-face {
    font-family: Quicksand;
    font-style: normal;
    font-weight: 700;
    src: local("Quicksand Bold"), local("Quicksand-Bold"), url(/assets/quicksand-bold-latin-ext-BY3MjIFO.woff2) format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: Material Symbols Rounded;
    font-style: normal;
    font-weight: 500;
    src: url(/assets/MaterialSymbolsRounded-Cs4sx4rP.woff2) format("woff2")
}

i {
    font-family: Material Symbols Rounded;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased
}

i {
    display: inline-block
}

body {
    transition: opacity .3s
}

body:not(.loaded) {
    opacity: 0;
    transition: none
}

body:not(.loaded) * {
    transition: none !important
}

body:not(.loaded) .page .wrapper {
    transform: scale(.8) translateY(50%)
}

body.dark {
    --color: #EEE;
    --color2: #EEE6;
    --background: #1118;
    --bg2: #0008;
    --hover: #FFF1
}

body.dark #theme-switcher i:before {
    --hidden: 1
}

body.dark #theme-switcher i:after {
    --hidden: 0
}

body {
    --color: #222;
    --color2: #2229;
    --background: #EEE8;
    --bg2: #FFF8;
    --hover: #0001;
    --scale-factor: 1.15;
    --blur: blur(16px)
}

body.noblur {
    --blur: 0
}

body.noanim * {
    transition: none !important
}

#background img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
    transition: transform .4s, opacity .4s !important
}

#background.scaled img {
    transform: scale(var(--scale-factor))
}

body #background img {
    opacity: 1
}

body:not(.dark) #background img:last-child,
body.dark #background img:first-child {
    opacity: 0
}

body.dark #background:not(.scaled) img:first-child,
body:not(.dark) #background:not(.scaled) img:last-child {
    transform: scale(var(--scale-factor))
}

body.dark #background.scaled img:first-child,
body:not(.dark) #background.scaled img:last-child {
    transform: none
}

#background .notloaded {
    transform: scale(1) !important;
    opacity: 0 !important
}

.main {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.appicon {
    width: 192px;
    height: 192px;
    object-fit: cover;
    transition: transform .4s, opacity .4s
}

.appicon.notloaded {
    transform: scale(.8);
    opacity: 0
}

#theme-switcher i {
    position: relative;
    overflow: hidden
}

#theme-switcher i:before,
#theme-switcher i:after {
    position: absolute;
    top: 50%;
    left: 50%;
    --hidden: 1;
    opacity: calc(1 - var(--hidden));
    transform: translate(-50%, -50%) rotate(calc(var(--hidden) * 360deg)) scale(calc(1 - var(--hidden) / 2));
    transition: transform .3s, opacity .3s
}

#theme-switcher i:before {
    --hidden: 0;
    --dark: 0;
    content: "light_mode"
}

#theme-switcher i:after {
    --dark: 1;
    content: "dark_mode"
}

.home.page {
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    overflow: hidden;
    transform: translate(-50%, -50%)
}

.home.page:not(.current) {
    top: calc(50% - 64px)
}

.home .wrapper {
    box-shadow: none;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none
}

.appname {
    font-size: 48px
}

.appdesc {
    opacity: .6;
    margin: 2px 12px
}

.buttons {
    box-shadow: 2px 2px 8px #0002;
    display: flex;
    margin: 16px auto 0;
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border-radius: 24px;
    max-width: 480px;
    background: var(--background);
    padding: 2px;
    justify-content: space-between;
    transition: background .3s
}

.buttons>div {
    padding: 16px;
    margin: 2px;
    cursor: pointer;
    border-radius: 20px;
    width: 100%;
    transition: background .2s
}

.buttons>div:hover {
    background: var(--hover)
}

.buttons .text {
    margin-top: -2px
}

.boxes {
    display: flex;
    flex: 1 1 0;
    flex-wrap: wrap
}

.box {
    min-width: 292px;
    flex: 1;
    margin: 2px;
    border-radius: 20px;
    padding: 8px;
    display: flex;
    align-items: center;
    text-align: left;
    text-decoration: none;
    color: inherit;
    transition: background .2s
}

.box:hover {
    background: var(--hover)
}

.box i {
    font-size: 24px;
    padding: 20px;
    background: hsl(var(--color), 100%, 89%);
    color: hsl(var(--color), 100%, 35%);
    border-radius: 100px;
    margin: 2px 12px 2px 2px
}

a.box {
    cursor: pointer;
    padding: 14px
}

.box img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    margin-right: 12px
}

.box .name {
    position: relative;
    font-size: 18px
}

.box.pingdot .name {
    padding-left: 16px
}

.box.pingdot .name:before {
    content: " ";
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 6px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: #888;
    transition: background .2s, box-shadow .8s
}

.box.pingdot.up .name:before {
    background: #0f8;
    box-shadow: 0 0 12px #0f8
}

.box.pingdot.down .name:before {
    background: #f35;
    box-shadow: 0 0 12px #f35
}

.box.pingdot.error .name:before {
    background: #f82;
    box-shadow: 0 0 12px #f82
}

.box .desc {
    opacity: .6
}

.overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 640px;
    padding: 0 20px;
    margin: 128px auto 88px;
    text-align: right
}

.overview>i {
    font-size: 80px
}

@property --value {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}

.overview .big {
    font-size: 64px;
    margin-bottom: -4px;
    counter-reset: value var(--value);
    transition: --value 1.2s
}

.page:not(.current) .overview .big {
    --value: 0 !important;
    transition: --value 0s .5s
}

.overview .big:after {
    content: counter(value)
}

.overview .small {
    opacity: .5
}

.privacy-boxes {
    display: flex;
    text-align: left;
    flex-wrap: wrap;
    margin-bottom: 10px
}

.privacy-boxes>div {
    display: flex;
    width: 50%;
    min-width: 256px;
    flex: 1;
    padding: 8px;
    align-items: center
}

.privacy-boxes i {
    color: var(--color);
    text-shadow: 0 0 48px var(--color);
    padding: 16px;
    font-size: 28px;
    border-radius: 32px
}

.privacy-boxes .title {
    font-size: 16px
}

.privacy-boxes .subtitle {
    opacity: .5
}

#settings {
    margin: 32px auto;
    padding: 0 16px
}

.setting {
    background: var(--bg2);
    margin: 8px;
    padding: 20px;
    display: flex;
    border-radius: 16px;
    align-items: center;
    text-align: left;
    transition: background .3s
}

.setting.pointer {
    cursor: pointer
}

.setting i {
    margin-right: 14px;
    font-size: 28px
}

.setting .name {
    font-size: 16px
}

.setting .desc {
    opacity: .6;
    margin-right: 16px
}

.setting .switch {
    position: relative;
    width: 44px;
    min-width: 44px;
    height: 24px;
    background: #8886;
    border-radius: 100px;
    margin: 0 4px 0 auto;
    transition: border .4s, background .3s
}

.setting .switch:after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--color);
    left: 4px;
    top: 50%;
    border-radius: 10px;
    transform: translateY(-50%);
    transition: left .2s, background .3s
}

.setting.checked .switch {
    background-color: #68f;
    border-color: #68f
}

.setting.checked .switch:after {
    left: calc(100% - 20px)
}

#no-cookies {
    margin: 24px 0 -8px;
    color: #f60
}

#no-cookies.hidden {
    display: none
}

.options {
    position: relative;
    margin-left: auto;
    background: #8883;
    border-radius: 16px;
    border: 4px solid transparent;
    display: flex;
    align-items: center;
    text-align: center;
    overflow: hidden
}

.options:before {
    content: " ";
    position: absolute;
    width: calc(100% / var(--items));
    left: calc(100% / var(--items) * var(--item));
    height: 100%;
    border-radius: 12px;
    background: #68f;
    transition: left .3s
}

.options div {
    padding: 12px 0;
    width: 64px;
    flex: 1;
    cursor: pointer;
    z-index: 1
}

.subpages {
    position: relative;
    transform: translate(calc(var(--id) * -100%));
    transition: transform .4s, height .4s
}

.subpages>div {
    position: absolute;
    left: calc(var(--n) * 100%);
    width: 100%
}

.page {
    position: fixed;
    top: 0;
    left: 50%;
    width: 100%;
    max-width: 920px;
    height: 100vh;
    transform: translate(-50%);
    overflow-y: scroll;
    transition: top .4s, opacity .4s, visibility .4s, color .3s
}

.page:not(.current) {
    top: 240px;
    visibility: hidden;
    opacity: 0
}

.wrapper {
    box-shadow: 2px 2px 8px #0003;
    background: var(--background);
    padding: 3px;
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border-radius: 24px;
    margin: -4px 12px 16px;
    text-align: center;
    overflow: hidden;
    min-width: 340px;
    transition: background .2s, transform .4s, backdrop-filter .6s
}

.back {
    box-shadow: 2px 2px 8px #0002;
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 24px;
    background: var(--background);
    margin: 20px;
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    transition: background .2s
}

.back i {
    margin: 4px;
    width: 56px;
    height: 56px;
    cursor: pointer;
    border-radius: 20px;
    transition: background .2s
}

.back i:hover {
    background: var(--hover)
}

.back i:after {
    content: "chevron_left";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.header {
    display: flex;
    align-items: center;
    margin: 20px 20px 16px
}

.header i {
    margin-top: 1px;
    margin-right: 10px
}

.header .text {
    font-size: 26px
}

.subswitch {
    display: flex;
    background: var(--bg2);
    transition: background .2s;
    margin: 16px 24px 0;
    z-index: 1;
    padding: 4px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    --id: inherit
}

.subswitch:before {
    content: " ";
    z-index: -1;
    position: absolute;
    top: 4px;
    left: calc(var(--id) / var(--switches) * 100% + 4px - 4px * var(--id));
    width: calc(100% / var(--switches) - 4px);
    height: calc(100% - 8px);
    opacity: .25;
    background: var(--color2);
    border-radius: 12px;
    transition: left .3s, background .3s
}

.subswitch div {
    padding: 12px;
    width: 50%;
    cursor: pointer
}

body {
    background: #000;
    color: var(--color);
    margin: 0;
    font-family: Quicksand;
    font-weight: 700;
    -webkit-user-select: none;
    user-select: none;
    font-size: 14px;
    -webkit-tap-highlight-color: transparent
}

.footer {
    background: rgba(245, 245, 245, 0.3);
    background-clip: content-box;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
    transition: border-radius 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    padding: 1px 0;
    min-height: 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 2;
    color: #666;
    font-size: 12px;
    margin: 0 auto;
    height: 38px;
    line-height: 0px;
  }
  
.container {
    max-width: 3000px;
    margin: 0 auto;
    padding: 0 15px;
    line-height: 0px;
  }
  
* {
    scrollbar-width: none
}

::-webkit-scrollbar {
    display: none
}