*{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Ubuntu;
            color: #ffffff;
            text-decoration: none;
            outline: none;
        }
        :root{
            --colorb : #0c0c0c;
            --colorw : #ffffff;
            --bg     : radial-gradient(circle, #0c0c0c00 5%, #0c0c0c 40%);
            --bg2     : radial-gradient(circle, #0c0c0c00 5%, #0c0c0c 56%);
            /* --bg2    : radial-gradient(circle, #0c0c0c00 0%, #0c0c0c 35%); */
            --b      : linear-gradient(90deg, #ffffff00 0%, #ffffff3a 50%, #ffffff00 100%);
        }
        body{
            background: var(--colorb);
            background-size:cover 100%;
            background-position: center;
            width: 100vw;
            overflow-x: hidden;
            
        }
        .container{
            height: 100vh;
            width: 100vw;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .cs{
            position: absolute;
            width: 500px;
            height: 220px;
            animation: 4s ease-in infinite both running cs;
        }
        @keyframes cs {
            0%   {width: 510px;
                  height: 230px;
                }
            10% {width: 500px;
                  height: 220px;
                }
            100% {width: 500px;
                  height: 220px;
                }
        }
        .cs img{
            width: 100%;
        }
        .bg{
            z-index: 1;
            position: fixed;
            height: 100%;
            width: 100%;
            background: var(--bg);
            animation: 2s linear infinite bg;
        }
        @keyframes bg{
            0%   {height: 100%;
                  width: 100%;}
            100% {height:120%;
                  width: 120%;}
        }
        .csdiv{
            position: relative;
            height: 30%;
            width: 65%;
            /* background: var(--colorw); */
            bottom: 35%;
            left: 15%;
            border-radius: 50px;
            overflow: hidden;
        }
        .csdiv .w{
            position: relative;
            height: 80px;
            width: 25px;
            opacity: 0.3;
            background: var(--colorw);
            rotate: 30deg ;
            left: -3%;
            animation: 1.5s ease-in infinite both running w;
        }
        @keyframes w {
            0%   {left: -3%;
                  width: 20px;}
            100% {left: 100%;
                  width: 30px;}
        }
        .bdiv{
            position: absolute;
            z-index: 2;
            height: 3px;
            width: 100%;
            bottom: 50px;
            left: 0;
            overflow: hidden;
        }
        .bdiv .b{
            position: absolute;
            background: var(--b);
            height: 100%;
            width: 40%;
            animation: 2s ease-in infinite both running b;
        }
        @keyframes b {
            0%   {left: -40%;}
            100% {left: 100%;}
        }
        .logo{
            z-index: 2;
            height: 30px;
            position: absolute;
            top: 50px;
        }
        @media (max-width: 1080px){
        .bg{
            background: var(--bg2);
        }
        .cs{
            width: 250px;
            height: 110px;
        }
        @keyframes cs {
            0%   {width: 255px;
                  height: 115px;
                }
            10% {width: 250px;
                  height: 110px;
                }
            100% {width: 250px;
                  height: 110px;
                }
        }
        }