:root {
    --color-menu: #222;
    --color-menu-hover: #181818;
    --color-menu-active: #A00;
    --color-menu-dropdown: #111;
    --color-menu-dropdown-hover: #080808;
    --color-menu-dropdown-active: #700;

    --color-body-background: rgba(0,0,0,0.5);
    --color-body-box: #444;
    --color-body-box-shadow: #222;

    --color-body-sidebar-content: #555;

    --color-body-flex: #333;

    --color-footer: #000;

    --color-line: #777;

    --color-text-normal: #FFF;
    --color-text-faded: #CDD;
    --color-text-menu: #FFF;
    --color-text-link: #F00;

    --theme-button-color: #FFF;

    --theme-content-fill: #677F9E;
    --theme-content-stroke: #35393d;

    --theme-content-fill-selected: #677F9E;

    --theme-content-radius: 25px;
    --theme-content-size: 25px;
}

body.light * {
    color-scheme: light;
}

body.dark * {
    color-scheme: dark;
}

:root > body.light {
    --color-menu: #FFF;
    --color-menu-hover: #D8D8D8;
    --color-menu-active: #F00;
    --color-menu-dropdown: #CCC;
    --color-menu-dropdown-hover: #585858;
    --color-menu-dropdown-active: #F00;

    --color-body-background: rgba(128, 128, 128, 0.5);
    --color-body-box: #DDD;
    --color-body-box-shadow: #BBB;

    --color-body-sidebar-content: #AAA;

    --color-body-flex: #CCC;

    --color-footer: #FFF;
    
    --color-line: #888;

    --color-text-normal: #000;
    --color-text-faded: #233;
    --color-text-menu: #FFF;
    --color-text-link: #F00;

    --theme-button-color: #000;

    --theme-content-fill: #AAA;
    --theme-content-stroke: #666;

    --theme-content-fill-selected: #FFF;
}

@media (min-width: 480px) and (max-width: 1024px) and (min-height: 320px) and (max-height: 768px) and (-webkit-min-device-pixel-ratio: 2) {
    :root {
        --theme-content-radius: 12.5px;
        --theme-content-size: 12.5px;
    }
    .mid-section {
        flex-direction: column;
        padding-bottom: 20px;
    }

    .body .box {
        width: calc(100vw - 60px) !important;
        max-width: calc(100vw - 60px) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: left;
    }

    .sidebar .box {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: 0;
        margin-right: 0;
        float: left;
    }

    .body {
        flex-grow: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .sidebar {
        flex-shrink: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .side-item {
        padding-top: 1vw !important;
        padding-bottom: 1vw !important;
        margin-top: 1vw !important;
        margin-bottom: 1vw !important;
        
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .nav-parent {
        position: fixed;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        /*background: var(--color-menu);*/
        margin: 0;
        padding: 0;
        transition: 0.25s top;
        z-index: 10000;
        overflow-y: auto;
        flex-direction: column;
        border-radius: 0px;
    }

    .nav-parent:not(.open), .nav-parent:not(.open) * {
        top: -150vh !important;
    }

    .nav-parent.open, .nav-parent.open *:not(.theme-button-desktop) {
        top: 0 !important;
    }

    .nav-parent.open, .nav-parent:not(.open) .theme-button-desktop {
        left: calc(100vw - 60px);
    }

    .nav-parent.open, .nav-parent.open .theme-button-desktop {
        top: 40vh !important;
        left: calc(100vw - 60px);
    }

    .global-grid nav a {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .global-grid nav a:not(.dropdown-link) {
        float: unset !important;
        text-align: center !important;
        width: 100% !important;
    }

    .global-grid nav {
        position: fixed;
        top: -150vh;
        left: 0 !important;
        width: 100vw !important;
        height: 100% !important;
        z-index: 10000;
        display: flex;
        padding-top: 10vw;
        transition: 0.5s top ease-in-out;
        overflow-y: auto;
        flex-direction: column;
        justify-content: start;
        border-radius: 0px !important;
    }

    .theme-button-desktop {
        display: none;
        top: -150vh !important;
        left: calc(100vw - 100px);
        transition: 0.25s top;
        width: 50px;
        height: 50px;
    }

    .dropdown-container .dropdown {
        display: flex;
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
    }

    .theme-button-mobile {
        display: block !important;
        width: 50px;
        height: 50px;
        margin: 15px;
        position: relative;
        left: calc(100vw - 75px);
    }

    .menu-mobile-btn {
        display: block !important;
        position: fixed;
        left: 1vw;
        top: 1vw;
        width: 20vw;
        height: 20vw;
        /*border: 1px solid #222;
        border-radius: 7.5vw;
        background: #222;*/
        background: none;
        border: none;
        z-index: 10001;
        font-size: 15vh;
    }

    .menu-mobile-btn:not(.invert) {
        color: var(--color-text-menu);
    }

    .menu-mobile-btn.invert {
        color: var(--color-text-normal);
    }

    .footer {
        min-height: 100vh;
        padding: 1.75vw;
        scroll-snap-align: start !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    bsky-box {
        width: 100% !important;
    }

    .header {
        font-family: arial;
        color: var(--color-text-normal);
        position: absolute;
        left: calc(50% - 45vw) !important;
        width: 90vw !important;
        top: 20% !important;
        font-size: 200px;
        text-shadow: 5px 5px rgba(0, 0, 0, 0.5);
    }

    .system-requirements {
        font-family: arial;
        display: flex;
        flex-direction: column;
    }

    .system-requirements .row {
        display: flex;
        flex-direction: column;
        overflow-wrap: anywhere;
        justify-content: center !important;
    }

    .system-requirements .row .column {
        display: flex;
        flex-direction: column;
        width: 90% !important;
        position: relative;
        background: var(--color-body-flex);
        margin: 10px !important;
        padding: 10px !important;
        border: 1px solid var(--color-body-flex);
        border-radius: 25px;
        box-shadow: 0.5vh 0.5vh var(--color-body-box-shadow);
    }

    .bsky-button.follow-button {
        background-color: #1185fe;
        color: #FFF;
        font-size: 18px;
        font-family: arial;
        text-decoration: none;
        padding: 14px;
        display: block;
        width: fit-content;
        border: 0px solid #1185fe;
        border-radius: 25px;
        position: relative;
        left: calc(100vw - 150px) !important;
        right: 75% !important;
        top: -120px;
        margin: 12.5px;
    }
    
    /*----------------[SCROLL JACKING]----------------*/
    body.scrollJackBody, html.scrollJack {
        height: 100%;
        width: 100%;
        margin: 0;
        scroll-behavior: smooth;
        overflow: hidden;
    }

    .container {
        height: 100vh;
        width: 100vw;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-gutter: stable;
    }

    .section:not(.bannerSection) {
        width: 100vw;
        height: fit-content !important;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        position: relative;
    }

    .section:not(.footer):not(.cover):not(.bannerSection) {
        scroll-snap-align: none !important;
    }

    .section:not(.bannerSection) {
        flex-wrap: wrap;
        align-items: center;
    }

    .section:not(.cover):not(.footer) {
        background: var(--color-body-background);
    }

    .section .featuresBox {
        max-width: 85vw !important;
        width: fit-content !important;
        min-width: 46vw !important;
        border: 1px var(--color-body-box);
        border-radius: 25px !important;
    }

    .featuresBox h1 {
        text-align: center;
    }

    .section .sectionBox:not(.featuresBox):not(.downloadsBox):not(.bskyBox) {
        width: calc(100vw - 54px) !important;
        font-size: 4.5vh !important;
        /*min-height: 250px;*/
    }

    .section .sectionBox h2, .section b:not(.highlight) {
        font-size: 5vh !important;
    }

    .section .sectionBox {
        background: var(--color-body-box);
        box-shadow: 1vw 1vw var(--color-body-box-shadow);
        padding: 1vw;
        color: var(--color-text-normal);
        font-family: arial;
        margin-left: 0 !important;
        height: calc(100vh - 2vw);
        display: flex !important;
        justify-content: center !important;
        scroll-snap-align: start !important;
    }

    .sectionBox {
        display: flex !important;
        flex-direction: column;
        justify-content: center !important;
    }

    .section .downloadsBox {
        width: 85vw !important;
        height: fit-content;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .downloadsBox .downloadHead {
        width: 100%;
        text-align: center;
        font-size: 45px;
    }

    .downloadsBox .downloadGithub img, .downloadsBox .downloadModrinth img {
        width: 45.25% !important;
    }

    .downloadGithub, .downloadModrinth {
        margin: 0 !important;
    }

    .bskyBox {
        width: 100vw;
    }

    .bskyBox bsky-box .max-w-screen-sm {
        display: flex;
        flex-direction: row;
    }

    bsky-box {
        width: 100% !important;
    }

    .section .sectionMid {
        width: 100vh;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .section .sectionBox p {
        color: var(--color-text-normal);
        font-family: arial;
        font-size: 4.5vh !important;
    }

    .bannerSection {
        align-items: center;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

    .bannerSection .banner {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .bannerSection .bannerForeground {
        position: absolute;
        max-height: 100%;
        max-width: 100%;
    }

    .scrollJackContents {
        position: fixed;
        top: calc(50% - 120.3125px) !important;
        display: none !important;
        flex-direction: column;
        z-index: 1000;
    }

    .scrollJackContents img, .scrollJackContents span svg {
        width: 25px !important;
        height: 25px !important;
        padding: 2.5px !important;
        filter: brightness(0.65);
    }

    .scrollJackContents #selectedContent svg {
        filter: brightness(1);
    }

    .scrollJackContentsMobile {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center;
        width: 100vw;
        height: fit-content;
    }

    .scrollJackContentsMobile .prevBtn, .scrollJackContentsMobile .nextBtn {
        position: fixed;
        left: calc(50% - 60px);
        height: 60px;
        width: 100px;
    }
    
    .scrollJackContentsMobile .prevBtn {
        top: 0;
    }

    .scrollJackContentsMobile .nextBtn {
        top: calc(100vh - 50px);
    }

    .cover {
        scroll-snap-align: start !important;
    }
}

@media (min-width: 320px) and (max-width: 768px) and (min-height: 480px) and (max-height: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    :root {
        --theme-content-radius: 12.5px;
        --theme-content-size: 12.5px;
    }

    body, html, .nav-parent, .nav {
        overflow-x: hidden;
    }

    .mid-section {
        flex-direction: column;
        padding-bottom: 20px;
    }

    .body .box {
        width: calc(100vw - 60px) !important;
        max-width: calc(100vw - 60px) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: left;
    }

    .sidebar .box {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: 0;
        margin-right: 0;
        float: left;
    }

    .body {
        flex-grow: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .sidebar {
        flex-shrink: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .side-item {
        padding-top: 1vw !important;
        padding-bottom: 1vw !important;
        margin-top: 1vw !important;
        margin-bottom: 1vw !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .nav-parent {
        position: fixed;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        /*background: var(--color-menu);*/
        margin: 0;
        padding: 0;
        transition: 0.25s top;
        z-index: 10000;
        overflow-y: auto;
        flex-direction: column;
        border-radius: 0px;
    }

    .nav-parent:not(.open),
    .nav-parent:not(.open) * {
        top: -150vh !important;
    }

    .nav-parent.open,
    .nav-parent.open *:not(.theme-button-desktop) {
        top: 0 !important;
    }

    .nav-parent.open,
    .nav-parent:not(.open) .theme-button-desktop {
        left: calc(100vw - 60px);
    }

    .nav-parent.open,
    .nav-parent.open .theme-button-desktop {
        top: 40vh !important;
        left: calc(100vw - 60px);
    }

    .theme-button-mobile {
        display: block !important;
        width: 50px;
        height: 50px;
        margin: 15px;
        position: relative;
        left: calc(100vw - 75px);
    }

    .theme-button-desktop {
        display: none;
    }

    .global-grid nav a {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .global-grid nav a:not(.dropdown-link) {
        float: unset !important;
        text-align: center !important;
        width: 100% !important;
    }

    .global-grid nav {
        position: fixed;
        top: -150vh;
        left: 0 !important;
        width: 100vw !important;
        height: 100% !important;
        z-index: 10000;
        display: flex;
        padding-top: 10vw;
        transition: 0.5s top ease-in-out;
        overflow-y: auto;
        flex-direction: column;
        justify-content: start;
        border-radius: 0px !important;
    }

    .theme-button-desktop {
        top: -150vh !important;
        left: calc(100vw - 100px);
        transition: 0.25s top;
        width: 50px;
        height: 50px;
    }

    .dropdown-container .dropdown {
        display: flex;
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
    }

    .menu-mobile-btn {
        display: block !important;
        position: fixed;
        left: 1vw;
        top: 1vw;
        width: 20vw;
        height: 20vw;
        /*border: 1px solid #222;
        border-radius: 7.5vw;
        background: #222;*/
        background: none;
        border: none;
        z-index: 10001;
        font-size: 15vw;
    }

    .menu-mobile-btn:not(.invert) {
        color: var(--color-text-menu);
    }

    .menu-mobile-btn.invert {
        color: var(--color-text-normal);
    }

    .footer {
        min-height: 100vh;
        padding: 1.75vw;
        scroll-snap-align: start !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    bsky-box {
        width: 100% !important;
    }

    .header {
        font-family: arial;
        color: var(--color-text-normal);
        position: absolute;
        left: calc(50% - 45vw) !important;
        width: 90vw !important;
        top: 20% !important;
        font-size: 200px;
        text-shadow: 5px 5px rgba(0, 0, 0, 0.5);
    }

    .system-requirements {
        font-family: arial;
        display: flex;
        flex-direction: column;
    }

    .system-requirements .row {
        display: flex;
        flex-direction: column;
        overflow-wrap: anywhere;
        justify-content: center !important;
    }

    .system-requirements .row .column {
        display: flex;
        flex-direction: column;
        width: 90% !important;
        position: relative;
        background: var(--color-body-flex);
        margin: 10px !important;
        padding: 10px !important;
        border: 1px solid var(--color-body-flex);
        border-radius: 25px;
        box-shadow: 0.5vh 0.5vh var(--color-body-box-shadow);
    }

    .bsky-button.follow-button {
        background-color: #1185fe;
        color: #FFF;
        font-size: 18px;
        font-family: arial;
        text-decoration: none;
        padding: 14px;
        display: block;
        width: fit-content;
        border: 0px solid #1185fe;
        border-radius: 25px;
        position: relative;
        left: calc(100vw - 150px) !important;
        right: 75% !important;
        top: -120px;
        margin: 12.5px;
    }

    /*----------------[SCROLL JACKING]----------------*/
    body.scrollJackBody,
    html.scrollJack {
        height: 100%;
        width: 100%;
        margin: 0;
        scroll-behavior: smooth;
        overflow: hidden;
    }

    .container {
        height: 100vh;
        width: 100vw;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-gutter: stable;
    }

    .section:not(.bannerSection) {
        width: 100vw;
        height: fit-content !important;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        position: relative;
    }

    .section:not(.footer):not(.cover):not(.bannerSection) {
        scroll-snap-align: none !important;
    }

    .section:not(.bannerSection) {
        flex-wrap: wrap;
        align-items: center;
    }

    .section:not(.cover):not(.footer) {
        background: var(--color-body-background);
    }

    .section .featuresBox {
        max-width: 85vw !important;
        width: fit-content !important;
        min-width: 46vw !important;
        border: 1px var(--color-body-box);
        border-radius: 25px !important;
    }

    .featuresBox h1 {
        text-align: center;
    }

    .section .sectionBox:not(.featuresBox):not(.downloadsBox):not(.bskyBox) {
        width: calc(100vw - 54px) !important;
        font-size: 4.5vw !important;
        /*min-height: 250px;*/
    }

    .section .sectionBox h2,
    .section b:not(.highlight) {
        font-size: 5vw !important;
    }

    .section .sectionBox {
        background: var(--color-body-box);
        box-shadow: 1vw 1vw var(--color-body-box-shadow);
        padding: 1vw;
        color: var(--color-text-normal);
        font-family: arial;
        margin-left: 0 !important;
        height: calc(100vh - 2vw);
        display: flex !important;
        justify-content: center !important;
        scroll-snap-align: start !important;
    }

    .sectionBox {
        display: flex !important;
        flex-direction: column;
        justify-content: center !important;
    }

    .section .downloadsBox {
        width: 85vw !important;
        height: fit-content;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .downloadsBox .downloadHead {
        width: 100%;
        text-align: center;
        font-size: 45px;
    }

    .downloadsBox .downloadGithub img,
    .downloadsBox .downloadModrinth img {
        width: 45.25% !important;
    }

    .downloadGithub,
    .downloadModrinth {
        margin: 0 !important;
    }

    .bskyBox {
        width: 100vw;
    }

    .bskyBox bsky-box .max-w-screen-sm {
        display: flex;
        flex-direction: row;
    }

    bsky-box {
        width: 100% !important;
    }

    .section .sectionMid {
        width: 100vh;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .section .sectionBox p {
        color: var(--color-text-normal);
        font-family: arial;
        font-size: 4.5vw !important;
    }

    .bannerSection {
        align-items: center;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

    .bannerSection .banner {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .bannerSection .bannerForeground {
        position: absolute;
        max-height: 100%;
        max-width: 100%;
    }

    .scrollJackContents {
        position: fixed;
        top: calc(50% - 120.3125px) !important;
        display: none !important;
        flex-direction: column;
        z-index: 1000;
    }

    .scrollJackContents img,
    .scrollJackContents span svg {
        width: 25px !important;
        height: 25px !important;
        padding: 2.5px !important;
        filter: brightness(0.65);
    }

    .scrollJackContents #selectedContent svg {
        filter: brightness(1);
    }

    .scrollJackContentsMobile {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center;
        width: 100vw;
    }

    .scrollJackContentsMobile .prevBtn,
    .scrollJackContentsMobile .nextBtn {
        position: fixed;
        left: calc(50% - 60px);
    }

    .scrollJackContentsMobile .prevBtn {
        top: 0;
    }

    .scrollJackContentsMobile .nextBtn {
        top: calc(100vh - 50px);
    }

    .cover {
        scroll-snap-align: start !important;
    }
}

@media screen and (orientation: portrait) and (-webkit-max-device-pixel-ratio: 1) {
    .header {
        position: absolute;
        left: calc(50% - 45vw) !important;
        top: 15vh !important;
        width: 90vw !important;
    }
}

.profile-background {
    background: url('https://cdn.bsky.app/img/banner/plain/did:plc:3fbyupxnsiv5pgfr6tuia3uv/bafkreid7cxu36nkragikbvhso6sx6va34u4et4qcfw5g3x34khvnarxhwm@jpeg');
    width: 100%;
    aspect-ratio: 3/1;
    position: relative;
    background-size: cover;
}

.profile-picture {
    height: 125px;
    position: relative;
    top: -50px;
    left: 12.5px;
    border-radius: 100%;
}

.profile-name {
    font-size: 30px;
    font-family: arial;
    font-weight: bold;
    position: relative;
    top: -87.5px;
}

.profile-tag {
    font-size: 18px;
    font-family: arial;
    position: relative;
    top: -75px;
    height: 25px;
    color: var(--color-text-faded);
}

.profile-description {
    font-size: 18px;
    font-family: arial;
    position: relative;
    top: -62.5px;
    height: 25px;
}

.bsky-button.follow-button {
    background-color: #1185fe;
    color: #FFF;
    font-size: 18px;
    font-family: arial;
    text-decoration: none;
    padding: 14px;
    display: block;
    width: fit-content;
    border: 0px solid #1185fe;
    border-radius: 25px;
    position: relative;
    left: 75%;
    top: -120px;
    margin: 12.5px;
}

body, html {
    margin: 0;
    padding: 0;
    /*overflow-x: hidden;*/
}

.scroll-hide {
    overflow: hidden;
}

.global-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.nav-parent {
    position: fixed;
    top: 0;
    width: 100vw;
    margin: 0;
    padding: 0;
    z-index: 10000;
}

.global-grid .nav {
    background: var(--color-menu);
    grid-area: nav;
    margin: 0;
    padding: 0;
    justify-content: center;
    display: flex;
    width: fit-content;
    position: fixed;
    top: 0;
    left: calc(50% - 262.5px);
    width: 525px;
    border: 0px solid var(--color-menu);
    border-radius: 25px;
}

.global-grid nav a {
    color: var(--color-text-normal);
    text-decoration: none;
    font-size: 18px;
    display: block;
    font-family: arial;
}

.global-grid nav a.active:not(.dropdown-link) {
    background: var(--color-menu-active);
    color: var(--color-text-menu);
}

.global-grid nav a.dropdown-link.active {
    background: var(--color-menu-dropdown-active);
    color: var(--color-text-menu);
}

.global-grid nav a:not(.dropdown-link) {
    float: left;
    padding: 26px 19px;
}

.global-grid nav a:not(.dropdown-link):not(.active):hover {
    background: var(--color-menu-hover);
}

.global-grid nav a:not(.dropdown-link):not(.active) {
    transition: background .25s ease-in;
}

.dropdown {
    display: flex;
    height: 0px;
    flex-direction: column;
    background-color: var(--color-menu-dropdown);
    width: 220px;
    position: absolute;
    top: 73px;
    left: 85px;
    margin: 0;
    padding: 0;
    transition: height .125s ease-in;
    overflow: hidden;
    justify-content: center;
}

.dropdown-container:hover .dropdown {
    height: 4.5vh;
}

.dropdown .dropdown-link {
    padding: 14px 16px;
    height: 4.5vh;
    line-height: 4.5vh;
    text-align: center;
}

.dropdown .dropdown-link:hover {
    background: var(--color-menu-dropdown-hover);
}

.mid-section:not(.scrollJackSection) {
    display: flex;
    background: var(--color-body-background);
}

.body {
    flex-grow: 1;
    max-width: 70%;
}

.sidebar {
    flex-shrink: 1;
    margin-right: 2vh;
    margin-top: 10px;
    margin-bottom: 20px;
}

.box:not(.scrollJackBox) {
    background: var(--color-body-box);
    box-shadow: 1vh 1vh var(--color-body-box-shadow);
    color: var(--color-text-normal);
}

.body .box:not(.scrollJackBox) {
    margin: 10px 5% 10px 5%;
    width: 1043px;
    padding: 30px;
    float: right;
    /*border: 1px solid #444;
    border-radius: 2.5vh;*/
}

.system-requirements {
    display: flex;
    flex-direction: column;
}

.system-requirements .row {
    display: flex;
    overflow-wrap: anywhere;
    justify-content: center;
}

.system-requirements .row .column {
    display: flex;
    flex-direction: column;
    width: 25%;
    background: var(--color-body-flex);
    margin: 10px;
    padding: 10px;
    border: 1px solid var(--color-body-flex);
    border-radius: 25px;
    box-shadow: 0.5vh 0.5vh var(--color-body-box-shadow);
}

.body .box h1:not(.shaderH1), .body .box .row .column h1, .body .box .row .column h2, .body .box .row .column h3 {
    font-family: arial;
    text-align: center;
}

.body .box p, .body .box ul, .body .box .row .column div {
    font-family: arial;
    font-size: 18px;
}

.body .box .downloads {
    display: flex;
    justify-content: center;
}

.body .box .downloadHead {
    font-size: 25px;
    text-align: center;
}

.body .box .downloadModrinth, .body .box .downloadGithub {
    font-family: arial;
    font-size: 18px;
    height: 150px;
}

.downloadModrinth {
    margin: 0px 25px;
}

.body .box a img {
    height: 100%;
}

.body .box .minihead {
    font-family: arial;
    font-size: 18px;
    font-weight: 1000;
}

.banner:not(.section) {
    width: 100%;
    box-shadow: 5px 5px var(--color-body-box-shadow), -5px -5px var(--color-body-box-shadow), -5px 5px var(--color-body-box-shadow), 5px -5px var(--color-body-box-shadow);
}

.body .box a {
    color: var(--color-text-link);
}

.body .box:last-of-type {
    margin-bottom: calc(10px + 1vh);
}

.sidebar .box {
    float: left;
    max-width: 555px;
    /*border: 0px solid #444;
    border-radius: 2.5vh;*/
}

.alphaDisclaimer {
    font-family: arial;
    color: var(--color-text-normal);
    font-size: 20px;
    margin-top: 20px;
    display: block;
}

.disclaimerHead {
    font-family: arial;
    color: var(--color-text-normal);
    font-size: 22px;
}

.disclaimerBody, .scrollJackBox p, #specs div {
    font-family: arial;
    color: var(--color-text-normal);
    font-size: 18px !important;
}

.shaderH1, .shaderH2, .downloadHead {
    font-family: arial;
    color: var(--color-text-normal);
    border-bottom: 2px solid var(--color-line);
    text-align: left;
}

.body ul {
    list-style-type: "- ";
}

.sidebar .box h3 {
    font-family: arial;
    text-align: center;
}

.sidebar .box p {
    font-family: arial;
    font-size: 18px;
}

.side-item {
    /*border: 1px solid #fff;*/
    padding: 1vh;
    margin: 1vh;
    border: 1px solid var(--color-body-sidebar-content);
}

/*.side-item:nth-child(1) {
    border-radius: 2.5vh 2.5vh 0 0;
}

.side-item:last-of-type {
    border-radius: 0 0 2.5vh 2.5vh;
}*/

.background {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1000;
}

.background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cover {
    height: 100vh;
}

.cover h1 {
    font-family: arial;
    color: var(--color-text-normal);
    position: absolute;
    left: calc(50% - 300px);
    font-size: 200px;
    text-shadow: 5px 5px rgba(0,0,0,0.5);
}

.header {
    position: absolute;
    left: calc(50% - 45vh);
    top: 15vh;
    width: 90vh;
}

.footer {
    background: var(--color-footer);
    color: var(--color-text-normal);
    text-decoration: none;
    font-family: Arial;
    text-align: center;
    font-size: 18px;
}

.footer:not(.section) {
    padding: 2vh;
}

.menu-mobile-btn {
    display: none;
}

.theme-button-mobile {
    display: none;
}

.theme-button-desktop {
    width: 50px;
    position: fixed;
    top: 12.5px;
    left: calc(50% + 200px);
    z-index: 10001;
}

body.light .svg-image {
filter: brightness(0%);
}

body.dark .svg-image {
    filter: brightness(1000%);
}

.faq-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.faq-text {
    font-size: 20px;
    padding: 1vh 0vh;
}

/*----------------[SCROLL JACKING]----------------*/
body.scrollJackBody, html.scrollJack {
    height: 100%;
    width: 100%;
    margin: 0;
    scroll-behavior: smooth;
    overflow: hidden;
}

.container {
    height: 100vh;
    width: 100vw;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

.section {
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    display: flex;
    justify-content: center;
    position: relative;
}

.section:not(.bannerSection) {
    flex-wrap: wrap;
    align-items: center;
}

.section:not(.cover):not(.footer) {
    background: var(--color-body-background);
}

.section .featuresBox {
    width: 96vh;
    border: 1px var(--color-body-box);
    border-radius: 100px;
}

.section .disclaimerBox {
    width: 90vh;
    padding: 2vh 1vh 2vh 2vh;
}

.featuresBox h1 {
    text-align: center;
}

.section .sectionBox:not(.featuresBox):not(.disclaimerBox):not(.downloadsBox):not(.bskyBox) {
    width: 46vh;
    font-size: 1.3vh;
    /*min-height: 250px;*/
}

.section .sectionBox {
    background: var(--color-body-box);
    box-shadow: 1vh 1vh var(--color-body-box-shadow);
    color: var(--color-text-normal);
    font-family: arial;
    margin: 1vh;
}

.section .sectionBox:not(.disclaimerBox) {
    padding: 1vh;
}

.section .downloadsBox {
    width: 100vh;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.downloadsBox .downloadHead {
    width: 100%;
    text-align: center;
    font-size: 45px;
}

.downloadsBox .downloadGithub img, .downloadsBox .downloadModrinth img {
    width: 45.25% !important;
}

.bskyBox {
    width: 100vh;
}

.bskyBox bsky-box .max-w-screen-sm {
    display: flex;
    flex-direction: row;
}

.section .sectionMid {
    width: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.section .sectionBox p {
    color: var(--color-text-normal);
    font-family: arial;
    font-size: 1.35vh;
}

.bannerSection {
    align-items: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.bannerSection .banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bannerSection .bannerForeground {
    position: absolute;
    max-height: 100%;
    max-width: 100%;
}

.scrollJackContents {
    position: fixed;
    top: calc(50% - 192.5px);
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.scrollJackContents img, .scrollJackContents span svg {
    width: 50px;
    height: 50px;
    padding: 5px;
    filter: brightness(0.65);
}

.scrollJackContents #selectedContent svg {
    filter: brightness(1);
}

.scrollJackContentsMobile {
    position: fixed;
    top: calc(50vh - 150px);
    display: none;
    z-index: 10000;
}

.scrollJackContentsMobile svg {
    fill: var(--theme-content-fill);
}