@import url('https://fonts.googleapis.com/css?family=Raleway:400,700');

        /* BASE SECTION */
        section {
            position: fixed;
            inset: 0;
            background: #666699;
            overflow: hidden;
        }

        /* RESPONSIVE LAYERS */
        .layer {
            position: absolute;
            top: 0;
            left: -55vw;
            /* responsive instead of -80% */
            width: 150vw;
            /* bigger so it covers all screen sizes */
            height: 100vh;
            box-shadow: 2vw 0 2vw rgba(0, 0, 0, 0.3);
        }

        /* LEFT SLOPING GROUP */
        .layer1 {
            background: #666699;
            transform: skewX(-45deg) translateX(0vw);
            z-index: 1;
        }

        .layer2 {
            background: #0000cd;
            transform: skewX(-45deg) translateX(-10vw);
            z-index: 3;
        }

        .layer3 {
            background: #32cd32;
            transform: skewX(-45deg) translateX(-20vw);
            z-index: 5;
        }

        .layer4 {
            background: #708090;
            transform: skewX(-45deg) translateX(-30vw);
            z-index: 7;
        }

        /* RIGHT SLOPING GROUP */
        .layer5 {
            background: #666699;
            transform: skewX(45deg) translateX(0vw);
            z-index: 2;
        }

        .layer6 {
            background: #002147;
            transform: skewX(45deg) translateX(-10vw);
            z-index: 4;
        }

        .layer7 {
            background: #008000;
            transform: skewX(45deg) translateX(-20vw);
            z-index: 6;
        }

        .layer8 {
            background: #708090;
            transform: skewX(45deg) translateX(-30vw);
            z-index: 8;
        }

        .layer9 {
            background: transparent;
            transform: skewX(45deg) translateX(-40vw);
            z-index: 10;
        }

        /*big left container */

        /* MOBILE RESPONSIVE FIXES */
        @media (max-width: 768px) {
            .layer {
                left: -150vw;
                width: 200vw;
                height: 100vh;
                box-shadow: 4vw 0 4vw rgba(0, 0, 0, 0.25);
            }

            .layer1 {
                transform: skewX(-45deg) translateX(0vw);
            }

            .layer2 {
                transform: skewX(-45deg) translateX(-20vw);
            }

            .layer3 {
                transform: skewX(-45deg) translateX(-40vw);
            }

            .layer4 {
                transform: skewX(-45deg) translateX(-60vw);
            }

            .layer5 {
                transform: skewX(45deg) translateX(0vw);
            }

            .layer6 {
                transform: skewX(45deg) translateX(-20vw);
            }

            .layer7 {
                transform: skewX(45deg) translateX(-40vw);
            }

            .layer8 {
                transform: skewX(45deg) translateX(-60vw);
            }
        }

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

        @keyframes spin {
            to {
                --bg-angle: 360deg;
            }
        }

        #border_color {
            animation: spin 5.5s infinite linear;

            background:
                linear-gradient(to bottom, #1a1110, #1a1110) padding-box,
                conic-gradient(from var(--bg-angle),
                    #1a1110 80%,
                    #0038a8 90%,
                    #00ff7f 100%) border-box;

            border: 3px solid transparent;
            border-radius: 1rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);

            color: white;
            padding: 1.5rem;

            /* RESPONSIVE WIDTH */
            width: min(350px, 90vw);
            /* Mobile-friendly */
            margin: auto;
            margin-bottom: 5%;

            transition: transform .2s ease;
        }

        #border_color:hover {
            animation-play-state: running;
            transform: scale(1.03);
        }

        #border_color h3 {
            font-size: clamp(1.2rem, 4vw, 1.7rem);
            line-height: 1.3;
        }

        @media (max-width: 480px) {
            #border_color {
                width: min(250px, 90vw);
                /* Mobile-friendly */
                padding: 1.2rem;
                border-radius: 0.9rem;
            }
        }
        
        #float_right {
            font-size: 7vw;
            font-weight: 1000;
            color: #f2f3f4;
            text-shadow:
                5.5px 5.5px 0px #03c03c,
                -5.5px -5.5px 0px #007fff;
            text-align: center;
            margin-top: 10%;
            letter-spacing: 10px;
            margin-right: 5%;
        }

        @media (min-width: 768px) {
            #float_right {
                float: right;
                margin-top: 10%;
                letter-spacing: 10px;
                margin-right: 5%;
                font-size: 7vw;
            }

            #title_login {
                display: none;
            }
        }

        @media (max-width: 1340px) {
            #float_right {
                display: none;
            }

            #live_toast {
                display: none;
            }

            #title_loginv2 {
                display: none;
            }

            #title_login {
                display: block;
            }
        }
        
        @media (max-width: 576px) {
            #field_container {
                padding: 15px;
                font-size: 14px;
            }

            h1 {
                font-size: 1.5rem;
            }

            button {
                font-size: 0.9rem;
            }
        }
        
        .dropping-texts {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 36px;
            font-size: 25px;
        }

        .dropping-texts>div {
            font-size: 0px;
            opacity: 0;
            margin-left: -30px;
            position: absolute;
            font-weight: 300;
            box-shadow: 0px 60px 25px -20px rgba(0, 0, 0, 0.5);
        }

        .dropping-texts>div:nth-child(1) {
            animation: roll 17s linear infinite 0s;
        }

        .dropping-texts>div:nth-child(2) {
            animation: roll 17s linear infinite 4s;
        }

        .dropping-texts>div:nth-child(3) {
            animation: roll 17s linear infinite 8s;
        }

        .dropping-texts>div:nth-child(4) {
            animation: roll 17s linear infinite 12s;
        }

        @keyframes roll {
            0% {
                font-size: 0px;
                opacity: 0;
                margin-left: -30px;
                margin-top: 0px;
                transform: rotate(-25deg);
            }

            3% {
                opacity: 1;
                transform: rotate(0deg);
            }

            5% {
                font-size: inherit;
                opacity: 1;
                margin-left: 0px;
                margin-top: 0px;
            }

            20% {
                font-size: inherit;
                opacity: 1;
                margin-left: 0px;
                margin-top: 0px;
                transform: rotate(0deg);
            }

            27% {
                font-size: 0px;
                opacity: 0.5;
                margin-left: 20px;
                margin-top: 100px;
            }

            100% {
                font-size: 0px;
                opacity: 0;
                margin-left: -30px;
                margin-top: 0px;
                transform: rotate(15deg);
            }
        }

        @keyframes roll2 {
            0% {
                font-size: 0px;
                opacity: 0;
                margin-left: -30px;
                margin-top: 0px;
                transform: rotate(-25deg);
            }

            3% {
                opacity: 1;
                transform: rotate(0deg);
            }

            5% {
                font-size: inherit;
                opacity: 1;
                margin-left: 0px;
                margin-top: 0px;
            }

            30% {
                font-size: inherit;
                opacity: 1;
                margin-left: 0px;
                margin-top: 0px;
                transform: rotate(0deg);
            }

            37% {
                font-size: 1500px;
                opacity: 0;
                margin-left: -1000px;
                margin-top: -800px;
            }

            100% {
                font-size: 0px;
                opacity: 0;
                margin-left: -30px;
                margin-top: 0px;
                transform: rotate(15deg);
            }
        }
    
/* Smooth modal entrance */
.modal.fade .modal-dialog {
    transform: translateY(30px) scale(1.95);
    opacity: 0;
    transition: all 0.50s ease;
    /*transition: all 1.00s ease;*/
}

/* When modal is visible */
.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Optional: smoother backdrop */
.modal-backdrop {
    transition: opacity 1.0s ease;
    /*transition: opacity 1.35s ease;*/
}

    
        /* ===== Dim background behind modal ===== */
        .modal-backdrop.show {
            opacity: 0.65;
            background-color: #020617;
        }

        /* ===== Glass Modal ===== */
        #memberModal .modal-content {
            background:
                linear-gradient(135deg,
                    rgba(15, 32, 39, 0.75),
                    rgba(32, 58, 67, 0.75),
                    rgba(44, 83, 100, 0.75)) padding-box,
                linear-gradient(135deg,
                    #22c55e,
                    /* green */
                    #2dd4bf,
                    /* teal */
                    #3b82f6
                    /* blue */
                ) border-box;

            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border-radius: 18px;
            color: #eaf6f6;

            border: 1.5px solid transparent;
            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
        }


        /* ===== Header ===== */
        #memberModal .modal-header {
            border-bottom: 1px solid rgba(255, 255, 255, 0.18);
        }

        #memberModal .modal-title {
            font-weight: 600;
            letter-spacing: 0.4px;
        }

        #memberModal .btn-close {
            filter: invert(1);
            opacity: 0.7;
        }

        #memberModal .btn-close:hover {
            opacity: 1;
        }

        /* ===== Body ===== */
        #memberModal .modal-body {
            padding: 1.5rem;
        }

        /* ===== Name ===== */
        .member-name {
            font-size: 1.2rem;
            font-weight: 600;
            color: #c7f9cc;
        }

        /* ===== Glass Cards ===== */
        .info-card {
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 14px;
            padding: 1rem 0.75rem;
            border: 1px solid rgba(255, 255, 255, 0.18);
            transition: all 0.25s ease;
        }

        .info-card:hover {
            background: rgba(255, 255, 255, 0.18);
            transform: translateY(-4px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
        }

        .info-card strong {
            display: block;
            font-size: 0.72rem;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            color: #9be7c4;
            margin-bottom: 0.25rem;
        }

        /* ===== Status Colors ===== */
        .text-success {
            color: #4ade80 !important;
            font-weight: 600;
        }

        .text-danger {
            color: #fb7185 !important;
            font-weight: 600;
        }

        .text-warning {
            color: #facc15 !important;
            font-weight: 600;
        }

        /* ===== Footer ===== */
        #memberModal .modal-footer {
            border-top: 1px solid rgba(255, 255, 255, 0.18);
        }

        #memberModal .btn-secondary {
            background: linear-gradient(135deg, rgba(31, 162, 166, 0.85), rgba(45, 212, 191, 0.85));
            border: none;
            border-radius: 10px;
            color: #022c22;
            font-weight: 500;
        }

        #memberModal .btn-secondary:hover {
            opacity: 0.9;
        }
        /* ===== Page Background ===== */
        .glass-page {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
            padding: 1rem;
        }

        /* ===== Glass Card ===== */
        .glass-card {
            width: 100%;
            max-width: 480px;
            padding: 2rem 1.75rem;
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
            color: #eaf6f6;
        }

        /* ===== Title ===== */
        .glass-title {
            font-weight: 600;
            margin-bottom: 1.5rem;
        }

        .glass-title span {
            font-size: 0.9rem;
            font-weight: 400;
            color: #c7f9cc;
        }

        /* ===== Note ===== */
        .glass-note {
            font-size: 0.85rem;
            color: #c7f9cc;
            background: rgba(255, 255, 255, 0.08);
            padding: 0.75rem;
            border-radius: 12px;
            margin-bottom: 1rem;
        }

        /* ===== Input ===== */
        .glass-input {
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.25);
            color: #fff;
        }

        .glass-input::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }

        .glass-input:focus {
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            box-shadow: none;
            border-color: #2dd4bf;
        }

        /* ===== Button ===== */
        .glass-btn {
            background: linear-gradient(135deg, #1fa2a6, #2dd4bf);
            border: none;
            color: #022c22;
            font-weight: 600;
        }

        .glass-btn:hover {
            opacity: 0.9;
        }

        /* ===== Links ===== */
        .glass-links .btn {
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #eaf6f6;
        }

        .glass-links .btn:hover {
            background: rgba(255, 255, 255, 0.22);
            color: #c7f9cc;
        }