html,
body {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;

}

body {
    font-weight: 400;
    color: #000;
    position: relative;
    overflow-x: hidden;
}

/* Hero Cover */
/* #home-area.bg-1{ */
    /* background-image: url(../img/bg/bg-book.jpg);
    background-repeat: no-repeat; */

/* } */
h1.boldtext{
    font-weight: bold; font-family: 'Cambria';
    color: black !important;
}
h1.boldtext span{
    font-weight: 200; font-family: 'Cambria'; font-size: smaller;
    color: black !important;
}

h5.boldtext{
    font-weight: 300; font-family: 'Cambria';
    color: white !important;
}

/* Navbar */

#header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 99;
    padding: 15px 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

#header.sticky {
    position: fixed;
    width: 100%;
    z-index: 9999;
    background: -webkit-gradient( linear, left top, right top, from(#20007e), to(#e61eb6));
    background: linear-gradient( 90deg, #20007e 0%, #e61eb6 100%);
    padding: 20px 0;
    -webkit-box-shadow: 0 0 10px #111;
    box-shadow: 0 0 10px #111;
    color: white !important;
}

#header.two.sticky {
    background: linear-gradient( 30deg, rgb(157, 91, 254) 0%, rgb(56, 144, 254) 100%);
}

#header.sticky .navbar {
    background-color: transparent;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.navbar-brand{
    color: white !important;
    font-family: 'Cambria'; font-weight: bold;
    font-size: 32px;
}
.nav-link{
    color: white !important;
    font-weight: bold;
    font-size: 16px;
}

 .sidebar{
    background-color: black;
}

.merah{
    background-color: red; height: 100px;
}

.biru{
    background-color: blue; height: 100px;
}

/* caption */
.caption.two {
    padding: 238px 0 170px;
}

/* section-area */

#about-area {
    position: relative;
    padding: 70px 0 126px;
    background-repeat: no-repeat;
    background-size: 100% 100%
}


/* Registrasi */
/* .bg-2{
    background-image: url(../img/bg/perpustakaan.jpg);
    background-size: cover; margin-top: -65px; */
    
    /* background-repeat: no-repeat; */
/* } */


/* DESKTOP VERSION */
@media (min-width: 992px) {
    .nav-link, .navbar-brand {
        text-shadow: 1px 1px 1px rgba(0, 0, 0, .7);
    }
    
    .nav-link {
        text-transform: uppercase;
        margin-right: 30px;
    }

    .nav-link:hover::after{
    content: ''; display: block; 
    border-bottom: 3px dotted white ;
    width: 50%; margin: auto; padding-bottom: 3px; margin-bottom: -6px;
    }

    #home-area.bg-1{
        background-size: 100% 100%;
        padding-top: 40px;
    }

}