body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #198754 !important; }
.bg-hero {
    background-image: linear-gradient(90deg, rgba(211,233,190,1) 35%, rgba(57,114,172,0) 100%), url(https://static.igem.wiki/teams/4392/wiki/background-banner.png);
    background-attachment: fixed;
    background-repeat: no-repeat, no-repeat;
    background-size: cover;
    background-position: center;
    max-height: 100vh;
}

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-right-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de; border-right-color:#5bc0de; }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }


/*added by Pooja: grid container for side nav and content */
.content-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    padding: 20px 60px;
    height: 100%;
    grid-template-areas: 
        'side-nav-container'
        'text-container';
}

.content {
        display: grid;
        align-items: justify;
        justify-content: center;
        text-align: justify;
        padding-right: 50px;
      }

h2{
      color: #198754;
      font-weight: bold;
      margin-top:10%;
      }

h3{
        color: #CB8525;
        font-weight: bold;
        margin-top:10%;
      }

h4{
      color: #198754;
      font-weight: bold;
      margin-top:3%;
      }

p{
        text-align: justify;
        text-justify: inter-word;
        font-size: 20px;
      }

.rp{
        text-align: justify;
        text-justify: inter-word;
        font-size: 12px;
      }

.center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
    }

.greenbt{
        font-weight: bold;
        color: #198754;
}

/*-------------------------------------------- NEXT PREVIOUS BUTTON style -----------------------------------------------*/

    .npBtn a{
        text-decoration: none;
        color: white;
        background: #198754;
        padding: 7px 10px;
        border-radius: 4px;  
        font-size: 19px;
    }
    .npBtn a:hover{
        background: rgb(68 179 97 / 85%);
    }

    .npBtn a:focus{
        outline: 3px solid rgb(68 179 97 / 50%);
    }
    .npBtn {
        display: flex;
        justify-content: space-evenly;
        margin-top: 20px;
    }
/*----------------------------------------- end NEXT PREVIOUS BUTTON style -----------------------------------------------*/	

/*---------------------------------------------------BACK TO TOP BUTTON style --------------------------------------------*/
    #myBtn {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 30px;
        z-index: 99;
        cursor: pointer;
        padding: 12px;
        max-width: 5%;
    }

    #myBtn:hover {
        transform: scale(1.1);
    }
/*---------------------------------------------- end BACK TO TOP BUTTON style --------------------------------------------*/

   /* CONTENT + SIDENAV SECTION */

  
/*------------------- SIDENAV STYLE ---------------------*/
        .sidenav {
            height: auto;
            width: auto;
            padding-top: 80px;
            padding-left: 0px;
            padding-right: 10px;

            margin-top: 25%;
            margin-bottom: 20px;
            position: -webkit-sticky;
            position: sticky;
            top: 9.5% ;
        }

          .sidenav #sidenav-id li{
              background-color: #ffe578;
              list-style-type: none;
          }

          .sidenav a {
            text-align: left;
            color: #045926;
            font-size: 2vmin!important;
            font-style: normal !important;
            font-weight: 600 !important;
            }

          .sidenav a:hover {
            color: #cb8525;
            background-color: #ffd939;
            border-radius: 20px!important;
              }
         .sidenav-active{
            color: #ffffff;
            background-color: #28c79a4b;
            border-radius: 20px!important;
         } 
          @media (max-width: 900px) {
            .sidenav {
                  display: none;
                  }
              }
/*----------------- SIDENAV STYLE -----------------*/