body {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standar */
}
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}

body, html, * {
    cursor: url(https://ani.cursors-4u.net/nature/nat-11/nat1045.cur), default;
}


/* Aturan CSS untuk menyesuaikan tampilan marquee */
marquee a {
    opacity: 0;
    color: transparent; /* Membuat teks menjadi tidak terlihat */
    text-decoration: underline; /* Memberi garis bawah pada hyperlink */
    cursor: wait;
}
marquee a:hover {
    color: transparent; /* Tetap mempertahankan transparansi saat dihover */
}
marquee i {
    font-style: italic; /* Menerapkan gaya teks italic pada elemen <i> */
}

/* Style untuk container thumbnail */
.thumbnail-container {
    width: 100%;
    overflow-x: auto; /* Mengaktifkan scroll horizontal */
    white-space: nowrap; /* Mencegah wrap ke baris baru */
    position: relative; /* Menambahkan posisi relatif untuk menempatkan tombol */
    padding: 10px; /* Some padding */
    background-color: rgb(0, 0, 0);
}

/* Style untuk thumbnail */
.thumbnail {
    display: inline-block;
    width: 300px; /* Lebar thumbnail yang lebih besar */
    height: auto;
    margin-right: 20px; /* Jarak antara thumbnail */
    cursor: pointer;
    border: 1px solid #ffffff; /* Gray border */
    border-radius: 10px;  /* Rounded border */
    transition:.2s ;
}

.thumbnail-container.touch-scrolling::-webkit-scrollbar {
display: none; /* Menyembunyikan scrollbar di browser berbasis WebKit */
}

img:hover {
transform: scale(1.03); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
box-shadow: 0 0 9px 10px rgba(255, 0, 200, 0.5);
cursor: none;
}


/* Style untuk modal */
.modal {
    display: none; /* Sembunyikan modal secara default */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9); /* Warna latar belakang */
    overflow: auto;
    animation: bounceIn 0.5s ease; /* Animasi bounce in saat modal muncul */
}

/* Style untuk konten modal */
.modal-content {
margin: 10% auto; /* Menyesuaikan margin vertikal untuk menengahkan modal content */
margin-top: 120px; /* Menambahkan jarak dari atas */
display: block;
max-width: 80%; /* Mengatur lebar maksimum konten modal */
max-height: 80%; /* Mengatur tinggi maksimum konten modal */
text-align: center; /* Mengatur gambar di tengah modal */
}


/* Style untuk gambar di dalam modal */
.modal-content img {
    max-width: 100%; /* Mengatur lebar maksimum gambar */
    height: auto;
}

/* Style untuk tombol close di modal */
.close {
    color: #fff;
    position: absolute;
    right: 30px;
    font-size: 35px;
    font-weight: bold;
    transition: 0.3s;
    margin-top: 86px;
}

.close:hover,
.close:focus {
    color: #999;
    text-decoration: none;
    cursor: pointer;
}

/* Animasi bounce in */
@keyframes bounceIn {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }
    60% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}

/* Animasi bounce out */
@keyframes bounceOut {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.1);
        opacity: 0;
    }
}

/* Style the list */
ul.breadcrumb {
padding: 10px 16px;
list-style: none;
background-color: #eee;
}

/* Display list items side by side */
ul.breadcrumb li {
display: inline;
font-size: 18px;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
color: #0275d8;
text-decoration: none;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
color: #01447e;
text-decoration: underline;
}

.sidebar {
    height: 100%;
    width: 250px;
    position: fixed;
    top: 0;
    right: -250px; /* Mengubah posisi sidebar menjadi di sebelah kanan */
    background-color: rgba(0,0,0,0.5); /* Latar belakang transparan */
    transition: 0.3s;
    z-index: 1;
    overflow-y: auto;
    padding-top: 60px;
}
.sidebar.open {
    right: 0; /* Mengubah posisi sidebar menjadi terbuka di sebelah kanan */
}
.sidebar .close-btn {
    position: absolute;
    top: 10px;
    left: 10px; /* Mengubah posisi tombol close menjadi di kiri */
    cursor: pointer;
    color: #fff;
    font-size: 24px;
    z-index: 2;
}
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-image: url('https://i.pinimg.com/originals/7c/83/af/7c83afe4915fc72564941ab32ff1e37d.gif'); /* Latar belakang navbar menggunakan gambar */
    background-size: cover;
    padding: 10px 20px;
    box-sizing: border-box;
    z-index: 3;
}
.navbar .menu-btn {
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    float: right;
}
.navbar .menu-btn:hover {
    opacity: 0.7;
}
.menu {
    display: none;
    position: absolute;
    top: 50px;
    right: 20px;
    background-color: rgba(0,0,0,0.5);
    padding: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    border-radius: 5px;
    z-index: 4;
}
.menu.open {
    display: block;
}
.menu-item {
    padding: 5px 0;
    cursor: pointer;
    color: #fff;
}
.menu-item:hover {
    background-color: rgba(255,255,255,0.1);
}
/* Menambahkan jarak antara gambar dan navbar */
.navbar img {
    margin-top: 10px;
    position: absolute;
    left: 20px;
}

.animated-background {
    font-family: 'Arial', sans-serif;
    font-size: 20px;
    color: white;
    text-align: center;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    background: url('https://i.pinimg.com/originals/7c/83/af/7c83afe4915fc72564941ab32ff1e37d.gif') no-repeat center center fixed; /* Ganti dengan URL gambar GIF bergerak */
    background-size: cover;
}

/* Style untuk tombol dengan ID NEXT dan PREV */
#next, #prev {
display: block;
margin: 0 auto; /* Membuat tombol berada di tengah */
font-size: 24px; /* Sesuaikan ukuran font dengan kebutuhan */
font-weight: bold; /* Sesuaikan kebutuhan gaya font */
color: #ffffff; /* Warna teks */
background-color: transparent; /* Warna latar belakang transparan */
border: none; /* Menghapus border tombol */
cursor: pointer; /* Mengubah kursor saat dihover */
}

#next:hover, #prev:hover {
color: #666; /* Warna teks saat dihover */
}

.container {
margin-top: 60px; /* Atur jarak yang diinginkan dari navbar */
overflow-y: auto;
}
/* Style untuk elemen dengan ID info */
#info {
text-align: center; /* Teks berada di tengah kotak */
font-size: 15px; /* Sesuaikan ukuran font dengan kebutuhan */
color: #ffffff; /* Warna teks */
background-color: rgb(255, 0, 200);
border: 3px outset rgb(211, 211, 211); 
padding: 10px;
}