style.css

	
	body{
		height:100%;
		margin:0;
		padding:0;
	}

	a{
		text-decoration:none;
	}
	/*start of header*/
	.navi{
		position:fixed;
		width: 100%;
	}
	.top-head{
		margin-top:-17px;
		height:40px;
		transition: height 0.4s;
		background-color:rgb(60, 143, 41);
	}

	.top-head ul{
		list-style-type: none;
		text-decoration:none;
		margin-right:90px;
		padding-top:15px;
	}

	.top-head li{
		float:right;
		padding:10px;
		padding-top:0px;
		padding-bottom:0px;
		padding-right:20px;
		font-size:80%;
	}

	.top-head ul a li{
		font-family: Helvetica;
		color:white;
		opacity:0.98;
		letter-spacing: 1px;
		transition: color 0.4s;
	}

	.top-head ul a li:hover{
		color: pink;
	}

	.mid-head{
		height:50px;
		margin-top:-20px;
		transition: margin-top 0.5s, height 0.5s;
		background-color:white;
	}


	.mid-head ul{
		list-style: none;
		text-decoration:none;
		display:flex;
		align-items: center;
		padding-top:5px;
	}

	.mid-head ul li{
		float:left;

	}

	.mid-head li{
		margin-right:80px;
	}

	.mid-head ul li a{
		font-family: Helvetica;
		color:black;
		font-weight:500;
		opacity:0.8;
		padding:10px;
		border-radius: 5px;
		transition: background-color 0.3s, color 0.1s, underline 0.3s;
	}

	.mid-head ul li a:hover{
		//color: red;
		background-color: rgb(200,200,200);
		//text-decoration:underline;
	}

	.mid-head ul li a:active{
		color: red;
		background-color: rgb(200,200,200);
	}

	.mid-head a{
		padding:0px;
		transition: padding 0.4s;
	}

	.bot-head{
		height:5px;
		background-color:rgb(60, 143, 41);
	}
	.header-gap-white{
		height:200px;
		margin-bottom:-110px;
	}
	.dropbtn{
		font-family: helvetica;
		font-weight: bold;
		opacity: 0.8;
	}

	.dropbtn:hover{
		cursor: grab;
	}
	.dropdown-content {
   		display: none;
   		position: absolute;
   		top:80px;
   		left:435px;
   		transition: top 0.4s;
   		text-align: center;
   		background-color: white;
    	min-width: 90px;
    	overflow: auto;
   		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   	 	z-index: 1;
	}

	.dropdown-content a {
    	color: black;
    	padding: 12px 16px;
    	text-decoration: none;
    	display: block;
    	transition: color 0.3s;
	}

	.dropdown-content a:hover{
		color:pink;
	}
	.show {display: block;}
	/*end of header*/

	/*start of slideshow*/
	/* Slideshow container */
	.slideshow-container {
	  max-width: 100%;
	  //position: relative;
	  margin: auto;
	  //width:50%;
	  //height:600px;
	  margin-bottom: -30px;
	}

	/* Hide the images by default */
	.mySlides {
	    display: none;
	}

	/* Next & previous buttons */
	.prev, .next {
	  cursor: pointer;
	  position: absolute;
	  top: 50%;
	  width: auto;
	  margin-top: -22px;
	  padding: 16px;
	  color: white;
	  font-weight: bold;
	  font-size: 18px;
	  transition: 0.6s ease;
	  border-radius: 0 3px 3px 0;
	}

	/* Position the "next button" to the right */
	.next {
	  right: 0;
	  border-radius: 3px 0 0 3px;
	}

	.slide-button{
		position:absolute;
		display:block;
		margin-top:-100px;
		margin-left:48%;
	}

	/* On hover, add a black background color with a little bit see-through */
	.prev:hover, .next:hover {
	  background-color: rgba(0,0,0,0.8);
	}

	/* Caption text */
	.text {
	  color: #f2f2f2;
	  font-size: 15px;
	  padding: 8px 12px;
	  position: absolute;
	  bottom: 8px;
	  width: 100%;
	  text-align: center;
	}

	/* Number text (1/3 etc) */
	.numbertext {
	  color: #f2f2f2;
	  font-size: 12px;
	  padding: 8px 12px;
	  position: absolute;
	  top: 0;
	}

	/* The dots/bullets/indicators */
	.dot {
	  cursor: pointer;
	  height: 15px;
	  width: 15px;
	  margin: 0 2px;
	  background-color: #bbb;
	  border-radius: 50%;
	  display: inline-block;
	  transition: background-color 0.6s ease;
	}

	.active, .dot:hover {
	  background-color: #717171;
	}

	/* Fading animation */
	.fade {
	  -webkit-animation-name: fade;
	  -webkit-animation-duration: 1.5s;
	  animation-name: fade;
	  animation-duration: 1.5s;
	}

	@-webkit-keyframes fade {
	  from {opacity: .4} 
	  to {opacity: 1}
	}

	@keyframes fade {
	  from {opacity: .4} 
	  to {opacity: 1}
	}
	/*end of slideshow*/

	/*start of buku baru*/
	.buku-baru-section{
		color:white;
		font-family: 'Yatra One', cursive;
		text-shadow:1px 1px 12px black;
		background-color: rgb(225, 185, 100);
		text-align:center;
		margin-bottom:-20px;
		-webkit-box-shadow: inset 1px 5px 30px rgb(100,100,100);
		
	}
	.buku-home{
		display:inline;
	}
	.buku-home-item{
		display:inline;
	}
	.buku-home-item-teks{
		display:block;
		margin-left:auto;
		margin-right:auto;
	}
	.buku-baru{
		height:450px;
		width:280px;
		margin-left: 50px;
		margin-right: 50px;
		margin-bottom: 50px;
		box-shadow: 1px 5px 10px rgb(30,30,30);
	}
	.gap{
		opacity:0.8;
		margin-top:-30px;
		display: block;
		width:10%;
		border-bottom:3px solid white;
		margin-left:auto;
		margin-right:auto;
	}

	.judul-teks{
		font-size: 220%;
		margin:20px;
		padding-top:20px;
	}
	.judul{
		margin:20px;
	}
	/*end of buku baru*/

	/*start of event*/
	.event-home{
		margin-top:-20px;
		text-align:center;
		font-family: 'Yatra One', cursive;
		font-size:220%;
	}

	.gap2{
		opacity:0.5;
		margin-top:-30px;
		display: block;
		width:4%;
		border-bottom:3px solid black;
		margin-left:auto;
		margin-right:auto;
	}

	.event-content{
		display:block;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:10px;
	}

	.event-button{
		font-family:monospace;
		font-size: 80%;
		background-color:rgb(255, 101, 101);
		margin-left:42%;
		margin-right:42%;
	}

	.event-text{
		margin-top:-20px;
		font-family:'Concert One';
		opacity:0.7;
		font-size:70%;
		text-decoration:underline;
		color:rgb(18, 15, 0);
	}
	/*end of event*/

	/*start of quote*/
	.quote{
		font-family:cursive;
		text-align:center;
		font-size:200%;
		padding-top:7%;
	}
	/*end of quote*/

	/*start of footer*/
	footer{
		background-color:rgb(60, 60, 81);
		height: 50px;
		text-align:center;
		color:white;
		margin-top:-20px;
	}

	.footer-text{
		padding:15px;
		font-family:monospace;
		font-size:130%;
		opacity:0.9;
	}

	.footer-info{
		background-image: url("img11-6.jpg");
		width:99.99%;
		height: 295px;
		color:white;
		font-family:'Poor Story', cursive;
		font-size:130%;
	}

	.footer-alamat{
		padding-top:40px;
		padding-left:400px;
		text-align: left;
		line-height: 1px;
		color:white;
		line-height: 5px;
	}
	.button-item{
		height:32px;
		width:32px;
		transition: height 0.3s ease-in-out, width 0.3s ease-in-out;
	}

	.button-item:hover{
		height:40px;
		width:40px;
	}

	.social-media-buttons{
		margin-left:405px;
		margin-top:20px;
	}

	.footer-jadwal{
		margin-left:0px;
		margin-top:-150px;
		text-align:center;
		line-height: 1px;
		color:white;
		line-height: 5px;
		font-size: 90%;
	}

	#google-map{
		width:310px;
		height:160px;
		background-color:yellow;
		float:right;
		margin-right:200px;
		margin-top:-150px;
	}
	

	}
	/*end of footer*/

	/*start of tentang page*/
	.tentang-header{
		font-family: 'Yatra One', cursive;
		margin-left:80px;
		font-size:220%;
	}

	.tentang-content{
		font-family:'Concert One';
		text-align:justify;
		margin-right:10%;
		margin-left:7%;
	}
	/*end of tentang page*/

	/*start of login page*/
	/* Full-width input fields */
	input[type=text], input[type=password] {
	    width: 100%;
	    padding: 12px 20px;
	    margin: 8px 0;
	    display: inline-block;
	    border: 1px solid #ccc;
	    box-sizing: border-box;
	}


	/* Set a style for all buttons */
	button {
	    background-color: rgb(60, 143, 41);
	    color: white;
	    //padding: 14px 20px;
	    margin: 8px 0;
	    border: none;
	    cursor: pointer;
	    width: 100%;
	    margin-top:-1px;
	    transition: color 0.4s;
	}

	.login-button{
		display: block;
		width:100px;
		height:30px;
		margin-left:auto;
		margin-right:auto;
		font-family:monospace;
		font-size:120%;
		letter-spacing: 1.5px;
	}

	button:hover {
	    color: pink;
	}

	/* Extra styles for the cancel button */
	.cancelbtn {
	    width: auto;
	    padding: 10px 18px;
	    background-color: #f44336;
	}

	/* Center the image and position the close button */
	.imgcontainer {
	    text-align: center;
	    margin: 24px 0 12px 0;
	    position: relative;
	}

	img.avatar {
	    width: 40%;
	    border-radius: 50%;
	}

	.container {
	    padding: 16px;
	}

	span.psw {
	    float: right;
	    padding-top: 16px;
	}

	/* The Modal (background) */
	.modal {
	    display: none; /* Hidden by default */
	    position: fixed; /* Stay in place */
	    z-index: 1; /* Sit on top */
	    left: 0;
	    top: 0;
	    width: 100%; /* Full width */
	    height: 100%; /* Full height */
	    overflow: auto; /* Enable scroll if needed */
	    background-color: rgb(0,0,0); /* Fallback color */
	    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	    padding-top: 60px;
	}

	/* Modal Content/Box */
	.modal-content {
	    background-color: #fefefe;
	    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
	    border: 1px solid #888;
	    width: 40%; /* Could be more or less, depending on screen size */
	}

	/* The Close Button (x) */
	.close {
	    position: absolute;
	    right: 25px;
	    top: 0;
	    color: #000;
	    font-size: 35px;
	    font-weight: bold;
	}

	.close:hover,
	.close:focus {
	    color: red;
	    cursor: pointer;
	}

	/* Add Zoom Animation */
	.animate {
	    -webkit-animation: animatezoom 0.6s;
	    animation: animatezoom 0.6s
	}

	@-webkit-keyframes animatezoom {
	    from {-webkit-transform: scale(0)} 
	    to {-webkit-transform: scale(1)}
	}
	    
	@keyframes animatezoom {
	    from {transform: scale(0)} 
	    to {transform: scale(1)}
	}

	/* Change styles for span and cancel button on extra small screens */
	@media screen and (max-width: 300px) {
	    span.psw {
	       display: block;
	       float: none;
	    }
	    .cancelbtn {
	       width: 100%;
	    }
	}
	/*end of login page*/

	/*start of daftar page*/
	.daftar-table{
		font-family:monospace;
		font-size: 120%;
		display: block;
		margin-left:43%;
	}

	.daftar-button{
		display: block;
		width:100px;
		height:30px;
		font-family:monospace;
		font-size:100%;
		letter-spacing: 1.5px;
		margin-top:20px;
	}
	/*end of daftar page*/

	/*start of koleksi page*/
	.buku-koleksi-section{
		color:white;
		font-family: 'Yatra One', cursive;
		//text-shadow:1px 1px 12px black;
		background-color: white;
		text-align:center;
		margin-bottom:-20px;
		//-webkit-box-shadow: inset 1px 5px 30px rgb(100,100,100);
		
	}
	.buku-koleksi{
		display:block;
		align-content: center;
	}

	.buku-item{
		text-align:center;
		display:inline-block;
		padding-top:20px;
		background-color: rgb(240,240,240);
		margin:20px;
	}

	.buku-judul{
		margin-top:-25px;
		font-family:monospace;
		font-size:160%;
		color:black;
	}

	.buku-gambar{
		height:300px;
		width:190px;
		margin-left: 50px;
		margin-right: 50px;
		margin-bottom: 50px;
		box-shadow: 1px 5px 20px rgb(30,30,30);
	}

	.buku-popup-gambar{
		width: 40%;
	    //border-radius: 50%;
	}

	.buku-popup-description{
		text-align: center;
		font-family:monospace;
	}

	.buku-popup-baca {
	    width: auto;
	    padding: 10px 18px;
	    background-color: rgb(60, 143, 41);
	}

	.gap3{
		opacity:0.8;
		margin-top:-30px;
		display: block;
		width:4%;
		border-bottom:3px solid black;
		margin-left:40px;
		margin-bottom:50px;
	}
	.judul-koleksi{
		font-size: 220%;
		margin:20px;
		padding-top:20px;
		color:black;
	}
	.judul{
		margin:20px;
		text-align:left;
	}
	/*end of koleksi page*/