* {
    margin: 0;
    padding: 0;
    flex-shrink: 0 !important;
    scrollbar-width: none;
}

body {
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    width: 100dvw;
    scroll-behavior: smooth;
    --radius-circle: calc(100dvh + 100dvw);
}

.layout-desktop {
    --nav-padding: calc((var(---page--CH) + var(---page--CW)) / 200);
}

.__layout {
    display: none;
}

.layout-phone {
    --p-nav-padding: calc((100dvh + 100dvw) / 150);
}

.phone-nav {
    position: fixed;
    align-self: center;
    height: 10dvh;
    width: calc(100dvw - (var(--p-nav-padding) * 4));
    margin: var(--p-nav-padding);
    padding: var(--p-nav-padding);
    background-color: #0051ff;
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: +9999;
    transition: 400ms;
    transform: scale(0.970);
}

.phone-nav-menu {
    height: 100%;
    width: 66.6666666667%;
    filter: brightness(0) invert(1);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

    .phone-nav-menu img {
        max-height: 100%;
    }

        .phone-nav-menu img:nth-child(1) {
            width: 40%;
        }

        .phone-nav-menu img:nth-child(2) {
            width: 60%;
            transform: translate(-10%);
        }

.phone-login-btn {
    width: calc(33.3333333333% - (var(--p-nav-padding)));
    margin: 0 var(--p-nav-padding);
    height: calc(100% - var(--p-nav-padding));
    transform: translate(calc(var(--p-nav-padding) * -1), 0);
    background-color: white;
    border: none;
    outline: none;
    border-radius: var(--radius-circle);
    font-size: calc((var(---phone-login-btn--CH) + var(---phone-login-btn--CW)) / 12);
    font-weight: 800;
}

    .phone-login-btn i {
        margin-right: 0.6ch;
    }

.phone-nav-list {
    position: absolute;
    top: 0%;
    width: calc(100% - (var(--p-nav-padding) * 4));
    left: 0%;
    background-color: #0051ff;
    opacity: 0;
    z-index: -1;
    border-radius: 25px;
    display: none;
    opacity: 0;
    flex-direction: column;
    overflow-y: hidden;
    height: fit-content;
    transform: scale(0.9) translate(0, -5%);
    transition: 200ms;
}

.phone-nav-empty {
    height: var(---phone-nav--CH);
    width: 100%;
    transition: 400ms;
    background-color: transparent;
}

.phone-nav-list-content {
    height: calc(100% - var(---phone-nav--CH));
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.phone-nav-link div {
    height: fit-content;
    width: fit-content;
    padding: calc(var(--p-nav-padding) * 1.4) calc(var(--p-nav-padding) * 2.4);
    font-weight: 700;
    align-self: flex-start;
    font-size: calc(var(--p-nav-padding) * 1.7);
    border: none;
    outline: none;
    background-color: transparent;
    border-radius: var(--radius-circle);
    color: white;
    transition: 100ms;
}

    .phone-nav-link div i {
        margin-right: 0.6ch;
    }

.phone-nav-link {
    width: calc(100% - (var(--p-nav-padding) * 2));
    display: flex;
    background-color: transparent;
    border: none;
}

    .phone-nav-link:hover {
        background-color: rgba(8, 32, 59, 0.3);
        border-radius: var(--radius-circle);
    }

    .phone-nav-link.nav-btn--active:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }

    .phone-nav-link section {
        transition: 100ms;
        padding: var(--p-nav-padding);
        margin: var(--p-nav-padding);
        border: calc(var(--radius-circle) / 350) solid transparent;
        border-radius: var(--radius-circle);
        width: fit-content;
        height: fit-content;
        background-color: transparent;
    }

.layout-phone .nav-btn--active section {
    border-color: white !important;
}

.layout-phone .nav-btn--active div {
    background: white !important;
    color: rgb(49, 49, 49) !important;
}

.phone-nav-menu--active .phone-nav-list {
    display: flex;
    opacity: 1;
    padding: calc(var(--p-nav-padding) * 2);
    transform: scale(1) translate(0, 0%);
}

@keyframes phone-nav-menu-open {
    0% {
        opacity: 0;
        transform: scale(0.9) translate(0, -5%);
        padding: calc(var(--p-nav-padding) * 2);
    }

    100% {
        opacity: 1;
        transform: scale(1) translate(0, 0);
        padding: calc(var(--p-nav-padding) * 2);
    }
}

@keyframes phone-nav-menu-close {
    0% {
        opacity: 1;
        transform: scale(1) translate(0, 0);
        padding: calc(var(--p-nav-padding) * 2);
    }

    100% {
        opacity: 0;
        transform: scale(0.9) translate(0, -5%);
        padding: calc(var(--p-nav-padding) * 2);
    }
}

.phone-nav-menu--active {
    transform: scale(1) translate(0, 0);
    border-radius: 25px;
}

.page-blur {
    position: fixed;
    height: 110dvh;
    width: 110dvw;
    background: rgb(0, 0, 0, 0.3);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -9999999999999;
    transition: transform 300ms, opacity 300ms;
    opacity: 0;
}

.phone-nav-head {
    height: calc(100dvh - (var(---phone-nav--CH) + var(--p-nav-padding)));
    width: 100dvw;
    padding-top: calc(var(---phone-nav--CH) + (var(--p-nav-padding) * 2));
    background: linear-gradient(to top, rgb(8, 42, 116), rgb(0, 81, 255));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .phone-nav-head img {
        max-height: 50%;
        width: 100%;
    }

    .phone-nav-head h1 {
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: white;
        text-align: center;
        width: 95%;
        font-size: calc((var(---page--CH) + var(---page--CW)) / 50);
        line-height: calc((var(---page--CH) + var(---page--CW)) / 35);
        font-weight: bolder;
    }

    .phone-nav-head h2 {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        color: white;
        text-align: center;
        width: 85%;
        font-size: calc((var(---page--CH) + var(---page--CW)) / 70);
        line-height: calc((var(---page--CH) + var(---page--CW)) / 60);
        font-weight: lighter;
    }

    .phone-nav-head img:nth-child(2) {
        width: 90%;
    }

.phone-page-wrapper {
    height: var(---page--CH);
    width: 100dvw;
    overflow: scroll;
    display: flex;
    flex-direction: column;
}

.phone-profile-section {
    height: calc(var(---page--CH) - (var(---phone-nav--CH) + (var(--p-nav-padding) * 5)));
    padding-top: calc(var(---phone-nav--CH) + (var(--p-nav-padding) * 5)) !important;
    width: 100dvw;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: scale(0.5) rotate(5deg);
    transition: 800ms;
}

.layout-phone ._page-profile--active {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.phone-profile-heading {
    font-size: calc((var(---page--CH) + var(---page--CW)) / 50);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: white;
    text-align: center;
}

.phone-profile-slider {
    position: relative;
    height: calc(100% - (var(---phone-profile-heading--CH) + (var(--p-nav-padding) * 2)));
    margin-top: calc(var(--p-nav-padding) * 2);
    overflow: hidden;
    width: 85%;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    scroll-snap-type: y mandatory;
}

.phone-profile-slider-gradient-top {
    height: 0;
    width: 100%;
    position: relative;
}

    .phone-profile-slider-gradient-top::after {
        content: "";
        height: 10dvh;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: linear-gradient(to top, transparent, rgb(13, 40, 116));
        z-index: +1;
    }

.phone-profile-slider div section {
    transform: scale(0.9);
}

.phone-profile-slider div {
    width: 100%;
    border-radius: 25px;
    margin: 1dvh 0;
    background-color: white;
    height: calc(90% - 2dvh);
    scroll-snap-align: start;
    filter: brightness(80%) blur(5px);
    transition: 400ms;
}

    .phone-profile-slider div section {
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        transform: scale(0.8);
        transition: 400ms;
        border-radius: 25px;
    }

.phone-profile-slider-slide--active {
    filter: brightness(100%) blur(0px) !important;
}

    .phone-profile-slider-slide--active section {
        transform: scale(0.950) !important;
    }

.phone-join-section {
    position: relative;
    width: 100%;
    margin-top: calc((var(---phone-nav--CH) + (var(--p-nav-padding) * 2)));
    height: calc(var(---page--CH) - (var(---phone-nav--CH) + (var(--p-nav-padding) * 2)));
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
}

    .phone-join-section::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 30%;
        width: 100%;
        background: linear-gradient(to top, transparent, rgb(8, 42, 116));
    }

    .phone-join-section::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 30%;
        width: 100%;
        background: linear-gradient(to top, rgb(8, 42, 116), transparent);
    }

.phone-join-bg {
    max-height: calc(100%);
    width: 100%;
}

.phone-join-container {
    position: absolute;
    top: 0;
    z-index: +1;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: scale(0.5) rotate(-5deg) translate( 0, 10%);
    transition: 800ms;
}

.phone-join-heading {
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 900;
    font-size: calc((var(---phone-nav--CH) + var(---phone-nav--CW)) / 16);
    margin: 2dvh 0;
    max-width: 100%;
}

.phone-app-signup {
    display: flex;
    align-items: center;
    border: calc(var(---page--CW) / 50) solid rgb(0, 0, 0, 0.950);
    background-color: white;
    width: calc(var(---page--CW) - ((var(---page--CW) / 50) * 4));
    border-radius: var(--radius-circle);
}

    .phone-app-signup input {
        width: 70%;
        border-radius: var(--radius-circle);
        border: none;
        outline: none;
        height: 7dvh;
        text-indent: 1ch;
        font-size: calc((var(---phone-nav--CH) + var(---phone-nav--CW)) / 27);
    }

    .phone-app-signup button {
        font-weight: 900;
        --border-width: calc(var(---page--CW) / 100);
        width: calc(30% - (var(--border-width) * 4));
        font-size: calc((5dvh + ((var(---phone-app-signup--CW) * 0.30) - (var(--border-width) * 4))) / 8);
        background-color: rgb(32 122 27 / 95%);
        border-radius: var(--radius-circle);
        border: none;
        border: var(--border-width) solid rgb(32 122 27 / 95%);
        outline: none;
        color: white;
        margin: 1dvh 0;
        margin-left: calc(var(--border-width) * 2);
        height: 5dvh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.phone-auth-providers {
    display: flex;
    align-items: center;
    margin: 1dvh 0;
    width: 100%;
    justify-content: space-evenly;
}

    .phone-auth-providers button {
        transition: 400ms;
        border: none;
        --padding: calc(var(--p-nav-padding));
        --border: calc(var(--p-nav-padding) / 2);
        font-weight: 900;
        padding: var(--padding) calc(var(--padding) * 3.5);
        width: calc(48% - (var(--padding) + var(--border) + var(--border)));
        border: var(--border) solid white;
        font-size: calc((var(---phone-nav--CH) + var(---phone-nav--CW)) / 30);
        border-radius: var(--radius-circle);
        transition: 400ms;
        user-select: none;
        outline: none;
        color: white;
    }

.phone-app-signup button:active {
    background-color: rgb(0, 0, 0, 0.950);
    border-color: rgb(0, 0, 0, 0.950);
}

.phone-auth-google {
    background: rgb(194, 48, 11);
}

    .phone-auth-google:active {
        background: rgb(161, 42, 12);
        border-color: rgb(194, 48, 11);
    }

.phone-auth-facebook {
    background-color: rgb(11, 106, 194);
}

    .phone-auth-facebook:active {
        background-color: rgb(21, 84, 143);
        border-color: rgb(11, 106, 194);
    }

.phone-auth-providers button i {
    margin-right: 0.5ch;
}

.layout-phone ._page-join--active {
    opacity: 1;
}

    .layout-phone ._page-join--active .phone-join-container {
        opacity: 1;
        transform: scale(1) rotate(0deg) translate( 0, 0);
    }

.phone-about-section {
    margin-top: calc((var(---phone-nav--CH) + (var(--p-nav-padding) * 2)));
    min-height: calc(var(---page--CH) - (var(---phone-nav--CH) + (var(--p-nav-padding) * 2)));
    width: 100dvw;
}

.phone-about-heading {
    width: 95dvw;
    align-self: center;
    margin-left: 2.5dvw;
    text-align: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: white;
    font-size: calc((var(---phone-nav--CH) + var(---phone-nav--CW)) / 16);
}

.phone-about-section img {
    width: 90dvw;
    margin-left: 5dvw;
}

.phone-about-section p {
    width: 90dvw;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: white;
    margin-left: 5dvw;
    font-size: calc((var(---phone-nav--CH) + var(---phone-nav--CW)) / 27);
}

.read-more summary {
    cursor: pointer;
    margin: 1dvh 0;
    font-weight: 600;
    color: #2563eb;
    /* removes default triangle marker */
    font-size: calc((var(---phone-nav--CH) + var(---phone-nav--CW)) / 32);
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.phone-about-section details {
    width: 90dvw;
    margin-left: 5dvw;
}

.read-more summary::-webkit-details-marker {
    display: none; /* removes marker in Chrome/Safari */
}


.read-more p {
    width: 85dvw;
}

.phone-about-section {
    opacity: 0;
    transform: translate(0, 10%) scale(0.950);
    transition: 800ms;
}

    .phone-about-section img {
        opacity: 0;
        transform: scale(0);
        transition: 800ms;
    }

.layout-phone ._page-about--active {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

    .layout-phone ._page-about--active img {
        transform: scale(1);
        opacity: 1;
    }

.phone-contact-section {
    position: relative;
    padding-top: calc((var(---phone-nav--CH) + (var(--p-nav-padding) * 2)));
    height: calc(var(---page--CH) - (var(---phone-nav--CH) + (var(--p-nav-padding) * 2)));
    width: 100dvw;
    background-color: white;
}

.phone-contact-heading {
    transition: 800ms;
    z-index: +1;
    display: flex;
    align-items: center;
    max-width: calc(90dvw - (var(--p-nav-padding) * 2));
    padding: var(--p-nav-padding) calc(var(--p-nav-padding));
    background-color: rgb(13, 40, 116);
    width: fit-content;
    left: 50%;
    position: relative;
    transform: translate(-50%);
    border-radius: var(--radius-circle);
    opacity: 0;
    transform: translate(-50%) scale(0);
}

    .phone-contact-heading h1 {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        color: white;
        font-size: calc((var(---phone-nav--CH) + var(---phone-nav--CW)) / 22);
        border: calc((var(---phone-nav--CH) + var(---phone-nav--CW)) / 120) solid rgb(255, 255, 255);
        border-radius: var(--radius-circle);
        padding: var(--p-nav-padding) calc(var(--p-nav-padding) * 3);
        transition: 800ms;
    }

    .phone-contact-heading::before {
        content: "";
        height: calc((var(---phone-nav--CH) + var(---phone-nav--CW)) / 60);
        width: var(---page--CW);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* background-color: rgb(13, 40, 116); */
        background-color: transparent;
        z-index: -2;
    }

.layout-phone ._page-contact--active {
    background-color: white;
}

    .layout-phone ._page-contact--active .phone-contact-heading {
        transform: translate(-50%) scale(1);
        opacity: 1;
    }

    .layout-phone ._page-contact--active .phone-contact-tile {
        transform: scale(1);
        opacity: 1;
        border-radius: 8px;
    }

    .layout-phone ._page-contact--active .phone-contact-tiles {
        opacity: 1;
        transform: scale(1) translate(0, 0%);
    }

.phone-contact-tiles {
    position: relative;
    height: calc(100% - (var(---phone-contact-heading--CH) + 2dvh));
    width: 100%;
    margin-top: 2dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: scale(0) translate(0, 30%);
    transition: 800ms;
}

.phone-contact-tile {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    border-radius: 0px;
    transform: scale(0);
    opacity: 0;
    transition: 800ms;
}

.row {
    display: flex;
}

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

.phone-footer {
    width: var(---page--CW);
    min-height: calc(var(---page--CH) - (var(---phone-nav--CH) + (var(--p-nav-padding) * 2)));
    border-top: calc(var(---phone-nav--CH) + (var(--p-nav-padding) * 2)) solid white;
    background-color: #252525;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.phone-footer-logo {
    width: 40%;
    max-height: 50%;
    margin: 2dvh 0;
    filter: brightness(0) invert(0.2);
    transition: 800ms;
    transition-delay: 200ms;
}

.phone-footer-logo--active {
    filter: brightness(0) invert(1);
}

.phone-footer-dropdown {
    width: 90%;
    display: flex;
    flex-direction: column;
    border: calc(var(--p-nav-padding) / 2) solid rgb(255, 255, 255);
    border-radius: 5px;
    background-color: white;
    margin-bottom: 1dvh;
}

.phone-footer .phone-footer-dropdown:first-of-type {
    /* margin-top: calc((var(---phone-footer--CH) - ())); */
}

.phone-footer .phone-footer-dropdown:last-of-type {
    margin-bottom: calc(var(--p-nav-padding) * 4);
}

.phone-footer-dropdown h1 {
    background-color: white;
    padding: var(--p-nav-padding);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    width: calc(100% - (var(--p-nav-padding) * 2));
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: calc((var(---phone-nav--CH) + var(---phone-nav--CW)) / 27);
    border-radius: 5px;
}

    .phone-footer-dropdown h1 i {
        margin-left: auto;
    }

.phone-footer-dropdown div {
    height: 0;
    overflow: hidden;
    align-self: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.phone-footer-dropdown--active div {
    height: fit-content;
}

.phone-footer-dropdown--active h1 {
    background-color: #d2d2d2;
}

.phone-footer-dropdown--active div a {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-decoration: none;
    width: calc(100% - (var(--p-nav-padding) * 2));
    display: inline-block;
    padding: var(--p-nav-padding);
    font-size: calc((var(---phone-nav--CH) + var(---phone-nav--CW)) / 31);
    margin-top: var(--p-nav-padding);
    color: #454545;
}

.phone-footer-dropdown--active h1 i {
    transform: rotate(180deg);
}

.phone-footer-end {
    margin-top: auto;
    width: var(---page--CW);
    background-color: #0b0b0b;
}

    .phone-footer-end p {
        font-size: calc((3dvh + var(---page--CW)) / 30);
        color: white;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        text-align: center;
        padding: var(--p-nav-padding);
    }

        .phone-footer-end p:first-of-type {
            margin-top: 2dvh;
        }
/* Phone / Portrait */
@media (orientation: portrait) and (max-aspect-ratio: 2/3) {
    body {
        background: rgb(8, 42, 116);
        overflow: hidden;
    }

    .layout-phone {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: calc(var(---page--CH) + 1);
        width: var(---page--CW);
    }
}

/* Square / Transitional */
@media (min-aspect-ratio: 3/4) and (max-aspect-ratio: 4/3) {
    .layout-desktop {
        display: contents;
    }
}

/* Widescreen / Landscape */
@media (min-aspect-ratio: 4/3) {
    .layout-desktop {
        display: contents;
    }
}


.nav {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--nav-padding));
    margin: calc(var(--nav-padding));
    width: calc(100dvw - (var(--nav-padding) * 4));
    height: 10dvh;
    border-radius: calc(100dvh + 100dvw);
    z-index: 999;
    transition: 400ms;
}

._page-profile--active ._page-profile {
    opacity: 1 !important;
    transform: rotate(0deg) translate(0, 0%) scale(1) !important;
}

._page-profile {
    opacity: 0;
    transform: rotate(3deg) translate(0, 5%) scale(0.9);
    transition: 800ms;
}

.nav--active {
    background-color: rgb(0, 81, 255);
}

.logo {
    height: 10dvh;
    width: 15dvw;
    margin: 0 var(--nav-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    filter: brightness(0) invert(1);
    background: url('https://i.postimg.cc/nzTqg6sB/unify-thick.png') no-repeat center;
    background-size: contain;
}

.nav .login-btn {
    height: 8dvh;
    width: 8dvw;
    border-radius: calc(100dvh + 100dvw);
    outline: none;
    border: none;
    font-size: calc((8dvh + 8dvw) / 9);
    margin: var(--nav-padding);
    background-color: rgb(223, 223, 223);
    font-weight: 700;
    cursor: pointer;
    color: rgb(59, 59, 59);
    transition: 200ms;
}

    .nav .login-btn:hover {
        color: rgb(39, 39, 39);
        background-color: rgb(255, 255, 255);
        transform: scale(0.950);
    }

.nav-contents {
    width: calc(var(---nav--CW) - ((var(---logo--CW) + (var(--nav-padding) * 8)) + (var(---login-btn--CW) + (var(--nav-padding) * 4))));
    height: 10dvh;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .nav-contents button {
        position: relative;
        background: transparent;
        color: black;
        outline: none;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 6dvh;
        min-width: 10%;
        background-color: transparent;
        border-radius: calc(100dvh + 100dvw);
        font-size: calc(((var(---nav-contents--CW) * 0.10) + 6dvh) / 9);
        margin: 0 calc(2dvh + 2px);
        padding: 0 calc(2dvh + 2px);
        color: white;
        transition: 400ms;
        cursor: pointer;
        font-weight: 700;
    }

        .nav-contents button:hover::after {
            border-color: rgb(12, 33, 78, 0.2);
            background-color: rgb(12, 33, 78, 0.2);
        }

.layout-desktop .nav-btn--active {
    background-color: white !important;
    color: #252525 !important;
}

    .layout-desktop .nav-btn--active::after {
        border-color: white !important;
    }

.nav-contents button:hover {
}

.nav-contents button::after {
    content: "";
    position: absolute;
    height: 8dvh;
    width: calc(100% + 2dvh);
    border: 2px solid transparent;
    border-radius: calc(100dvh + 100dvw);
    transition: 400ms;
    z-index: -1;
}

.nav-contents button i {
    margin-right: 0.5ch;
}

.nav-contents button div {
}

img {
    width: 100%;
}

.gradient {
    position: relative;
    height: 100dvh;
    width: 100%;
    background: linear-gradient(to top, rgb(8, 42, 116), rgb(0, 81, 255));
    display: flex;
}

    .gradient::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgb(8, 42, 116), rgb(0, 81, 255));
        animation: fade 1s infinite linear alternate;
    }

.second-header-gradient {
    position: relative;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100dvw;
    display: flex;
    background: linear-gradient(to top, rgb(8, 42, 116), rgb(8, 42, 116) 50%);
}

    .second-header-gradient::after {
        position: absolute;
        top: 1%;
        left: 0%;
        background: url('https://i.makeagif.com/media/12-21-2015/UPuNC9.gif') no-repeat center;
        height: calc(99% - 10dvh);
        width: 100%;
        background-size: 100% 100%;
        opacity: 0.3;
    }

    .second-header-gradient::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
        width: 100%;
        background: linear-gradient(to top, transparent, rgb(8, 42, 116));
        z-index: +1;
    }

@keyframes fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.1;
    }
}

.header-computer {
    width: 50%;
    height: calc(100% - (var(---nav--CH) + (var(--nav-padding) * 2)));
    margin-top: calc(var(---nav--CH) + (var(--nav-padding) * 2));
    background: url('https://i.postimg.cc/TP7Vqn9C/image.webp') no-repeat center;
    background-size: contain;
}

.header-title {
    width: 45%;
    height: calc(100% - (var(---nav--CH) + (var(--nav-padding) * 2)));
    margin-top: calc(var(---nav--CH) + (var(--nav-padding) * 2));
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: white;
    text-align: center;
    --h1-fs: calc((var(---page--CH) + var(---page--CW)) / 60);
}

    .header-title h1 {
        font-size: var(--h1-fs);
        font-weight: 900;
    }

    .header-title h2 {
        font-size: calc(var(--h1-fs) / 1.7);
        font-weight: 600;
        width: var(---header-title____h1--CW);
        margin-top: calc((100% - (var(---header-title____h1--CH) + var(---header-title____h1--CW))) / 5);
    }

.profile-second-window {
    position: relative;
    width: 50%;
    height: 100%;
    z-index: +1;
}

.profile-main-window {
    position: relative;
    margin-top: 20dvh;
    width: calc(100% - (var(--nav-padding) * 2));
    height: fit-content;
    z-index: +1;
    text-align: center;
}

    .profile-main-window h1 {
        font-size: calc((100dvh + 100dvw) / 50);
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: white;
        letter-spacing: 2px;
        margin-bottom: 8dvh;
    }

    .profile-main-window img {
        width: 20%;
        border-radius: 10px;
        border: 2px solid rgb(206, 206, 206);
        transition: 300ms;
        margin: calc(1dvh + 1dvw);
    }

        .profile-main-window img:nth-child(2) {
            transform: scale(1) rotate(3deg);
        }

        .profile-main-window img:nth-child(3) {
            transform: scale(1) rotate(-3deg);
        }

        .profile-main-window img:nth-child(4) {
            transform: scale(1) rotate(3deg);
        }

        .profile-main-window img:nth-child(5) {
            transform: scale(1) rotate(-3deg);
        }

        .profile-main-window img:nth-child(6) {
            transform: scale(1) rotate(3deg);
        }

        .profile-main-window img:nth-child(7) {
            transform: scale(1) rotate(-3deg);
        }

        .profile-main-window img:nth-child(8) {
            transform: scale(1) rotate(3deg);
        }

        .profile-main-window img:hover {
            transform: scale(1.1) rotate(0deg);
        }

.sign-up-section {
    position: relative;
    background: url('https://i.postimg.cc/Dzjrd1g6/imageasas.webp') no-repeat;
    width: 100dvw;
    height: 100dvh;
    background-size: 100%;
}

    .sign-up-section::after {
        position: absolute;
        top: 0;
        height: 50%;
        width: 100%;
        content: "";
        background: linear-gradient(to top, transparent, rgb(8, 42, 116));
        z-index: +1;
        left: 0;
    }

    .sign-up-section img {
    }

._page-profile img {
    transform: rotate(0deg);
}

.filler {
    position: relative;
    height: 30dvh;
    width: 100%;
    background: linear-gradient(to top, rgb(8, 42, 116), transparent );
    /* background: linear-gradient(to top, rgb(8, 42, 116) , transparent); */
    transform: translate(0, -10dvh);
}

    .filler::after {
        content: "";
        height: 100%;
        width: 100%;
        background-color: rgb(8, 42, 116);
        bottom: 0;
        left: 0;
        position: absolute;
        transform: translate(0, 10dvh);
        z-index: -1;
    }

.join-container {
    top: 0;
    z-index: +2;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
}

    .join-container h1 {
        color: white;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: calc((100dvh + 100dvw) / 50);
        width: 95%;
        align-self: center;
        text-align: center;
    }

.signup-row {
    max-width: 98%;
    background-color: white;
    border: calc((100dvh + 100dvw) / 400) solid rgb(39, 39, 39);
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    width: fit-content;
    align-self: center;
    margin-top: var(--nav-padding);
}

.signup-app {
    position: relative;
    padding: calc((100dvh + 100dvw) / 200);
    margin-right: 0.6dvw;
    display: flex;
    align-items: center;
}

    .signup-app::after {
        content: "";
        position: absolute;
        left: calc(100% + 0.6dvw);
        top: 50%;
        transform: translate(0, -50%);
        height: 50%;
        width: 0.1dvw;
        background-color: rgb(39, 39, 39);
    }

    .signup-app input {
        height: 4dvh;
        width: 14dvw;
        border: none;
        outline: none;
        font-size: calc((4dvh + 14dvw) / 14);
    }

    .signup-app button {
        border: none;
        outline: none;
        height: 6dvh;
        width: 7dvw;
        border-radius: var(--radius-circle);
        background-color: #252525;
        color: white;
        font-weight: 600;
        cursor: pointer;
        font-size: calc((6dvh + 7dvw) / 8);
    }

.join-auth-btn {
    border: none;
    outline: none;
    height: 6dvh;
    min-width: 7dvw;
    border-radius: var(--radius-circle);
    background-color: #252525;
    color: white;
    font-weight: 600;
    cursor: pointer;
    font-size: calc((6dvh + 7dvw) / 10);
    padding: 0 var(--nav-padding);
}

.join-auth-btn-google {
    margin-left: calc(var(--nav-padding) * 2);
    margin-right: calc(var(--nav-padding));
    background-color: rgb(194, 48, 11);
}

.join-auth-btn-facebook {
    margin-right: calc(var(--nav-padding));
    background-color: rgb(11, 106, 194);
}

.signup-app button:hover {
    filter: brightness(110%);
    transform: scale(1.1);
}

.join-auth-btn:hover {
}

.join-auth-btn-google:hover {
    background-color: rgb(116, 13, 13);
}

.join-auth-btn-facebook:hover {
    background-color: rgb(13, 40, 116);
}

._page-section[data-section="SIGN"] .join-container {
    transform: scale(0.9) rotate(-5deg) translate(0, 25%);
    transition: 800ms;
    opacity: 0;
}

._page-join--active .join-container {
    transform: scale(1) rotate(0deg) translate(0, 0%) !important;
    opacity: 1 !important;
}

.layout-desktop ._page-section[data-section="SIGN"]::before {
    content: "";
    height: 100dvh;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top, rgb(8, 42, 116) 1%, transparent);
    width: 100%;
}

.about-section {
    height: 80dvh;
    padding-top: 20dvh;
    width: 100dvw;
    background-color: rgb(8, 42, 116);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .about-section .about-section-text {
        transform: translateY(15%) scale(0.7);
        transition: 800ms;
        opacity: 0;
    }

    .about-section .about-section-image {
        transform: scale(0.7) rotate(3deg);
        transition: 700ms;
        opacity: 0;
    }

._page-about--active .about-section-text {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}

._page-about--active .about-section-image {
    transform: scale(1) rotate(0deg) !important;
    opacity: 1 !important;
}

.about-section-continue {
    height: 80dvh;
    flex-direction: row-reverse;
    width: 100dvw;
    background-color: rgb(8, 42, 116);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.about-story {
    position: relative;
}

    .about-story .about-section-image {
        background: url('https://i.postimg.cc/W4WG60nk/download-(1).webp') no-repeat center !important;
        background-size: 100% !important;
    }

.about-section-image {
    background: url('https://i.postimg.cc/k51QFWcW/download.webp') no-repeat center;
    background-size: contain;
    height: 100%;
    width: 50dvw;
}

.about-section-text {
    height: 80%;
    width: 40dvw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .about-section-text h1 {
        color: white;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: calc((100dvw + 100dvh) / 60);
        margin-bottom: 1dvh;
        align-self: flex-start;
    }

    .about-section-text p {
        color: white;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: calc((100dvw + 100dvh) / 130);
    }

.about-story::after {
    content: "";
    position: absolute;
    bottom: 0;
    height: calc((100dvh + 100dvw) / 20);
    width: calc((100dvh + 100dvw) / 20);
    background-color: rgb(13, 40, 116);
    left: 25%;
    transform: rotate(45deg) translate(-25%, 95%);
}

.about-story {
    overflow: visible !important;
}

.contact-section {
    min-height: 80dvh;
    width: 100dvw;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: 700ms;
    transform: rotate(3deg) scale(0.7);
    opacity: 0.5;
}

.layout-desktop ._page-contact--active {
    transform: rotate(0deg) scale(1) !important;
    opacity: 1 !important;
}

.contact-heading {
    color: rgb(13, 40, 116);
    margin: calc(var(--nav-padding) * 2) 0;
    font-size: calc((100dvh + 100dvw) / 60);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.contact-container {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    max-height: 150dvh;
    overflow-y: scroll;
    justify-content: center;
}

.contact-social {
    user-select: none;
    width: 20dvw;
    height: fit-content;
    border: solid rgb(13, 40, 116);
    border-radius: 8px;
    background-color: rgb(13, 40, 116);
    text-align: center;
    color: white;
    text-decoration: none;
    border-width: calc(var(--nav-padding) / 2);
    transition: 200ms;
    margin: var(--nav-padding);
}

.contact-container a:nth-child(1) {
    transform: rotate(3deg) scale(0.9);
}

.contact-container a:nth-child(2) {
    transform: rotate(-3deg) scale(0.9);
}

.contact-container a:nth-child(3) {
    transform: rotate(3deg) scale(0.9);
}

.contact-container a:nth-child(4) {
    transform: rotate(-3deg) scale(0.9);
}

.contact-container a:nth-child(5) {
    transform: rotate(3deg) scale(0.9);
}

.contact-container a:nth-child(6) {
    transform: rotate(-3deg) scale(0.9);
}

.contact-container a:nth-child(7) {
    transform: rotate(3deg) scale(0.9);
}

.contact-social:hover {
    transform: rotate(0deg) scale(1) !important;
    background-color: rgb(0, 81, 255);
    border-color: rgb(0, 81, 255);
}

.contact-social img {
    width: 100%;
    border-radius: 8px;
}

.contact-social span {
    font-weight: 600;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: calc(var(--nav-padding) * 2);
    width: 100%;
    overflow-y: scroll;
    max-height: 10dvh;
    display: inline-block;
}

.contact-discord:hover {
    background-color: #7388d9 !important;
    border-color: #7388d9 !important;
}

.contact-insta:hover {
    --color: rgb(206, 43, 136);
    background-color: var(--color) !important;
    border-color: var(--color) !important;
}

.contact-x:hover {
    --color: rgb(0, 0, 0);
    background-color: var(--color) !important;
    border-color: var(--color) !important;
}

.contact-linked:hover {
    --color: rgb(1, 101, 161);
    background-color: var(--color) !important;
    border-color: var(--color) !important;
}

.contact-youtube:hover {
    --color: rgb(209, 34, 31);
    background-color: var(--color) !important;
    border-color: var(--color) !important;
}

.contact-reddit:hover {
    --color: rgb(255, 69, 0);
    background-color: var(--color) !important;
    border-color: var(--color) !important;
}

.contact-pin:hover {
    color: rgb(255, 16, 43);
    background-color: white !important;
    border-color: rgb(255, 16, 43) !important;
}

.page-end {
    margin-top: 10dvh;
    height: 80dvh;
    width: 100dvw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page-end-heading {
    font-size: calc((100dvh + 100dvw) / 60);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: rgb(37, 37, 37);
}

.footer {
    min-height: calc(70dvh - var(---page-end-heading--CH));
    width: 100%;
    margin-top: 9dvh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgb(48, 48, 48);
}

.footer-end {
    display: flex;
    background-color: rgb(32, 32, 32);
    width: 98dvw;
    padding: 0 1dvw;
    min-height: 5dvh;
    font-size: calc((5dvh + 100dvw) / 100);
    align-items: center;
    color: rgb(133, 133, 133);
    justify-content: flex-start;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

    .footer-end span {
        margin: 0 1dvw;
    }

.footer-logo {
    width: 25dvw;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    filter: brightness(0) invert(1);
}

    .footer-logo img {
        width: 70%;
        max-height: 100%;
    }

    .footer-logo h1 {
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: white;
        font-size: calc((20dvw + var(---footer-logo--CH)) / 9);
    }

.footer-container {
    width: calc(75dvw - var(--nav-padding));
    margin-right: var(--nav-padding);
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    justify-content: flex-start;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: var(--nav-padding) calc(var(--nav-padding) * 2);
}

    .footer-content h1 {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        color: rgb(238, 238, 238);
        border-bottom: 2px solid rgb(238, 238, 238);
        width: calc(100% - var(--nav-padding));
        padding: var(--nav-padding);
        font-size: calc((var(--nav-padding) * 2) );
    }

    .footer-content a {
        text-decoration: none;
        color: rgb(204, 204, 204);
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: calc((var(--nav-padding) * 1.4) );
        padding: calc(var(--nav-padding) / 2);
        margin: calc(var(--nav-padding) / 2);
        width: 100%;
        border-radius: 5px;
    }

        .footer-content a:hover {
            color: white;
            background-color: rgb(46, 46, 46);
        }