body {
    position: relative;
}

.active{
    font-weight: bold;
    /* font-style: italic; */
}
/* Put the transition into the original element */
.bg-light {
  background: transparent !important;
  transition: 1.5s ease;
}
/* Put the newly added styles in the newly defined class that gets toggled upon scroll of the page */
.bg-light.scrolled {
  background-color: #DD2E44 !important;
  /* background-color: #DD2E44 !important; */
  opacity: 0.9;
}

#nLogo {
  transition: 1.5s ease;
}

#nLogo.scrolled {
  transform: translatex(5px) scale(1.2);
}

.nav-link {
  transition: 1.5s ease;
}

.nav-link.scrolled {
  transform: translatex(5px) scale(1.1);
}

.navbar-collapse {
  transition: 1.5s ease;
}

.navbar-collapse.scrolled {
  transform: translatex(20px);
}

.jumbotron {
    text-align: center;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a0d8ef+0,ddf1f9+75,feffff+100 */
    background: rgb(160,216,239); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(160,216,239,1) 0%, rgba(221,241,249,1) 75%, rgba(254,255,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(160,216,239,1) 0%,rgba(221,241,249,1) 75%,rgba(254,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(160,216,239,1) 0%,rgba(221,241,249,1) 75%,rgba(254,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0d8ef', endColorstr='#feffff',GradientType=0 ); /* IE6-9 */
    /* background-color: #FFFFFF; */
}

#about {
    text-align: center;
}

#projectsTitle {
  text-align: center;
}

#projectsPara {
  text-align: center;
}

#email {
    width: 300px;
}

#footer {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#feffff+0,ddf1f9+25,a0d8ef+100 */
  background: rgb(254,255,255); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(254,255,255,1) 0%, rgba(221,241,249,1) 25%, rgba(160,216,239,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(254,255,255,1) 0%,rgba(221,241,249,1) 25%,rgba(160,216,239,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(254,255,255,1) 0%,rgba(221,241,249,1) 25%,rgba(160,216,239,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#a0d8ef',GradientType=0 ); /* IE6-9 */
    /* background-color: #6cb5de; */
    height: 400px;
    text-align: center;
}

#flogo, #jblogo, #nLogo {
  border-radius: 20%;
}

.cDark {
  color: black;
  background-color: white;
  opacity: 0.7;
  border-radius: 5px;
}

/* Button hover effect */
    .btn2{
        cursor:pointer;
        position:relative;
        padding:10px 20px;
        width: 200px;
        height: 50px;
        /* background:rgba(160,216,239,1); */
        background: #DD2E44;
        font-size:16px;
        border-top-right-radius:10px;
        border-bottom-left-radius:10px;
        transition:all 2s;
    }

    .btn2:before, .btn2:after{
        content:" ";
        width:10px;
        height:10px;
        position:absolute;
        border :0px solid #fff;
        transition:all 1s;
    }
    .btn2:before{
        top:-1px;
        left:-1px;
        border-top: 5px solid white;
        border-left: 5px solid white;
    }

    .btn2:after{
        bottom:-1px;
        right:-1px;
        border-right: 5px solid white;
        border-bottom: 5px solid white;
    }


    .btn2:hover{
        background-color: white;
        color: blue;
        border-bottom-left-radius: 0px;
        border-top-right-radius: 0px;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .btn2:hover:before{
        width: 104%;
        height: 110%;
        border-top-left-radius: 10px;
        border-color: black;
    }

    .btn2:hover:after{
        width: 104%;
        height: 110%;
        border-bottom-right-radius: 10px;
        border-color: #DD2E44;
    }
/* Button Hover Effect CSS end */
