body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
/*=================Header Style==============================*/
/*Naviagtion block styles*/
.nav{
    background-color: #6d8f83; padding: 1rem 0rem 0rem 0rem; margin-top:0; top:0; width:100%; height: 7rem;
}
/*===========================================================*/
/*Navigation links*/
a.nav:link{
    padding: 0rem 1rem; text-decoration:none; color:black
}
a.nav:visited{
    padding: 0rem 1rem; text-decoration:none; color:black
}
a.nav:hover{
    padding: 0rem 1rem; text-decoration:none; color:black
}
a.nav:active{
    padding: 0rem 1rem; text-decoration:none; color:black
}

/*======Footer Style=========================================*/
.footer{
    background-color: #6d8f83; 
    height: 3.5rem; 
    padding: 1.5rem 0rem 0rem 0rem;
    margin-top:auto; top:0; width:100%;
    text-align: center;
    align-self: center;
}
a.footer:link{
    padding: 0rem 1rem; text-decoration:none; color:black
}
a.footer:visited{
    padding: 0rem 1rem; text-decoration:none; color:black
}
a.footer:hover{
    padding: 0rem 1rem; text-decoration:none; color:black
}
a.footer:active{
    padding: 0rem 1rem; text-decoration:none; color:black
}
/*===========================================================*/
/*Links those are in lists*/
a.list-link:link{
  padding: 0rem 0rem 0rem 0rem; text-decoration:none; color: #02a186;
}
a.list-link:visited{
  padding: 0rem 0rem 0rem 0rem; text-decoration:none; color: #02a186;
}
a.list-link:hover{
  padding: 0rem 0rem 0rem 0rem; text-decoration:none; color: #02a186;
}
a.list-link:active{
  padding: 0rem 0rem 0rem 0rem; text-decoration:none; color: #02a186;
}
/*===========================================================*/
/*styling for columns*/

.row{
    display:flex;background-color: #000000; flex-direction: row;
}
@media (max-width: 80rem){
    .row{
	flex-direction: column;
    }
}
.left-column{
    flex:30%; padding:1rem; height:auto;
}
.right-column{
    flex:70%; padding:1rem 6rem 0rem 6rem; height:auto;
}

.skill-row{
    display:flex;background-color: #000000; flex-direction: row;
}
@media (max-width: 80rem){
    .sill-row{
	flex-direction: column;
    }
}
.skill-left-col{
    flex:30%; padding:0rem 0rem 0rem 0rem; height:auto;
}
.skill-mid-col{
    flex:30%; padding:0rem 0rem 0rem 0rem; height:auto;
}
.skill-right-col{
    flex:30%; padding:0rem 0rem 0rem 0rem; height:auto;
}
/*===========================================================*/
/*styling for headers and paragraphs*/

h1.header{
    font-family: 'Georgia', serif; font-weight: normal; font-size: 2.0rem; padding: 0rem 0rem  0rem 0rem;
}
h2.profile{
    color: #ececec; font-weight: normal; font-size: 1.5rem;
}
h3.profile{
    color: #cccccc; font-weight: normal; font-size: 1.2rem;

}
h2.blog-about{
    color: #ececec; font-weight: normal; font-size: 1.5rem;
}
h3.blog-about{
    color: #cccccc; font-weight: normal; font-size: 1.5rem;

}
p{
    color: #acacac; text-align: justify; font-size: 1.2rem; font-family: "Times New Roman",serif;
}
img.profile{
    padding: 1rem 1rem 1rem 1rem; border-radius: 50%
}
/*===========================================================*/
/*styling for lists*/
ul{
    color:white; padding: 1rem 0rem 1rem 3rem;font-size: 1rem; text-align: left;
}
dl{
    color: white; padding: 0rem 0rem 0rem 0rem
}
dd{
    color:#acacac; padding: 0rem 0rem 0rem 0rem; font-size: 1rem; text-align: justify; 
}
dt{
    color: #acacac; padding: 0rem 0rem 0rem 0rem; font-size: 1rem;
}

div.scroll {
  background-color: "black";
  width: 45rem;
  height: 35rem;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: left;
  padding: 1rem;
}
div.left_scroll {
  background-color: "black";
  width: 100%;
  height: 35rem;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: left;
  padding: 1rem;
}

/*For smartphones*/
@media screen and (max-width: 60rem){
div.scroll {
  background-color: "black";
  width: 20rem;
  height: 40rem;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: left;
  padding: 1rem;
}
}