/* ===========================
        DIGITAL CIRCUIT BACKGROUND
        =========================== */

        body{
            margin:0;
            /* overflow:hidden; */
            /* min-height:100vh; */
            font-family:'Ubuntu',sans-serif;
            background:#12392e;
            /* position:relative; */
        }

        /* Base */

        .circuit-bg{
            position:fixed;
            inset:0;
            z-index:-2;
            overflow:hidden;

            background:
                linear-gradient(#ffffff08 1px,transparent 1px),
                linear-gradient(90deg,#ffffff08 1px,transparent 1px),
                linear-gradient(135deg,#12392e,#0c2c23);

            background-size:
                70px 70px,
                70px 70px,
                cover;
        }

        /* Vertical */

        .circuit-bg::before{

            content:"";

            position:absolute;

            inset:0;

            background-image:

                linear-gradient(#c7a964,#c7a964),

                linear-gradient(#c7a964,#c7a964),

                linear-gradient(#c7a964,#c7a964),

                linear-gradient(#c7a964,#c7a964),

                linear-gradient(#c7a964,#c7a964);

            background-repeat:no-repeat;

            background-size:

                2px 100%,

                2px 70%,

                2px 55%,

                2px 80%,

                2px 65%;

            background-position:

                8% 0,

                28% 20%,

                52% 0,

                74% 15%,

                92% 10%;

            opacity:.25;

        }

        /* Horizontal */

        .circuit-bg::after{

            content:"";

            position:absolute;

            inset:0;

            background-image:

                linear-gradient(90deg,#c7a964,#c7a964),

                linear-gradient(90deg,#c7a964,#c7a964),

                linear-gradient(90deg,#c7a964,#c7a964),

                linear-gradient(90deg,#c7a964,#c7a964),

                linear-gradient(90deg,#c7a964,#c7a964),

                linear-gradient(90deg,#c7a964,#c7a964);

            background-repeat:no-repeat;

            background-size:

                100% 2px,

                75% 2px,

                65% 2px,

                90% 2px,

                55% 2px,

                80% 2px;

            background-position:

                0 12%,

                25% 28%,

                0 48%,

                10% 66%,

                35% 84%,

                0 94%;

            opacity:.25;

        }
        .pulse{

            position:absolute;

            width:14px;

            height:14px;

            border-radius:50%;

            background:#c7a964;

            box-shadow:
                0 0 12px #c7a964,
                0 0 30px #c7a964;

        }

        .p1{

            animation:move1 8s linear infinite;

        }

        .p2{

            animation:move2 12s linear infinite;

        }

        .p3{

            animation:move3 10s linear infinite;

        }

        @keyframes move1{

            0%{
                left:8%;
                top:0;
            }

            50%{
                left:8%;
                top:90%;
            }

            100%{
                left:8%;
                top:0;
            }

        }

        @keyframes move2{

            0%{
                left:0;
                top:48%;
            }

            100%{
                left:100%;
                top:48%;
            }

        }

        @keyframes move3{

            0%{
                left:74%;
                top:100%;
            }

            100%{
                left:74%;
                top:0;
            }

        }
        /*=============================
            CIRCUIT NODE
        =============================*/

        .node{

            position:absolute;

            width:16px;

            height:16px;

            border-radius:50%;

            background:#12392e;

            border:3px solid #c7a964;

            box-shadow:
            0 0 10px rgba(199,169,100,.45);

            animation:nodeGlow 3s ease-in-out infinite;

        }

        .node::after{

            content:"";

            position:absolute;

            inset:3px;

            border-radius:50%;

            background:#c7a964;

        }
        @keyframes nodeGlow{

            0%,100%{

                transform:scale(1);

                box-shadow:
                0 0 8px rgba(199,169,100,.30);

            }

            50%{

                transform:scale(1.28);

                box-shadow:
                0 0 24px rgba(199,169,100,.9);

            }

        }
        .n1{left:8%;top:12%;animation-delay:.5s;}
        .n2{left:28%;top:28%;animation-delay:2s;}
        .n3{left:52%;top:48%;animation-delay:1.3s;}
        .n4{left:74%;top:66%;animation-delay:2.8s;}
        .n5{left:92%;top:94%;animation-delay:1.8s;}
        .n6{left:74%;top:15%;animation-delay:.9s;}
        .n7{left:52%;top:84%;animation-delay:3.2s;}
        .n8{left:28%;top:70%;animation-delay:2.2s;}

        .corner{

            position:absolute;

            width:34px;

            height:34px;

            border-left:2px solid #c7a964;

            border-bottom:2px solid #c7a964;

            opacity:.35;

        }
        .c1{

            left:8%;

            top:12%;

        }

        .c2{

            left:28%;

            top:28%;

            transform:rotate(-90deg);

        }

        .c3{

            left:52%;

            top:48%;

            transform:rotate(180deg);

        }

        .c4{

            left:74%;

            top:15%;

            transform:rotate(90deg);

        }

        .c5{

            left:74%;

            top:66%;

        }

        .c6{

            left:28%;

            top:70%;

            transform:rotate(180deg);

        }
        .circuit-bg{

            filter:drop-shadow(0 0 10px rgba(199,169,100,.08));
        }
        .circuit-svg{
            position:absolute;
            inset:0;
            width:100%;
            height:100%;
            pointer-events:none;
        }

        .trace{
            fill:none;
            stroke:#c7a964;
            stroke-width:3;
            stroke-linecap:round;
            stroke-linejoin:round;

            stroke-dasharray:14 10;

            opacity:.22;

            animation:
                traceMove 14s linear infinite,
                traceGlow 4s ease-in-out infinite;
        }
        @keyframes traceMove{

            from{
                stroke-dashoffset:0;
            }

            to{
                stroke-dashoffset:-400;
            }

        }

        @keyframes traceGlow{

            0%,100%{
                opacity:.18;
                filter:drop-shadow(0 0 0px #c7a964);
            }

            50%{
                opacity:.55;
                filter:drop-shadow(0 0 10px #c7a964);
            }

        }