/*/————————————————————————————————————————————————————————/*/
/*/——————————————————[ MOBILE-FRONTEND ]——————————————————/*/
/*/————————————————————————————————————————————————————————/*/
@media screen and (max-width: 1500px) {
    nav ul {
        text-align: right;
    }

    /*/————————————————————————————————————————————————————————/*/
    /*/———————————————————[ EXTERNAL-ASSETS ]——————————————————/*/
    /*/————————————————————————————————————————————————————————/*/
    @font-face {
        font-family: 'Jost-Regular';
        src: url('fonts/Jost-Regular.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
    }

    @font-face {
        font-family: 'Jost-Medium';
        src: url('fonts/Jost-Medium.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
    }

    @font-face {
        font-family: 'Jost-Bold';
        src: url('fonts/Jost-Bold.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
    }

    /*/————————————————————————————————————————————————————————/*/
    /*/———————————————————[ ID-ANIMATIONS ]————————————————————/*/
    /*/————————————————————————————————————————————————————————/*/
    #logo_text:hover {
        scale: 1.05;
    }

    /*/————————————————————————————————————————————————————————/*/
    /*/—————————————————————[ PAGE-ELEMENTS ]——————————————————/*/
    /*/————————————————————————————————————————————————————————/*/
    body {
        display: flex;
        font-family: 'Jost-Regular';
        justify-content: center;
        align-items: center;
        color: white;
        background-color: #1d0824;
        background-image: url('media/images/backgrounds/purple_background.png');
        background-size: 125%;
        background-repeat: no-repeat;
        background-attachment: fixed;
        overflow-x: hidden;
        margin: 0;
    }

    img {
        position: absolute;
        transform-origin: top left;
        z-index: 6;
    }

    canvas {
        display: block;
        position: absolute;
        top: 0%;
        left: 0%;
        display: none;
    }

    .page {
        position: absolute;
        display: flex;
        height: 100vh;
        width: 100vw;
        z-index: 0;
    }

    .banner {
        position: fixed;
        display: flex;
        flex-direction: row-reverse;
        background-color: #8622a8;
        transform-origin: top center;
        top: 0;
        left: 0;
        right: 0;
        height: 40px;
        transition: all 0.4s;
        z-index: 3;
    }

    .top {
        position: fixed;
        display: flex;
        flex-direction: row-reverse;
        background-color: #3a1b44;
        transform-origin: top center;
        top: 40px;
        left: 0;
        right: 0;
        height: 60px;
        transition: top 0.4s;
        box-shadow: 0px 2px 0px #1d0824;
        z-index: 2;
        display: none;
    }

    .left {
        position: fixed;
        top: 40px;
        left: 131px;
        transition: top 0.4s;
        z-index: 3;
        display: none;
    }  

    .center {
        position: absolute;
        top: calc(50% + 40px);
        left: 50%;
        transform: translate(-50%, -50%);
        transition: top 0.4s;
        z-index: 1;
        scale: 0.35;
    }

    .right {
        position: fixed;
        top: 40px;
        right: 131px;
        transition: top 0.4s;
        z-index: 3;
        display: none;
    }  

    .footer {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #3a1b44;
        bottom: 0;
        right: 0;
        height: 500px;
        width: 100%;
        transform-origin: bottom center;
        box-shadow: 0px -2px 0px #1d0824;
        z-index: 4;
        display: none;
    }

    ::-webkit-scrollbar {
        width: 6px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #ffffff;
        border-radius: 100px;
        cursor: pointer;
    }

    ::-webkit-scrollbar-track {
        background-color: #250b2d;
    }

    ::selection {
        background-color: #914ad300;
        color: #ffffff;
        border-radius: 5px;
    }

    /*/————————————————————————————————————————————————————————/*/
    /*/————————————————————[ UI-ELEMENTS ]—————————————————————/*/
    /*/————————————————————————————————————————32————————————————/*/
    .ui_box_rectangle {
        position: absolute;
        background-color: #3a1b44;
        border-radius: 16px;
        height: 428px;
        width: 1068px;
        right: 50%;
        transform: translateX(500px);
        transform-origin: center center;
        overflow: hidden;
        transition: opacity 0.4s;
        z-index: 3;
    }

    .ui_group_box {
        position: relative;
        display: grid;
        background-color:#ffffff00;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        height: 216px;
        width: 534px;
        padding-top: 40px;
        padding-left: 40px;
        z-index: 4;
    }

    .ui_box_ad {
        position: absolute;
        background-color: #3a1b44;
        border-radius: 16px;
        height: 580px;
        width: 150px;
        right: 50%;
        transform: translateX(50%);
        transform-origin: center center;
        overflow: hidden;
        box-shadow: 0px 0px 0px 2px #1d0824;
        z-index: 3;
    }

    .circle {
        position: absolute;
        background-color: #250b2d;
        border-radius: 100px;
        height: 36px;
        width: 36px;
        transform-origin: center center;
        transition: scale 0.1s;
        z-index: 6;
    }

    .social {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        left: calc(50% - 178px);
        transform: translate(-50%);
        transform-origin: center center;
        cursor: pointer;
        height: 20px;
        width: 20px;
        padding-left: 15px;
        transition: scale 0.1s;
        z-index: 3;
        scale: 0.8;
    }

    .social:hover {
        scale: 1.05;
    }

    .circle:hover {
        scale: 1.05;
    }

    /*/————————————————————————————————————————————————————————/*/
    /*/———————————————————[ TEXT-ELEMENTS ]————————————————————/*/
    /*/————————————————————————————————————————————————————————/*/
    p {
        position: absolute;
        display: flexbox;
        font-family: 'Jost-Medium';
        color: #cccccc;
        font-size: 20px;
        top: 65%;
        left: 50%;
        height: 300px;
        width: 1000px;
        transform: translate(-50%,-50%);
        text-align: center;
        z-index: 5;
    }

    a {
        color: #cccccc;
        text-decoration: none;
    }

    a:hover {
        color: #ffffff;
    }

    .menu_text {
        display: inline-block;
        position: relative;
        font-family: 'Jost-Medium';
        color: #cccccc;
        font-size: 18px;
        top: 30%;
        right: 120px;
        height: 20px;
        width: fit-content;
        padding-left: 20px;
        cursor: pointer;
        transform-origin: center center;
        transition: all 0.1s;
        z-index: 5;
        display: none;
    }

    .menu_text:hover {
        color: #ffffff;
    }

    .footer_menu_text {
        font-family: 'Jost-Medium';
        color: #cccccc;
        font-size: 20px;
        height: 20px;
        width: fit-content;
        padding-bottom: 20px;
        cursor: pointer;
        transition: all 0.1s;
        display: none;
    }

    .footer_menu_text:hover {
        color: #ffffff;
    }

    .left_f_menu {
        display: flex;
        flex-direction: column;
        align-items: start;
        position: absolute;
    }

    .left_r_menu {
        display: flex;
        flex-direction: column;
        align-items: end;
        position: absolute;
    }

    .left_f_menu {
        left: 160px;
        top: 160px;
    }

    .left_r_menu {
        right: 160px;
        top: 160px;
    }

    .banner_text {
        position: absolute;
        display: block;
        font-family: 'Jost-Medium';
        color: #ffffff;
        font-size: 10px;
        top: 65%;
        left: 50%;
        transform: translate(-50%,-50%);
        height: 100%;
        width: 100%;
        text-align: center;
        transition: all 0.4s;
        z-index: 5;
    }

    /*/————————————————————————————————————————————————————————/*/
    /*/——————————————————[ SPECIAL-ELEMENTS ]——————————————————/*/
    /*/————————————————————————————————————————————————————————/*/
}