blog.css

*{
    margin:0;
    padding:0;
}

:root{
  --bg-color: #0A66C2;
  --margin:14px 25px;
  --padding:14px 25px;
  --shadow:0px 2px 5px 1px lightgray;
  --radius:0px 0px 8px 8px;
  --radius1:8px;
  --bgWhite:white;
}
body{
    background-color: rgba(218, 214, 214, 0.47);
    font-family:'Lato','sans-serif';
}

.navbar{
    background-color: #0A66C2;
    position: sticky;
    top:0px;
}
.container-navbar{
    min-width: 80%;
    margin: 0 10%;
    display: flex; 
}
.container-navbar > div{
    width: 50%;
}
.container-navbar p{
    display: block;
    margin:14px 25px;
    font-size: 25px;
}
.text-white a{
    display: inline;
    text-decoration: none;
    color: white;
}

.blog a{
    text-decoration: none;
    font-size: 20px;
    display: inline-block;
    margin: 10px 10px 15px 0px;
    padding: 6px 15px;
    border-radius: 5px;
    color: white;
    border: 1px solid var(--bgWhite); 
    
}
.list-nav{
    text-align: right;
}
.list-nav li{
    display: inline-block;
    margin:14px 25px ; 
}
.navLink  a{
    display: block;
    text-decoration: none;
    color:white;
    font-size: 19px;
    font-weight: 500;
}

.active-link a{
    font-weight: 600;
}
@media(max-width: 780px) {
    .container-navbar{
         display: block; 
         /* border: 1px solid blue; */
        }
        
    .container-navbar p{
        /* display: block; */
        margin:0px 0px;
        padding:7px 25px ;
        font-size: 25px;
    }
    .list-nav{
             display: inline-block;
        text-align: left;
    }
    .list-nav li{
        display: inline-block;
        margin:10px 25px; 
    }
    .container-navbar > .brand{
        width: 100%;
    }
    .container-navbar > div{
        width: 100%;
    }
  }

  @media(max-width: 400px) {
    .list-nav li{
        margin:14px 15px ; 
    }
  }

.header{
    max-width:80%;
    background-color: var(--bgWhite);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    margin: 0 10%;
    padding: var(--padding);
}

.blog{
    max-width: 80%;
    background-color: var(--bgWhite);
    box-shadow: var(--shadow);
    border-radius: var(--radius1);
    margin: 3% 10%;
    padding: var(--padding);
}
.blog h2{
    margin: 16px  0px;
 }
 .blog p{
    margin-top: 10px;
     font-size: 17px;
     padding-bottom: 5px;
     
 }


.btn:hover{
    background-color: white;
    color: #0A66C2;
    }
    .project a , .blog a{
    /* color: red; */
    background-color: var(--bg-color);
    }
    
    .project a:hover{
    background-color: white;
    color: var(--bg-color) !important;
    border-color: #0A66C2 !important;
    }
    .blog a:hover{
    background-color: white;
    color: var(--bg-color) !important;
    border-color: #0A66C2 !important;
    }
    
    /*project.html csss */
    
    .viewSource{
    background-color: white!important;
    color: var(--bg-color) !important;
    border-color: #0A66C2 !important;
    }
    
    .project .viewSource:hover{
    background-color: var(--bg-color)!important;
    color:white!important;   
    }

.footer h2{
    margin: 16px 0px;
    color: var(--bgWhite);
    padding: 16px 0px;
    
}
.footer-container a{
    font-size: 16px;
    display: inline-block;
    margin: 0px 10px 15px 0px;
    padding: 6px 9px;
    border-radius: 5px;
    color: white;
    border: 1px solid var(--bgWhite); 
}
.footer .container h2{
    margin-left: 19px;
}
.icon{
margin-left: 19px;
}

.footer-container .container{
width:80%;
margin: 0% 10%;
}
.footer-copywrite .copywrite{
width: 80%;
margin: 0 10%;
}
.copywrite{
padding: 15px 16px;
color: white;
/* padding-left: 16px; */
}
.copywrite a{
display: inline;
text-decoration: none;
color: white;

}

.list-group li{
list-style-type: none;
/* font:'Roboto', sans-serif; */
}
.footer{
background-color: var(--bg-color);
}