css.css

*{
    margin:0;
    padding:0;
    font-family: sans-serif;
}
.hero{
    width:100%;
    height:100vh;
    background-image: url(images/1.jpg);
    background-size: cover;
    background-position: center;
    position:relative;
    overflow: hidden;
}
.logo{
    width:70px;
}
.logo_name{
    display: flex;
    flex-direction: row;
    /* justify-content: center; */
    align-items: center;
    color:white;
}
.brand_name{
    margin-left: 10px;
    font-size: 40px;
}
.code{
    color: red;
    size:30px;
}
.nav-bar{
    width:85%;
    align-items: center;
    height:15%;
    margin:auto;
    display: flex;
    justify-content: space-between;
}
button{
    color:#fbfcfd;
    background:none;
    padding:10px 20px;
    background: none;
    border: 1px solid white;
    border-radius: 30px;

}
.btn1{
    cursor:pointer;
}
.btn1:hover{
    background:white;
    color:black;
    transition: 0.5s;
}
.content {
    z-index: 2;
    color: white;
    position:absolute;
    top:175px;
    left:100px;
}
h1{
    font-size: 80px;
    margin:0px 0px 30px 0px;
}
.bubbles img{
     width:50px;
     animation: bubble 4s linear infinite;
}

.bubbles{
    margin-left:850px;
    width:30%;
    display: flex;
    align-items: right;
    justify-content: space-between;
    position: absolute;
    bottom:0;
}
@keyframes bubble{
    0%{
        transform:translateY(0);
        opacity:0;
    }
    50%{
        opacity:1;
    }
    70%{
        opacity:1;
        }
    100%{
        transform: translateY(-80vh);
        /* opacity:0; */
    }
}
.bubbles img:nth-child(1){
    animation-delay: 1.5sec;
}
.bubbles img:nth-child(2){
    animation-delay: 3.5sec;
}
.bubbles img:nth-child(3){
    animation-delay: 2.5sec;
}