*{
            margin:0;
            padding:0;
            
        }
        body{
            background-color:rgb(0,0,33);
            color:white;
            font-family:'Poppins',sans-serif;
        }
        
    
        nav{
            display:flex;
            justify-content: space-around;
            align-items:center;
            height: 80px;
            background-color: rgb(18,18,62);
        }
        nav ul{
            display:flex;
            justify-content:center;
        }
        nav ul li{
            list-style:none;
            margin:0 23px;
        }
        nav ul li a{
            text-decoration:none;
            color:white;
        }
        nav ul li a:hover{
            color:rgb(153,153,226);
            font-size: 1.01 rem;
        }

        main hr{
            border:0;
            background: #9c97f1;
            height:1.2px;
            margin:60px 84px;
        }

        .left{
            font-size: 1.5rem;
        }

        .firstSection{
            display:flex;
            justify-content: space-around;
            align-items: center;
            margin:130 px 0;
        }

        .firstSection > div{
            width:30%;
        }

        .leftSection{
            /* background-color:red; */
            font-size: 3rem;
            margin:70px 0;
            /* width: 34px; */
        }
        .leftSection div {
            display: inline;
        }

        

        .leftSection .btn {
            padding: 12px;
            background: #1e2167;
            color: white;
            border:2px solid white;
            border-radius: 6px;
            font-size: 20px;
            cursor: pointer;
        }

        
        .leftSection .buttons{
            padding:50px 0;
        }
        
        /* .rightSection{
            background-color: red;
        } */
        .rightSection img{
            width:80%;
            margin:50px 0;
        }
        
        .purple{
            color: rgb(170, 107, 228);
        }

        .text-gray{
            color:gray;
        }

        #element{
            color:rgb(170,107,228)
        }

        .secondSection{
            max-width: 80vw;
            margin:auto;
            height:80vh;
        }

        .secondSection h1{
            font-size: 1.9rem;
        }

        .secondSection .box{
            background:white;
            width:77vw;
            height:2px;
            margin:56px 0;
            display: flex;
        }

        .secondSection .vertical{
            height:93px;
            width:1px;
            background-color:white;
            margin:0 100px;
        }

        .image-top{
            width:50px;
            height:50px;
            position:relative;
            top:-50px;
            left:-50px;
        }

        .vertical-title{
            position:relative;
            top:75px;
            width:150px;
            font-size: 14px;
        }

        .vertical-desc{
            position:relative;
            top:86px;
            color:gray;
            width:150px;
            font-size: 9px;
        }

        footer{
            background-color: #0e0e1a;
        }

        .footer{
            display:flex;
            padding:23px 122px;
            justify-content: space-evenly;
        }

        .footer ul{
            list-style: none;
        }

        .footer > diV{
            width:223px;
        }
        

        footer .footer-rights{
            text-align: center;
            color: gray;
            padding: 12px 0;
        }
        
        #githubLink{
            color:white;
        }


        @media screen and (max-width: 768px) {
            nav {
                flex-direction: column;
                height: auto;
                padding: 10px 0;
            }
        
            nav ul {
                flex-direction: column;
                padding: 10px 0;
            }
        
            nav ul li {
                margin: 10px 0;
            }


            .secondSection .vertical {
                width: 100%;
                background: unset;
                display: flex;
                gap: 0.5em;
              }
            
              .secondSection .vertical-content {
                display: flex;
                flex-direction: column;
                gap: 0.5em;
              }
            
              .image-top,
              .secondSection .vertical-title,
              .secondSection .vertical-desc {
                top: unset;
                left: unset;
                text-align: unset;
              }
            
              .secondSection .box{
                background:unset;
              }
        
            .firstSection {
                flex-direction: column;
                text-align: center;
                margin: 50px 0;
            }
        
            .firstSection > div {
                width: 80%;
            }
        
            .leftSection {
                font-size: 2rem;
                margin: 30px 0;
            }
        
            .rightSection img {
                width: 100%;
                margin: 30px 0;
            }
        
            .secondSection {
                max-width: 100%;
                padding: 20px;
                height: auto;
            }
        
            .secondSection .box {
                flex-direction: column;
                align-items: center;
                width: 100%;
                height: auto;
            }
        
            .secondSection .vertical {
                margin: 20px 0;
                height: 70px;
            }
        
            .vertical-title,
            .vertical-desc {
                text-align: center;
                width: auto;
            }
        
            .vertical-title,
            .vertical-desc {
                text-align: center;
                width: auto;
            }
            

            .footer {
                flex-direction: column;
                align-items: center;
                text-align: center;
                padding: 20px;
            }
        
            .footer > div {
                width: auto;
                margin-bottom: 15px;
            }
        }