body{
    background-color: rgb(136, 171, 142) !important;
    background-color: rgb(175, 200, 173) !important ;

    background-color: rgb(240, 241, 248) !important ;

    

}

header{
    background-color: rgb(238, 231, 218);

     background-color: rgb(32, 32, 32) !important ;
     background-image: url("../img/mountain.jpg") ;
     background-repeat: no-repeat;
     background-size: cover;

     width: 95%;
     height: 400px;
}


h1{
    font-size:160px !important;
}


.frontEnd {
    color: rgb(164, 196, 224) !important;
}

/*intro*/

.introBtn{
    background-color: rgba(95, 106, 165, 0.507) !important;
}

#intro{
    text-align: left;
   

    background-color: rgba(43, 10, 133, 0.192);
    position: absolute;
   
    right: 15%;
    width: 300px;
    color: white;
}




/*main*/

.tagList{
    background-color: rebeccapurple;
    

}
.technologyDiv {
    margin-top: -7px !important;
    width: 200px;
    text-align: start;
  
}




.listDiv{
    background-color: rgba(49, 95, 179, 0) !important;

}

.skills h3{
    color:rgb(37, 84, 145);
    text-align: center;

}

.skills{

    text-align: left;
    
}

.skills small{
    color: rgba(70, 111, 185, 0.74) !important;
    font-size: 13px !important;
    position: absolute;
    right: 0%;
}

.skills i {
    position: absolute;
    right: 0%;
    top: 0;
}


ul li{
   position: relative;
    margin: 5px;
    list-style-type: circle;
    background-color: rgba(72, 104, 131, 0.062);
    border-radius: 4px; 
    color:rgb(56, 113, 187);
    width: 170px;
}

.specialLi{
    height: 50px;
    
}

.specialLi small{
top: 0;
}

.container{
    border: 1px solid rgba(71, 109, 236, 0) !important;
}


.mainContainer{
    background-color: rgb(238, 231, 218) !important;

    background-color: rgb(255, 255, 255) !important;



}

fogContainer{
        background-image: url("../img/smoke.png") ;
    z-index: 10 !important;
    position: absolute;
    width: 100%;
    height: 100%;
}

.codingInfo{
    text-align: justify;
    text-justify: inter-word;
    background-color: rgb(184, 165, 62);
}

h2{
  /* background-color: rgba(240, 248, 255, 0.199);*/
   text-decoration: underline 4px solid rgba(132, 150, 132, 0.123);
    font-size: 50px !important;
    color: rgb(41, 84, 148) !important;

}


.row{
    background-color: rgba(53, 54, 53, 0.377) !important;

   background-color: rgba(72, 103, 131, 0.123) !important;
   width: 80%;



    

}
.col {
    display: flex;
    justify-content: center;
}

.card{
    max-width: 250px;

    max-width: 300px;
    max-height: 500px;

    position: relative;

    background-color: rgb(255, 255, 255) !important;


 

    

}

.card img{
    height: 160px;
    min-height: 160px;
    

    max-height: 280px;
    max-width: 80%;

    margin-top: 15px;

    position: relative;
    left: 50%;
    transform: translateX(-50%);

    
    
/*
    border-radius: 10em 10em 0 0 ;
    border-radius: 50%;
    min-height: 220px;*/

    border-radius: 6px !important;
    border: 2px solid rgba(138, 138, 136, 0.048);

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    
}



.card-footer{

    
    
    background-color: rgb(252, 252, 252) !important;
    
}

.card-footer a{
    color: rgb(101, 102, 105);
}
.card-footer a:visited{
    color: rgb(113, 117, 131);
}

.card-title{

    border-radius: 4px;
    text-align: center;
    padding: 8px;
    box-shadow:  1px 1px 10px 0px rgba(8, 52, 119, 0.068);
    position: relative;
    text-decoration: underline 2px solid rgba(137, 153, 122, 0.171);
}

.bi:not(:first-child){
position: absolute;
right: 0px;
top: 0px;
    
}

.rowName{
    color: rgba(23, 43, 95, 0.644);
    font-weight: 600;
}





@media only screen and (max-width: 766px) {
     .col{
      display: flex !important;
      justify-content: center !important;
      
    }

    .codingInfo{


    }


  }