html {
    scroll-behavior: smooth;
  }

body{
    text-align:center;
    overflow:scroll;
    font-family: Roboto;
    
}

#logo{
    color: brown;
}

#spanWhite{
    color: white;
}

#spanDev{
    color: brown;
}

.navbar-nav{
    display:inline-block
}

.navbar-nav li{
    display:inline-block;
    margin-left:20px;
}

.navbar-dark{
    background: black;
}

#section{
    width:100%;
    position: relative;
    background-color: black;
    color: white;
 
    padding-bottom: 970px;
    
}

header h1{
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom:77%;
    transform: translateX(-50%);
}
header h2{
    position: absolute;
    z-index: 3;
    left: 50%;
    top:30%;
    transform: translateX(-50%);
}


#myself{
    position: absolute;
    border-radius: 100px;
    opacity: 0.45;
    right:6%;
    top:100px;
    max-width: 45%;
    min-width: 45%;

}

.lead{
    padding: 10px !important;
  
}

.no-gutters{
    margin-right: 0;
    margin-left: 0;
}

#abtText{
    color: rgb(147, 38, 38);
}

.about-me{
    padding-top: 250px;
    background-color: rgb(241, 241, 241);
    padding-bottom: 300px;
    text-align: center;
    
}

.paddings{
    margin-top: 50px;
}

#myImage{
    width:100%;
    height:100%;
    border-radius: 5px;
    transition: transform 1s;
    opacity: 99%;
}

#myImage:hover{
    transform:scale(1.1);
    font-family: 'Roboto';
    transition: 1s;
    opacity: 100%;
}

.gallery{
    background-color: rgb(243, 243, 243);
   
}

.gallery h2{
    color: black;
}

.galleryContainer{
    display:grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    grid-gap:20px;
    padding:30px;
    overflow: hidden;
    font-family: 'Roboto';
    padding-bottom: 100px;
    

}

.galleryContainer img{
    transition: transform 1s;
    overflow: hidden;
    width:300px;
    height:300px;
    font-family: 'Roboto';
    border-radius: 5px;
}

.galleryContainer img:hover{
    transform:scale(1.1);
    font-family: 'Roboto';
    transition: 1s;
    opacity: 0.7;

}


#lineTwo{
    height:3px;
    background-color: white;
    color: white;
    width:100%;
}

#line{
    height:3px;
    background-color: white;
    color: white;
    width:100%;
}

#lineTwo{
    height:3px;
    background-color: black;
    color: black;
    width:100%;

}

#carousel-div{
    background-color: black;
    
    padding:40px;
}

#skills{
    color: white;
}
.carousel{
    background-color:black;
}

.bootstrap-dashed-borders{
   padding-top: 150px;
    margin-bottom:100px;

}

#border-one{
   

    margin-bottom: 100px;
    text-align: center;
}

#border-one img{
    width:100%;
    height:100%;
    border-radius: 5px;
}

#border-two{
    padding:100px;
    
    margin-bottom: 100px;
    text-align: center;
}

#light{
    position: relative;
    top: 150px;
    margin-bottom: 400px;
}

#lineh1{
    position: absolute;
    left: 0;
    height: 10px;
    background: black;
    animation: lineH 4s 5s infinite linear;
}
#lineh2{
    position: absolute;
    left: 0;
    top: 40px;
    height: 10px;
    background: brown;
    animation: lineH 5s 0.5s infinite linear;
}
#lineh3{
    position: absolute;
    left: 0;
    top: 70px;
    height: 10px;
    background: black;
    animation: lineH 5s 2s infinite linear;
}


@keyframes lineH{
    0%{
        width: 0%;
    }
    100%{
width: 95%;opacity: 0;
}
}

#education{
    background-color: rgb(241, 241, 241)
}


#contactFormOne{
    margin-top: 100px;
   
}



#tellUsHeading{
    margin-top: 100px;
}

#name{
    margin-bottom: 50px;
    
}

#emaill{
    margin-bottom: 50px;

}

#submit{
    margin-top: 50px;
    background-color: brown;
    color: black;
    margin-bottom: 100px;
}


footer{
    
    margin-top:100px;
    background-color: black;
    color: white;
    padding:100px;
    
}




footer div img{
    transition: transform 1.3s;
    font-family: 'Roboto';
    width:50px;
    height:50px;
    display: inline-block;
}

footer div img:hover{
    transform:scale(1.5);
    font-family: 'Roboto';
    
}

#lis li{
    display: inline-block;
}

#mail{
    margin-right:50px;

    margin-bottom: 100px;
    height:48px;
    width:48px;
}

#phone{
    margin-right:50px;

    margin-bottom: 100px;
    height:70px;
    width:70px;
}

#contact{
    margin-right:50px;

    margin-bottom: 100px;
}

#portfolio{
   
    padding:100px;
    margin-bottom: 50px;
}

#git{
    margin-right:50px;

    margin-bottom: 100px;
}


@media only screen and (max-width: 900px) {
    #section{
        width:100%;
        position: relative;}
    
    #myself{
        overflow: hidden;
        position: absolute;
        border-radius: 100px;
        opacity: 0.5;
        top:50%;
        left:25%;
        max-width: 50%;
        min-width: 50%;
    
    }
    
}


@media only screen and (max-width: 900px) {
    .galleryContainer{
        display:grid;
        grid-template-columns: auto auto;
    }
    
}


@media only screen and (max-width: 500px) {
    .galleryContainer{
        display: block;
    }

    footer h2{
        padding-left: 50px;
        padding-right: 50px;
        color: white;
       
        
    }

    footer span{
        padding-left: 50px;
    }
  
    footer div{
       width:100%;
    }
    
}


@media only screen and (max-width: 700px) {
    #lis li{
        display: block;
    }
  
  
    footer div{
       width:100%;
    }

    footer h2{
        padding-left: 100px;
        padding-right: 50px;

        color: white;
       
        
    }
   
}

@media only screen and (max-width: 500px) {
    
    .navbar-nav{
    display:inline-block
}

    .navbar-nav li{
    display:inline-block;
    margin-left:20px;
}

footer h2{
    padding-left: 50px;
    padding-right: 50px;
    color: white;
   
    
}
}