style.css

*{
    box-sizing: border-box;
}
.form-grp{
    background:black;
    display:flex;
    flex-direction: column;
    padding: 30px;
  width: 60vw;
  height: 100%;
    border: 2px solid rgb(72, 255, 0);
   border-radius: 20px;
}
.co input[type="text"],.co input[type="password"]{
    display: block;
    padding: 14px 10px;
    margin: 20px;
    border-radius: 20px;
    transition:all 4s ease-in;
}
.co p{
    color: white;
}
.co h2{
    color:white;
    text-transform: uppercase;
    font-weight: 600;
    align-self: center;
}
#btn{
    border: 0;
    margin: 20px auto;
    display: block;
    text-align: center;
    border: 3px solid white;
    padding: 10px 15px;
    font-size: 17px;
    cursor: pointer;
}

.co{
 background: linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1));
height: 100%;
padding: 10%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

body{
     margin: 0%;
     padding: 0%;
     height: 100%;
     width: 100%;
}
.bg{
    background-image: url('168.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: center/cover;
    height: 100%;
}
#navbar{
    display: flex;
    align-items: center;
    position:sticky;
    top: 0;
}

#logo{
    margin: 24px 45px;
    }
    #logo img{
        padding-top: 0rem;
        height: 68px;
        margin-top: 0%;
       
    }
    #navbar ul{
        display: flex;
     }
    #navbar::before{
        content: "";
        background-color: black;
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: -1;
        opacity: 0.6;
     }
     #navbar ul li{
         list-style: none;
         font-size: 1.2rem;
     }
     #navbar ul li a{
       color: aliceblue;
       display:block;
       padding: 3px 22px;
       border-radius: 20px;font-family: 'Roboto', sans-serif;
     
     }
     #navbar ul li a:hover{
         color:black;
         background-color: aliceblue;
       }
.container-1{

}