body{
margin: 0;
padding: 0;
background: #fcfcfc;
font-size: 13px;
}
#page-content-id{
margin-left: auto;
margin-right: auto;
background-color: #fcfcfc;
padding-left: 20px;
padding-right: 20px;
/*border: 1px solid #e8e8e8;*/
}
@media only screen and (min-width: 350px) and (max-width: 500px){
#page-content-id{
width: 350px;
}
}
@media only screen and (min-width: 500px) and (max-width: 700px){
#page-content-id{
width: 480px;
}
}
@media only screen and (min-width: 700px) and (max-width: 1000px){
#page-content-id{
width: 600px;
}
}
@media only screen and (min-width: 1000px) {
#page-content-id{
width: 700px;
}
}
ul#nav-list-id li{
display:inline;
}
/*    #page-header-id{
background-color: yellow;
position: fixed;
z-index: 999;
}*/
#about-content-id{
}
.profile-img-class{
width: 100px;
}
.about-desc{
text-align: justify;
}
#portfolio-content-id{
}
.img-portfolio{
height: 85px; 
width: auto;
}
a:hover{
background-color: #000F;
}
a[data-fancybox=gallery]:hover{
background-color: #FFF;
}
.content-desc-class{
margin-top: 10px;
text-align: justify;
}
#portfolio-content-id{
}
.portfolio-element-class{
margin-top: 45px;
}
.stack-list-class{
}
div.stack-list-class ul li{
font-size: 12px;
}
#contact-content-id{
}
#contact-qr-id{
width: 120px;
height: 120px;
}
#footer-content-id{
margin-top: 120px;
margin-bottom: 40px;
}
.logo{
  font-size: 16px;
}
::-moz-selection { /* Code for Firefox */
 color: white;
 background: #4c0bce;
}

::selection {
 color: white;
 background: #4c0bce;
}
.terminal-card{
  margin-bottom: 15px;
}

 #box1 {
   max-width: 450px;
   transform: skew(20deg);
   background-color: #4c0bce;
   padding-left: 20px;
   padding-top: 3px;
   padding-bottom: 3px;
   border-left: 25px solid #2a0574;
 }

 #box1 h2 {
   display: block;
   color: #fff;
   padding-top: 3px;
   padding-bottom: 3px;
   transform: skew(-20deg);
   margin-bottom: 0;
 }
 #box2 {
   max-width: 450px;
   transform: skew(20deg);
   background-color: #eb1fcb;;
   padding-left: 20px;
   padding-top: 3px;
   padding-bottom: 3px;
   /*margin: auto;*/
   margin-left: 10%;
   border-left: 25px solid #ab1593;
 }

 #box2 h2 {
   display: block;
   color: #fff;
   padding-top: 3px;
   padding-bottom: 3px;
/*   padding-right: 7px; */
   transform: skew(-20deg);
   /*text-align: center;*/
   margin-bottom: 0;
 }
 #box3 {
   max-width: 450px;
   transform: skew(20deg);
   background-color: #3fce0b;
   padding-left: 20px;
   padding-top: 3px;
   padding-bottom: 3px;
   margin-left: 20%;
   /*margin-left: auto;*/
   /*margin-right: 0;*/
   /*margin-bottom: 50px;*/
   border-left: 25px solid #2e9a07;
 }

 #box3 h2 {
   display: block;
   color: #fff;
   padding-top: 3px;
   padding-bottom: 3px;
/*   padding-right: 40px;*/
   transform: skew(-20deg);
   /*text-align: right;*/
   margin-bottom: 0;
 }
 #box4 {
   max-width: 450px;
   transform: skew(20deg);
   background-color: #08c4cd;
   padding-left: 20px;
   padding-top: 3px;
   padding-bottom: 3px;
   /*margin-left: auto;
   margin-right: 0;*/
   margin-left: 30%;
   margin-bottom: 50px;
   border-left: 25px solid #04a1a9;
 }

 #box4 h2 {
   display: block;
   color: #fff;
   padding-top: 3px;
   padding-bottom: 3px;
/*   padding-right: 40px;*/
   transform: skew(-20deg);
   /*text-align: right;*/
   margin-bottom: 0;
 }
 #box5 {
   max-width: 450px;
   transform: skew(20deg);
   background-color: #08c4cd;
   padding-left: 20px;
   padding-top: 3px;
   padding-bottom: 3px;
   /*margin-left: auto;
   margin-right: 0;*/
   margin-left: 40%;
   margin-bottom: 50px;
   border-left: 25px solid #04a1a9;
 }

 #box5 h2 {
   display: block;
   color: #fff;
   padding-top: 3px;
   padding-bottom: 3px;
/*   padding-right: 40px;*/
   transform: skew(-20deg);
   /*text-align: right;*/
   margin-bottom: 0;
 }