:root { --bg-color-light: ghostwhite; --text-color-light: #000; --header-bg-light: #FEBF04; } 
body { background-color: var(--bg-color-light); color: var(--text-color-light); transition: background-color 0.3s, color 0.3s; } 
header { position: sticky; top: 0; display: block; margin: none; background-color: #FEBF04; background-color: var(--header-bg-light); padding: 20px; text-decoration: none; font-size: 25px; font-weight: bold; } 
body.dark-mode { --bg-color-light: #17191c; --text-color-light: ghostwhite; --header-bg-light: #FEBF04; } 
#theme-toggle { padding: auto; position: fixed; right: 20px; cursor: pointer; float: right; border-radius: 15px; background: #dba6f5; } 
footer { background-color: #007BFF; color: solid-black; padding: 10px; text-align: center; } 
.footer-content, .footer-links, .social-media, .footer-bottom { margin-bottom: none; } 
.footer-links ul { list-style-type: none; padding: 0; } 
.footer-links li { display: inline; margin-right: 20px; } 
.footer-links a { color: #fff; text-decoration: none; } 
#myBtn { display: none; position: fixed; top: 10px; right: 100px; z-index: 99; font-size: 16px; border: none; outline: none; background-color: red; color: white; cursor: pointer; padding: 15px; border-radius: 20%; } 
#myBtn:hover { background-color: #555; } 
#myTop { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; font-size: 18px; border: none; outline: none; background-color: red; color: white; cursor: pointer; padding: 15px; border-radius: 20px; } 
#myTop:hover { background-color: #555; } 
img { border-radius: 10px 0px 10px 0px; } 
.kelip2 { animation:1s blinker linear infinite; -webkit-animation:1s blinker linear infinite; -moz-animation:2s blinker linear infinite; color: purple; } 
@-moz-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } 
@-webkit-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } 
@keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } 
#container { margin: 0 auto; box-shadow: 0 0 30px none; } 
#content { border: none; border-radius: 25px; background-color: none; display: inline-block; padding: 2px; } 
.button { border: none; border-radius: 5px; color: white; padding: 3px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; } 
.button1 { background-color: lime; color: black; border: 2px solid black; } 
.button1:hover { background-color: navy; color: white; } 
.button2 { background-color: deepskyblue; color: black; border: 2px solid black; } 
.button2:hover { background-color: darkgreen; color: white; } 
.btsx { border: none; outline: 0; display: inline-block; padding: 8px; color: white; background-color: #C68E17; text-align: center; cursor: pointer; width: 100%; border-radius: 0px 10px; } 
.btsx:hover { background-color: #BDF516; } 
.grid-container { display: grid; grid-template-columns: 25% 25% 25% 25%; grid-gap: 2px; padding: 5px; } 
.grid-container > div { text-align: center; padding: none; font-size: 10px; } 
.grid-containerx { display: grid; grid-template-columns: 33% 33% 33%; grid-gap: 3px; background-color: none; padding: 3px; } 
.grid-containerx > div { text-align: center; padding: none; font-size: 10px; } 
.img { border-radius: 10px 2px 10px 2px; width: 100%; transition: transform .2s; } 
.img:hover { animation: shake 0.5s; } 
@keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } 
.nvg { position: relative; font-family: Arial; } 
.nvgtext { position: absolute; bottom: 1px; right: 1px; font-size: 18px; color: white; } 
.title { color: #8FB31D; font-size: 13px; text-align: center; padding: 4px; } 
.previous { background-color: #66FF00; color: black; border-radius: 25px 0px 0px 25px; text-decoration: none; display: inline-block; padding: 4px 14px; } 
.previous:hover { background-color: #04AA6D; color: red; } 
.next { background-color: #04AA6D; color: white; border-radius: 0px 25px 25px 0px; text-decoration: none; display: inline-block; padding: 4px 14px; } 
.next:hover { background-color: #66FF00; color: red; } 
.vagina { border: none; padding: 1px 1px 1px 1px; background-color: #F0F8FF; font-size: 16px; } 
.siluman { width: 100%; padding: 2px 3px 2px 3px; background-color: #25383C; color: ghostwhite; font-size: 16px; box-sizing: border-box; } 
.judul { background-color: #B3AEAD; background-width: 100%; padding: 10px; text-align: center; } 
.bab { background-color: #30AAE3; background-width: 100%; padding: 10px; text-align: center; } 
.dropbtn { background-color: #3498DB; color: white; padding: 10px; font-size: 16px; border: none; cursor: row-resize; } 
.dropbtn:hover, .dropbtn:focus { background-color: #2980B9; } 
.dropdown { position: relative; display: inline-block; } 
.dropdown-content { display: none; position: absolute; background-color: #f1f1f1; width: 250px; height: 300px; border: 1px solid black; overflow: auto; bottom: 50px; z-index: 0; } 
.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } 
.dropdown a:hover {background-color: #ddd;} 
.show {display: block;} 
.dropbtn { background-color: #3498DB; color: white; padding: 10px; font-size: 16px; border: none; cursor: row-resize; } 
.dropbtn:hover, .dropbtn:focus { background-color: #2980B9; } 
.dropup { position: relative; display: inline-block; } 
.dropup-content { display: none; position: absolute; background-color: #f1f1f1; width: 250px; height: 300px; border: 1px solid black; overflow: auto; bottom: 50px; z-index: 0; } 
.dropup-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } 
.dropup a:hover {background-color: #ddd;} 
.show {display: block;} 
* { box-sizing: border-box; } 
.column2 { float: left; width: 50%; padding: 3px; }
.column3 { float: left; width: 33.3%; padding: 3px; } 
.column4 { float: left; width: 25%; padding: 2px; } 
.row:after { content: ""; display: table; clear: both; } 
.ceritax { text-align: justify; padding: 5px; color: #3EA055; }
li.active { background-color: #EDC70C; font-style: italic; font-weight: bold; }
/* latin */ @font-face { font-family: 'Cookie'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/cookie/v22/syky-y18lb0tSbf9kgqS.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }