body{
    margin:1%;
    padding:1%;
    background: linear-gradient(rgba(68, 255, 0, 0.24),whitesmoke,white,rgba(255, 166, 0, 0.61));
}
.navbar{
    border:3px dashed rgb(0, 0, 0);
    font-size: x-large;
    font-weight: 600;
    background: url("resumebck.jpg");
    color:yellow;
}
#fontcol{
    color:yellow;
}
.nav li{
    color:rgb(255, 0, 0);
}
.hdg{
    font-size: xxx-large;
    color:blue;
    font-family:'Courier New', Courier, monospace;
    font-weight: 900;
    
} /*it is main heading*/
#h3gen{
    font-size: xx-large;
    font-weight: 800;
}/*it is for generating heading page*/
#about{
    border:3px solid black;
    margin: 3%;
    box-shadow: 0px 0px 25px 10px blanchedalmond inset,0px 0px 15px 2px gold;
    border-radius: 5%;
}
.rg{
    border:2px solid black;
    border-radius: 2%;
    box-shadow: 0px 0px 2px 1px black;
    padding: 2%;
    margin:2%;
}
.text{  
    font-size: large;
    color:navy;
} /* class used in about id of paragraph tag*/
#tmp{
    width: 100%;
    height: 75%;
    border:2px solid navy;
    box-shadow: 0px 0px 6px 2px aqua;
    border-radius: 10px;
    justify-content:space-between;
    margin: 5% 5% 15% 5%;
} /* used in adjusting templete images*/
#tmp:hover{
    box-shadow: 0px 0px 9px 3px black;
}
.btn{
    height: 50px;
    width:200px;
    margin: 5%;
    font-size: large;
    font-weight: bold;
    
    box-shadow: 0px 4px 5px 2px green;
    
} /* used for only one button availabe in this page that is create your resume*/
.btn:hover{
    color:yellow;
    background-color: red;
    box-shadow: 0px 3px 5px 2px rgb(255, 111, 0);
}
div h3{
    
    text-align: center;
} /* this tag used to center a heading for templetes */
#ull{
font-size: large;
font-weight: 150;
padding: 3%;
} /*it is for list elements in steps*/
h2{
    background-color: aliceblue;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
#temres{
    border:2px solid black;
    border-radius: 2%;
    margin:2%;
    padding:2%;
    box-shadow: 0px 0px 5px 2px blue inset,  0px 0px 1px 1px black;
}
#tempid{
    font-size: large;
    font-display:inherit;
    font-weight: 200;
} /* it is for choosing a templete image*/
#tempide{
    font-size: large;
    font-weight: 750;
    text-align: center;
    color:blue;
} /* it is for center a paragraph and browser the templetes*/
.glyphicon-ok{
    color:rgba(13, 147, 250, 0.865);
}

.arrdwn{
    text-align: center;
    font-size: xx-large;
    font-weight: 100;
    font-size-adjust: inherit;
    color:blue;
} /*it is for arrow down for choosing templetes*/
.glyphicon-arrow-down:hover{
    font-size: xxx-large;
    animation: dowwn 1s linear infinite;
}
@keyframes dowwn {
    0%{
        transform: scale(1);
    }
    25%{
        transform: scale(0.5);
    }
    50%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(1.5);
    }  
}
.stps{
    font-size: large;
    color:rgb(10, 10, 10)
} /* it is for steps for creating a resume*/
b{
    color:red;
}
#hedimgrt{
    width:100%;
    height:75%;
    border:2px solid black;
    box-shadow: 10px 0px 10px 2px black;
    border-radius:20px;
    margin: 2%;
    padding: 1%;
} /*it is for 1st images in the starting page */
#ftr {
    font-size: xx-large;
    color:black;
    border-radius: 20px;
    box-shadow: 0px 0px 20px 0px rgb(74, 69, 69);  
} /*it is for footer paragraph*/
.hgg{
    text-align: center;
    font-size: xxx-large;
    font-weight: 800;
    color:rgb(95, 34, 34);
  font-family: arial;
  font-weight: bold;
  line-height: 51.5px;
  padding: 0px 0px;
}
.navbar-brand{
    color: orange;
  float: left;
  font-family: arial;
  font-weight: bold;
  line-height: 51.5px;
  padding: 0px 0px;
}
nav ul li a{
    display: block;
      text-decoration: none;
      color: silver;
      padding: 0px;
      font-family: arial;
      font-size: 20px;
      line-height: 51.5px
    }
    nav ul li::after{
        content: ' ';
        height: 5px;
        width: 0;
        background: #20f907;
        position: absolute;
        left: 0;
        bottom: 0;
        transition: 0.5s;
      }
       nav ul li:hover:after{
        width: 100%;
      }
      nav ul li ul li::after{
        content: ' ';
        height: 3px;
        width: 0;
        background: orange;
        position: absolute;
        left: 0;
        bottom: 0;
        transition: 0.5s;
      }
      nav ul li ul li:hover:after{
       width: 100%;
      }