/* style.css */ :root { --bg-color-light: #e4e9f2; --text-color-light: #000; --header-bg-light: #4c8ff5; } 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: #76b7f5; /* warna header */ background-color: var(--header-bg-light); padding: 20px; text-decoration: none; font-size: 25px; font-weight: bold; } /* Dark mode styles */ body.dark-mode { --bg-color-light: #17191c; --text-color-light: ghostwhite; --header-bg-light: #4c8ff5; } #theme-toggle { padding: auto; position: fixed; right: 20px; cursor: pointer; float: right; border-radius: 15px; background: #dba6f5; } footer { background-color: #4cd2ed; 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; bottom: 20px; right: 30px; 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; } 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: 3px; background-color: none; padding: 3px; } .grid-container > div { background-color: rgba(255, 255, 255, 0.8); 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 { background-color: rgba(255, 255, 255, 0.8); 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: blue; font-size: 12px; } .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;}