@import url(https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&display=swap);

:root {
	--teks-biasa: #fff;
	--warna-link: #11d611;
	--warna-link-menu: #fff;
	--warna-judul-widget: #fff;
	--warna-header-1: #111;
	--warna-header-2: #d40606;
	--background: #000;
	--font: Poppins, sans-serif;
	--font-artikel: Poppins, sans-serif
}

* {
	box-sizing: border-box
}

body {
	background-color: var(--background);
	color: var(--teks-biasa);
	font-family: var(--font);
	line-height: 1.4em;
	font-size: 15px;
	margin: auto
}

a,
a:visited,
h2 a:hover,
h3 a:hover {
	color: var(--warna-link);
	text-decoration: none
}

a:hover {
	text-decoration: none
}

.logo {
	width: 100%;
	text-align: center;
	padding: 16px 0 15px
}

.custom-logo {
	width: 200px;
	height: auto;
	text-align: center
}

#navbar {
	font-size: 1.2em;
	background: #ddd;
	padding: 7px;
	margin: 0 0 20px;
	color: #666;
	letter-spacing: -1px;
	text-align: center
}

#navbar a {
	color: #666;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 700
}

#navbar a:hover {
	color: var(--background)
}

#header {
	background: var(--background)
}

#header td {
	font-size: 1.1em
}

#header h1 {
	font-size: 1em;
	margin: 0;
	padding: 0
}

#main-content {
	background-color: var(--background);
	text-align: left
}

#content {
	font-size: 15px;
	background: var(--background)
}

.blogtitle {
	font-size: 2.8em !important;
	text-align: center;
	font-weight: 700;
	margin: 10px 0 0;
	padding: 0
}

h1,
h2,
h3,
h4 {
	font-weight: 700
}

h2 {
	font-size: 15px;
	text-align: left
}

h2.pagetitle {
	font-size: 1.6em
}

#bottombox h2 {
	font-size: 1.2em
}

h3 {
	font-size: 14px;
	text-align: left
}

.description {
	padding: 5px;
	color: var(--teks-biasa);
	font-size: 1.1em;
	text-align: center
}

#footer {
	border: none;
	margin: 0
}

small {
	font-size: .9em
}

.alt {
	background: var(--teks-biasa)
}

#commentform input,
#commentform textarea,
.commentlist li {
	font-size: 1em
}

.commentlist li {
	font-weight: 400
}

.commentlist cite,
.commentlist cite a {
	font-weight: 700;
	font-style: normal;
	font-size: 1em
}

.commentlist p {
	font-weight: 400;
	text-transform: none
}

#commentform p {
	font-size: 1.1em
}

.commentmetadata {
	font-weight: 400
}

#sidebar ul ol li,
#sidebar ul ul li,
.nocomments,
.postmetadata,
blockquote,
small,
strike {
	color: #777
}

pre {
	margin: 0 !important;
	padding: .8em .2em;
	background-color: var(--background);
	border-bottom: 1px dotted #555 !important;
	color: var(--teks-biasa);
	font-family: 'Courier New', monospace;
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow: auto
}

code {
	font: 1.1em "Courier New", Courier, Fixed;
	color: #666;
	padding: 0 2px;
	background: var(--teks-biasa);
	overflow: auto
}

abbr,
acronym,
span.caps {
	font-size: .9em;
	letter-spacing: .07em
}

#ads-header {
	margin: 5px 10px
}

#ads-home,
#ads-single {
	margin: 5px auto
}

#ads-footer {
	margin: auto 10px
}

.banner.ads72890 {
	width: 760px;
	max-width: 100%;
	height: 90px
}

.banner {
	position: relative;
	display: block;
	margin: 0 auto
}

.banner::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: #ddd;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6C4.44772 6 4 6.44772 4 7V8H6V7C6 6.44772 5.55228 6 5 6Z' fill='%23999'/%3E%3Cpath d='M11 8H9.5C9.22386 8 9 8.22386 9 8.5C9 8.77614 9.22386 9 9.5 9H11V8Z' fill='%23999'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 4.5C0 3.11929 1.11929 2 2.5 2H12.5C13.8807 2 15 3.11929 15 4.5V10.5C15 11.8807 13.8807 13 12.5 13H2.5C1.11929 13 0 11.8807 0 10.5V4.5ZM4 10V9H6V10H7V7C7 5.89543 6.10457 5 5 5C3.89543 5 3 5.89543 3 7V10H4ZM11 7H9.5C8.67157 7 8 7.67157 8 8.5C8 9.32843 8.67157 10 9.5 10H12V5H11V7Z' fill='%23999'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 30px
}

#bottombox a {
	color: #ddd;
	font-weight: 700;
	text-decoration: none
}

#bottombox a:hover {
	text-decoration: underline
}

#bottombox h4 {
	font-size: 1.2em
}

#main-content {
	background-color: var(--background);
	margin: auto;
	padding: 0;
	width: 760px;
	border: none;
	border-radius: 15px
}

#header {
	margin: 0;
	padding: 20px 10px;
	text-align: center
}

#header a {
	color: #f9f9f9;
	text-decoration: none
}

#header a:hover {
	color: var(--teks-biasa)
}

.column {
	padding: 10px 0;
	max-width: 760px;
	margin: 0 12px;
	width: auto
}

.post {
	width: 100%;
	max-width: 760px;
	box-shadow: 0 1px 0 #ddd;
	margin-bottom: 5px;
	display: inline-block
}

.post:last-child {
	box-shadow: none
}

.post hr {
	display: block
}

.entry {
	margin: 0 0 20px;
	padding: 0
}

.entry p {
	margin: 0 0 1.5em
}

.entry h1,
.entry h2,
.entry h3 {
	margin-top: 1.5em;
	margin-bottom: .5em;
	font-weight: 700
}

.entry img {
	max-width: 100%;
	height: auto
}

.entry ol,
.entry ul {
	margin: 0 0 1.5em 1.5em;
	padding-left: 1.5em;
	list-style-position: inside
}

.entry li {
	margin-bottom: .5em
}

.entry ol {
	list-style-type: decimal
}

.entry ul {
	list-style-type: disc
}

.entry blockquote {
	margin: 1.5em 0;
	padding: 1em;
	border-left: 4px solid #ccc;
	background-color: #f9f9f9;
	font-style: italic;
	color: #555
}

.entry pre {
	background-color: #f4f4f4;
	padding: 1em;
	overflow-x: auto;
	font-family: 'Courier New', monospace;
	font-size: .9em;
	margin-bottom: 1.5em
}

.entry code {
	background-color: #f4f4f4;
	padding: .2em .4em;
	font-family: 'Courier New', monospace;
	font-size: .95em;
	color: #d6336c
}

.entry hr {
	border: 0;
	height: 1px;
	background: #ccc;
	margin: 1.5em 0
}

.entry a {
	color: var(--warna-link);
	text-decoration: none
}

.entry a:hover {
	color: var(--teks-biasa);
	text-decoration: none
}

.entry table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5em
}

.entry table td,
.entry table th {
	border: 1px solid #ddd;
	padding: .75em
}

.entry table th {
	background-color: #f9f9f9;
	font-weight: 700;
	text-align: left
}

.entry table td {
	text-align: left
}

.column .postmetadata {
	padding-top: none
}

.postmetadata {
	clear: left
}

#footer {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	font-weight: 600;
	font-size: 13px;
	text-align: center
}

#footer a {
	color: var(--warna-link);
	text-decoration: none
}

#footer a:hover {
	color: var(--teks-biasa)
}

#footer p {
	padding: 5px 10px;
	color: var(--teks-biasa)
}

#footer .nav.navbar-nav li.current-menu-item a {
	background-color: var(--background);
	color: var(--teks-biasa);
	font-weight: 700;
	border-radius: 5px
}

#content h1 {
	margin: 0 0 5px;
	font-weight: 600;
	padding: 0 auto;
	border-bottom: 1px dashed #444;
	color: var(--warna-link);
	line-height: 1.3em
}

h2 {
	margin: 5px 0
}

h2 a:hover {
	color: var(--teks-biasa)
}

h2.pagetitle {
	margin-top: 10px;
	text-align: center
}

#bottombox h2 {
	margin: 10px 0 0;
	padding: 0
}

#bottombox h4 {
	margin: 20px 0 0;
	padding: 2px;
	color: #ff0;
	text-transform: uppercase
}

h3 {
	padding: 0;
	margin: 0;
	color: var(--teks-biasa)
}

h3.comments {
	padding: 0;
	margin: 40px auto 20px
}

.breadcrumb {
	padding: 0 auto;
	margin-bottom: 5px;
	font-size: 13px;
	border-bottom: 1px dashed #444
}

.tab-controller {
	border-bottom: 1px dashed #444;
	padding: 6px 0 10px;
	scrollbar-color: #ddd0 #eee0;
	scrollbar-width: thin;
	overflow: auto;
	white-space: nowrap;
	font-weight: 600
}

.tombol {
	color: var(--warna-link);
	background: var(--background);
	border: 1px solid #363434;
	padding: 1px 5px;
	border-radius: 5px;
	font-weight: 700;
	font-size: 10pt;
	display: inline;
	margin-top: -1px
}

.tombol:hover {
	background-color: #d4d4d4
}

.floating-buttons.fixed {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%) scale(1.05);
	opacity: 1;
	pointer-events: auto;
	background: #fffffff2;
	box-shadow: 0 6px 15px #0000004d;
	padding: 12px 16px;
	border-radius: 10px;
	z-index: 999;
	animation: fadeInUp .4s ease-in-out
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(20px) scale(.95)
	}

	to {
		opacity: 1;
		transform: translateX(-50%) scale(1.05)
	}
}

.floating-buttons.fixed button {
	transition: transform .2s ease, background .3s ease
}

.floating-buttons.fixed button:active {
	transform: scale(.95)
}

#menunav {
	width: 100%;
	max-width: 760px;
	margin: auto;
	background-color: var(--background);
	padding: 0
}

#menunav * {
	text-decoration: none;
	list-style: none;
	margin: 0;
	padding: 0;
	outline: 0
}

#menunav .width {
	max-width: 760px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: auto 10px
}

#menunav .nav-left {
	display: flex;
	align-items: center;
	height: 100%
}

#menunav .social-media {
	display: flex;
	align-items: center
}

#menunav .social-media a {
	margin-left: 15px
}

#menunav .social-media a:hover {
	color: var(--teks-biasa)
}

#menunav nav {
	width: auto
}

#menunav nav ul {
	display: flex;
	margin: 0
}

#menunav nav ul li {
	margin-left: 25px
}

#menunav nav ul li a {
	font-size: 13px;
	font-weight: 600;
	padding: 9px 0;
	display: inline-block;
	transition: all .5s ease;
	color: var(--warna-link)
}

#menunav nav ul li.current-menu-item a {
	color: var(--teks-biasa)
}

#menunav nav ul li a:hover {
	background-color: var(--background);
	color: var(--teks-biasa);
	transition: all .5s ease
}

#menunav .toggle-menu {
	display: none
}

#menunav .toggle-menu ul {
	display: table;
	width: 24px
}

#menunav .toggle-menu ul li {
	width: 100%;
	height: 3px;
	background-color: var(--teks-biasa);
	margin-bottom: 3px
}

#menunav .toggle-menu ul li:last-child {
	margin-bottom: 0
}

#menunav input[type=checkbox],
#menunav label {
	display: none
}

#superheader {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding-top: 10px;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 4px 4px -5px #888;
	background: linear-gradient(139deg, var(--warna-header-1), var(--warna-header-2));
	margin-bottom: 15px
}

.waves {
	margin-bottom: -10px;
	position: relative;
	width: 100%;
	height: 5vh;
	min-height: 70px;
	max-height: 150px
}

.content {
	position: relative;
	height: 20vh;
	text-align: center;
	background-color: #fff
}

.parallax>use {
	animation: move-forever 30s cubic-bezier(.55, .5, .45, .5) infinite;
	will-change: transform
}

.parallax>use:first-child {
	animation-delay: -5s;
	animation-duration: 15s
}

.parallax>use:nth-child(2) {
	animation-delay: -6s;
	animation-duration: 20s
}

.parallax>use:nth-child(3) {
	animation-delay: -8s;
	animation-duration: 25s
}

.parallax>use:nth-child(4) {
	animation-delay: -10s;
	animation-duration: 35s
}

@keyframes move-forever {
	0% {
		transform: translateX(-90px)
	}

	100% {
		transform: translateX(85px)
	}
}

.status-pesan {
	background-color: #d3d3d3;
	margin: 10px auto;
	border-radius: 8px;
	padding: 10px 0;
	text-align: center;
	font-size: 15px
}

.status-pesan span {
	color: var(--warna-link)
}

.author {
	margin: auto
}

#menu-header {
	clear: both;
	font-size: 12px;
	font-weight: 700;
	margin: 0 auto 15px;
	padding: 0 20px;
	overflow: hidden;
	width: 100%;
	max-width: 760px;
	text-transform: uppercase;
	color: #333;
	background: #111
}

#menu-header ul {
	float: left;
	width: 100%;
	text-align: center !important;
	padding: 0
}

#menu-header li {
	list-style-type: none;
	display: inline !important;
	margin-right: 20px;
	position: relative;
	padding: 0
}

#menu-header a {
	color: var(--warna-link);
	text-decoration: none;
	text-transform: capitalize
}

#menu-header a:hover {
	color: var(--teks-biasa);
	text-decoration: none
}

#menu-artist {
	text-align: center;
	width: 100%;
	padding: 0
}

#menu-artist ul {
	width: 100%;
	padding: 0 10px;
	text-align: center
}

#menu-artist li {
	display: inline-block;
	margin: 0 2px;
	padding: 2px 6px;
	background-color: var(--warna-header-1);
	border-radius: 6px;
	cursor: pointer;
	transition: background-color .3s, color .3s
}

#menu-artist li:hover {
	background-color: var(--warna-header-2)
}

#menu-artist a {
	color: var(--warna-link-menu);
	text-decoration: none;
	text-transform: capitalize
}

#menu-footer {
	text-align: center;
	width: 100%;
	padding: 0 10px;
	margin-bottom: 8px
}

#menu-footer ul {
	width: 100%;
	padding: 0 10px;
	text-align: center;
	list-style: none
}

#menu-footer li {
	padding: 0;
	margin: 0;
	display: inline
}

#menu-footer li:not(:first-child)::before {
	content: "·";
	margin-right: 4px
}

#menu-footer a {
	color: var(--warna-link);
	text-decoration: none;
	text-transform: capitalize
}

#menu-footer a:hover {
	color: var(--teks-biasa)
}

.widget-title {
	padding: 10px;
	background: linear-gradient(139deg, #000, var(--warna-link));
	text-align: center;
	border-radius: 0 0 10px 10px;
	color: var(--warna-judul-widget);
	font-weight: 700;
	margin: 5px -10px;
	text-transform: uppercase
}

.menusearch {
	display: block;
	padding: 0 10px 10px;
	width: 100%
}

.formsearchs {
	width: 100%
}

.search-container {
	display: flex;
	align-items: center;
	width: 100%;
	position: relative
}

.searchfield {
	padding: 10px 45px 10px 15px;
	margin: 0 2px;
	line-height: 1.3em;
	width: 100%;
	background-color: #fff;
	border: 1px solid #dfdfdf;
	border-radius: 10px;
	color: #535353;
	outline: 0;
	transition: border-color .3s ease;
	box-sizing: border-box;
	height: 40px
}

.searchfield::placeholder {
	color: #989898
}

.searchfield:focus {
	border-color: var(--teks-biasa)
}

.search-button {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	width: 24px;
	background: 0 0;
	border: none;
	cursor: pointer;
	color: #989898;
	padding: 0
}

.search-button svg {
	height: 100%;
	width: 100%;
	fill: currentColor
}

.post-content {
	white-space: pre-wrap;
	font-family: var(--font-artikel), 'Courier New', monospace;
	margin-bottom: 0;
	border-bottom: 1px dotted #555 !important;
	padding-bottom: 35px;
	line-height: 1.3em;
	padding-top: 30px;
	padding-top: 10px
}

.post-content p {
	margin: .75em 0;
	padding: 0
}

.post-content br {
	line-height: 0;
	margin: 0;
	padding: 0
}

.post-content .intro {
	color: var(--teks-biasa);
	font-weight: 700;
	text-transform: capitalize;
	margin: 0;
	padding: 0
}

.post-content .chord {
	position: relative;
	cursor: pointer;
	font-weight: 700;
	display: inline-block;
	color: var(--warna-link);
	letter-spacing: .5px;
	border-bottom: dotted .5px var(--warna-link)
}

.post-content>* {
	margin: 0;
	padding: 0
}

.post-content ol,
.post-content ul {
	margin: .5em 0;
	padding-left: 1.5em;
	list-style-position: inside
}

.post-content li {
	margin-bottom: .5em
}

.post-content ol {
	list-style-type: decimal
}

.post-content ul {
	list-style-type: disc
}

.post-content a {
	color: var(--warna-link);
	text-decoration: underline
}

.post-content a:hover {
	color: var(--warna-link-hover);
	text-decoration: none
}

.post-content img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: .5em 0
}

.post-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1em 0;
	table-layout: auto
}

.post-content td,
.post-content th {
	border: 1px solid #ddd;
	padding: .5em;
	text-align: left
}

.post-content th {
	background-color: #f9f9f9;
	font-weight: 700
}

.post-content blockquote {
	margin: 1em 0;
	padding: .5em 1em;
	border-left: 4px solid #ccc;
	background-color: #f4f4f4;
	font-style: italic;
	color: #555
}

.post-content pre {
	background-color: #f0f0f0;
	padding: 1em;
	overflow-x: auto;
	font-family: 'Courier New', monospace;
	font-size: .9em;
	margin: 1em 0
}

.post-content code {
	background-color: #f0f0f0;
	padding: .2em .4em;
	font-family: 'Courier New', monospace;
	font-size: .95em;
	color: #d6336c
}

.post-content hr {
	border: 0;
	height: 1px;
	background: #ddd;
	margin: 1em 0
}

.tombol {
	color: var(--warna-link);
	background: var(--background);
	border: 1px solid #363434;
	padding: 1px 5px;
	border-radius: 5px;
	font-weight: 700;
	font-size: 10pt;
	display: inline;
	margin-top: -1px
}

.tombol:hover {
	background-color: #d4d4d4
}

.tombol-az {
	color: var(--warna-link);
	background: var(--background);
	border: 1px solid #363434;
	padding: 1px 5px;
	border-radius: 5px;
	font-weight: 700;
	font-size: 10pt;
	display: inline;
	margin: 2px;
	cursor: pointer
}

.tombol-az:hover {
	background-color: #d4d4d4
}

.tombol-az.active,
.tombol.active {
	background-color: #d4d4d4
}

.icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	fill: currentColor;
	vertical-align: middle
}

.mode {
	display: none
}

.light-mode .icon-light {
	display: inline
}

.dark-mode .icon-dark {
	display: inline
}

.dark-mode .icon-light,
.light-mode .icon-dark {
	display: none
}

.light-mode .post-content {
	background-color: var(--background);
	color: var(--teks-biasa)
}

.dark-mode .post-content {
	background-color: #111;
	color: #fff
}

.dark-mode .dark-mode,
.light-mode .light-mode {
	display: block
}

.fixed-left,
.fixed-right {
	position: fixed;
	top: 0;
	height: 600px;
	z-index: 9999;
	transform: translateZ(0)
}

.fixed-left {
	left: 0
}

.fixed-right {
	right: 0
}

.close-fixed {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 24px;
	cursor: pointer
}

.button1,
.button3 {
	margin: 5px;
	padding: 10px 15px;
	cursor: pointer;
	border: none;
	border-radius: 5px;
	background-color: var(--warna-link);
	color: #fff
}

.button1:hover,
.button3:hover {
	background-color: var(--teks-biasa)
}

pre {
	background-color: #eef;
	padding: 10px;
	border-radius: 5px;
	white-space: pre-wrap;
	word-wrap: break-word
}

#key-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 10px
}

.daftar-isi-list {
	list-style-type: none;
	padding: 0;
	margin: 0
}

.daftar-isi-item {
	padding: 5px;
	border-bottom: 1px solid #ddd;
	transition: background-color .3s ease
}

.daftar-isi-item:hover {
	background-color: #f9f9f9
}

.daftar-isi-item h2 {
	margin: 0;
	padding: 0;
	font-weight: 700
}

.filter-buttons {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
	flex-wrap: wrap
}

.filter-buttons button {
	background-color: #007bff;
	color: #fff;
	border: none;
	padding: 8px 10px;
	margin: 0 3px;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color .3s;
	font-size: 15px
}

.filter-buttons button:hover {
	background-color: #0056b3
}

.filter-buttons button.active {
	background-color: #28a745
}

#modechord {
	position: relative
}

.chord {
	display: block
}

.lirik {
	display: none
}

.chordoff .chord {
	display: none
}

.chordoff .lirik {
	display: block
}

.speedsobatmasbro {
	position: fixed;
	right: 0;
	top: 35%;
	background: var(--teks-biasa);
	padding: 10px;
	border-radius: 4px;
	box-shadow: 0 1px 3px #0000001a 0 1px 3px #00000021;
	z-index: 99
}

.ngaran {
	font-size: 12px;
	font-weight: 500;
	color: #222;
	text-align: center;
	padding-bottom: 7px
}

.speedbar {
	width: 32px;
	height: 15px;
	margin-top: 4px;
	margin-left: -40px
}

.stopmasbro {
	background: red;
	width: 32px;
	margin: 12px auto 0;
	border-radius: 3px;
	font-size: 11px;
	padding: 4px 0;
	text-align: center;
	color: var(--teks-biasa);
	box-shadow: 0 1px 3px #0000001a 0 1px 3px #00000021;
	cursor: pointer
}

.speedtoggle {
	background: var(--teks-biasa);
	color: #222;
	font-size: 1.4em;
	width: 42px;
	height: 42px;
	border-radius: 99em;
	position: fixed;
	top: 28%;
	right: 45px;
	padding: 0;
	text-align: center;
	cursor: pointer;
	opacity: 1;
	transition: all .25s
}

.speedtohggle:hover {
	box-shadow: 0 4px 8px #0000001a 0 4px 8px #00000021
}

#button-share {
	background: var(--background);
	margin-top: 10px;
	padding: 10px 0;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-color: #ddd0 #eee0;
	display: flex;
	align-items: center;
	gap: 2px
}

#button-share h4 {
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	font-family: Arial, Helvetica, Tahoma, sans-serif;
	margin: 0;
	white-space: nowrap
}

#button-share a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 2px;
	border-radius: 30px;
	text-transform: uppercase;
	padding: 4px 5px;
	font: 700 11px Tahoma, sans-serif;
	color: var(--warna-link);
	text-decoration: none;
	transition: background .3s;
	border: 1px solid #555
}

#button-share a:hover {
	background: #d4d4d4;
	color: var(--teks-biasa)
}

#button-share svg {
	display: inline-block;
	vertical-align: middle;
	fill: currentColor
}

.lirik-img {
	width: 200px;
	height: 200px;
	display: block;
	margin: 10px auto -10px;
	border: solid 5px green
}

.judul-lirik {
	font-size: 18px;
	text-align: center;
	padding: 5px 10px;
	color: green;
	text-transform: uppercase
}

#author-info {
	display: block;
	background: linear-gradient(#fff, #ddd);
	text-align: center;
	margin-top: 20px;
	border-radius: 5px 5px 10px 10px;
	padding-bottom: 10px;
	z-index: 9999999;
	position: relative
}

#author-info img {
	border-radius: 50%;
	width: 120px;
	height: 120px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin: 0 0 5px
}

img {
	max-width: 100%;
	height: auto
}

.view-more {
	background-color: var(--background);
	text-align: center;
	border-radius: 50px;
	border: solid .1em #989898;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 600;
	padding: 12px 0;
	margin: 10px 0
}

.deskripsi {
	margin: auto;
	text-align: justify;
	text-justify: inter-word;
	color: var(--teks-biasa)
}

.deskripsi a {
	color: var(--warna-link);
	font-weight: 600
}

.popularposts ul {
	margin: 0;
	padding-left: 0
}

.popularposts ul li {
	width: 100%;
	max-width: 760px;
	padding: 7px 10px;
	box-shadow: 0 1px 0 #111;
	background: 0 0;
	margin-bottom: 0;
	display: inline-block
}

.popularposts a {
	overflow: hidden;
	display: block;
	word-wrap: break-word;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none
}

.hide-content {
	display: none;
	margin: 0;
	padding: 0
}

#comments a.hiddencontent,
a.showcontent {
	cursor: pointer;
	display: block;
	background-color: var(--background);
	text-align: center;
	font-size: 15px;
	color: var(--teks-biasa);
	border-radius: 20px;
	border: 1px solid #989898;
	margin: 30px auto;
	padding: 12px 0
}

#comments a.hiddencontent:hover {
	background: var(--background);
	color: var(--teks-biasa)
}

.scrollmenu,
.scrollmenu1 {
	margin: 0 auto;
	background-color: transparent;
	overflow: auto;
	white-space: nowrap;
	scrollbar-color: #ddd0 #eee0;
	scrollbar-width: thin
}

.scrollmenu1::-webkit-scrollbar,
.scrollmenu::-webkit-scrollbar {
	width: 10px;
	height: 7px
}

.scrollmenu1::-webkit-scrollbar-track,
.scrollmenu::-webkit-scrollbar-track {
	background: #eee0
}

.scrollmenu1::-webkit-scrollbar-thumb,
.scrollmenu::-webkit-scrollbar-thumb {
	background: #ddd0
}

.scrollmenu1:hover,
.scrollmenu:hover {
	transition: all .3s ease-in-out;
	scrollbar-color: #ddd #eee
}

.scrollmenu a,
.scrollmenu1 a {
	display: inline-block;
	color: var(--warna-link);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 12px;
	border-bottom: 2px solid transparent;
	transition: border-color .3s ease-in-out
}

.scrollmenu a:not(:first-child),
.scrollmenu1 a:not(:first-child) {
	margin-left: 10px
}

#menu-artist li.active {
	background-color: var(--warna-header-2)
}

.scrollmenu a.active,
.scrollmenu a:hover,
.scrollmenu1 a.active,
.scrollmenu1 a:hover {
	color: var(--warna-link-menu)
}

.scrollmenu1 {
	padding: 0;
	background-color: var(--background);
	margin-top: 0;
	margin-bottom: -15px
}

p img {
	padding: 0;
	max-width: 100%
}

.rssicon {
	vertical-align: middle;
	border: 0;
	padding-right: 5px
}

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto
}

img.alignright {
	padding-left: 10px;
	display: inline
}

img.alignleft {
	padding-right: 10px;
	display: inline
}

.thumb {
	float: left !important;
	margin: 10px 5px 0 0
}

.alignright {
	float: right
}

.alignleft {
	float: left
}

.postmetadata li,
.postmetadata ul {
	display: inline;
	list-style-type: none;
	list-style-image: none
}

#bottombox ul,
#sidebar ul ol {
	margin: 0;
	padding: 0
}

#bottombox ul li {
	list-style-type: none;
	list-style-image: none;
	margin-bottom: 15px
}

#bottombox ul p,
#sidebar ul select {
	margin: 5px 0 8px
}

#bottombox ul ul,
#sidebar ul ol {
	margin: 15px 0 15px 10px
}

#bottombox ul ul ul,
#sidebar ul ol {
	margin: 0 0 0 10px
}

#sidebar ul ol li,
ol li {
	list-style: decimal outside
}

#bottombox ul ul li,
#sidebar ul ol li {
	margin: 6px 0 0;
	padding: 0
}

.main-navigation ul {
	text-align: center
}

.main-navigation ul li {
	display: inline-block;
	float: none
}

.copyright {
	margin-bottom: 10px;
	text-align: center;
	padding: 0 10px
}

select {
	width: 130px
}

#searchform #s {
	width: 70%;
	padding: 6px;
	margin: 15px 0;
	background: var(--teks-biasa);
	border: 1px solid #999
}

#searchsubmit {
	cursor: pointer;
	border: solid 1px #666;
	background: var(--background);
	color: var(--teks-biasa);
	font-weight: 700;
	padding: 10px;
	border-radius: 5px;
	-moz-border-radius: 5px
}

.screen-reader-text {
	display: none
}

#commentform input {
	width: 100%;
	padding: 2px;
	margin: 5px 5px 1px 0;
	border: 1px solid var(--teks-biasa)
}

#commentform textarea {
	width: 100%;
	padding: 2px;
	border: 1px solid var(--teks-biasa)
}

#commentform #submit {
	background: #050;
	padding: 10px;
	font-size: .9em;
	color: var(--teks-biasa);
	margin: 0;
	border: 0;
	border-radius: 5px;
	-moz-border-radius: 5px
}

.comments {
	clear: both
}

.alt {
	margin: 0;
	padding: 10px
}

.commentlist {
	padding: 0;
	margin: 0;
	text-align: justify
}

.commentlist li {
	margin: 15px 0 3px;
	padding: 5px 10px 3px;
	list-style: none
}

.commentlist p {
	margin: 10px 5px 10px 0
}

#commentform p {
	margin: 5px 0
}

.nocomments {
	text-align: center;
	margin: 0;
	padding: 0;
	display: none
}

.commentmetadata {
	margin: 0;
	display: block
}

img.avatar {
	float: left;
	margin: 0 10px 0 0;
	padding: 0 4px 0 0;
	vertical-align: middle
}

#respond {
	margin-bottom: 20px
}

#reply-title a {
	color: #088000 !important
}

.bypostauthor {
	background: var(--background) !important
}

ol.commentlist li div.comment-meta {
	font-size: 9px;
	margin-bottom: 10px
}

ol.commentlist li div.comment-meta a {
	color: #999 !important
}

ol.commentlist li div.comment-meta a:hover {
	color: #06c !important;
	text-decoration: underline
}

ol.commentlist li p {
	font-size: 1em;
	margin: 0 0 1em
}

ol.commentlist li ul {
	font-size: 1em;
	margin: 0
}

ol.commentlist li ul li {
	font-size: 1em;
	list-style: square;
	margin: 0
}

ol.commentlist li ol li {
	font-size: 1em;
	margin: 0;
	list-style: upper-roman
}

ol.commentlist li div.reply {
	font-size: 1em
}

ol.commentlist li div.reply a {
	text-decoration: none;
	padding: 5px
}

ol.commentlist li ul.children {
	list-style: none;
	margin: 1em 0 0;
	text-indent: 0
}

ol.commentlist {
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
	text-indent: 0
}

ol.commentlist li.comment {
	border: 1px solid #d5d5d5;
	padding: 1em;
	border-radius: 8px;
	-moz-border-radius: 8px
}

ol.commentlist li.even {
	background: var(--teks-biasa)
}

ol.commentlist li.odd {
	background: #f9f9f9
}

ol.commentlist li ul.children li.depth-2 {
	list-style: none;
	border-left: 1px solid var(--teks-biasa);
	margin: 0 0 .25em .25em
}

ol.commentlist li ul.children li.depth-3 {
	list-style: none;
	border-left: 1px solid var(--teks-biasa);
	margin: 0 0 .25em .25em
}

ol.commentlist li ul.children li.depth-4 {
	list-style: none;
	border-left: 1px solid var(--teks-biasa);
	margin: 0 0 .25em .25em
}

ol.commentlist li ul.children li.depth-5 {
	list-style: none;
	border-left: 1px solid var(--teks-biasa);
	margin: 0 0 .25em .25em
}

.commentlist table td {
	background: var(--teks-biasa);
	border: 1px solid var(--teks-biasa);
	padding: 10px
}

dd,
dl,
dt {
	list-style: none;
	padding: 0;
	margin: 0;
	outline: 0;
	vertical-align: baseline
}

dt {
	font-weight: 700;
	padding-top: 5px
}

dd {
	padding-bottom: 15px
}

#bottombox {
	padding: 20px;
	margin: 15px 0 0;
	background: #050;
	color: #ddd;
	font-size: 1em;
	clear: both
}

#adbox {
	text-align: left;
	padding: 10px 5px;
	background: #333;
	text-align: center;
	border-radius: 5px
}

#boxes {
	width: 100%;
	background: #050
}

#box1 {
	padding: 5px;
	margin: 5px;
	border: 0 solid #333;
	overflow: hidden;
	float: left;
	width: 100%;
	background: #050
}

#box2 {
	padding: 5px 5px 5px 10px;
	margin: 5px;
	overflow: hidden;
	float: right;
	width: 205px;
	background: #050
}

#l_box {
	width: 250px;
	float: left;
	padding: 5px;
	border: 1px solid #ddd;
	background: #f9f9f9
}

#r_box {
	width: 250px;
	float: right;
	padding: 5px;
	background: #f9f9f9;
	border: 1px solid #ddd
}

#bottombox_low {
	clear: both
}

abbr,
acronym,
span.caps {
	cursor: help
}

abbr,
acronym {
	border-bottom: 1px dashed #999
}

blockquote {
	margin: 15px 30px 0 10px;
	padding-left: 20px;
	border-left: 5px solid var(--teks-biasa)
}

blockquote cite {
	margin: 5px 0 0;
	display: block
}

.center {
	text-align: center
}

hr {
	display: none
}

a img {
	border: none
}

.navigation {
	display: block;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 10px 0
}

.navigation a {
	color: var(--teks-biasa)
}

.mainnav a {
	background: #050;
	color: var(--teks-biasa) !important;
	padding: 10px;
	border-radius: 8px;
	-moz-border-radius: 8px
}

.aligncenter,
div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto
}

.wp-caption {
	text-align: center;
	padding-top: 4px;
	margin: 10px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	max-width: 100%
}

.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none
}

.wp-caption p.wp-caption-text {
	font-size: 11px;
	padding: 0 4px 5px;
	margin: 0
}

#content .gallery {
	margin: 0 auto 18px
}

#content .gallery .gallery-item {
	float: left;
	margin-top: 5px;
	text-align: center;
	width: 33%
}

#content .gallery img {
	border: 2px solid #cfcfcf
}

#content .gallery .gallery-caption {
	color: #888;
	font-size: 11px;
	margin: 0 0 12px
}

#content .gallery dl {
	margin: 0
}

#content .gallery img {
	border: 0 solid #f1f1f1
}

#content .gallery br+br {
	display: none
}

#content .attachment img {
	display: block;
	margin: 0 auto
}

.toggle-buttons {
	margin-bottom: 10px
}

.toggle-buttons button {
	cursor: pointer;
	padding: 5px 10px;
	margin-right: 5px;
	border: 1px solid var(--teks-biasa);
	border-radius: 4px;
	background-color: #f0f0f0;
	color: #333
}

.chord.hidden {
	display: none
}

.tags {
	margin-top: 10px
}

#load-more a:link,
#load-more a:visited {
	cursor: pointer;
	background-color: var(--background);
	text-align: center;
	font-size: 15px;
	border-radius: 20px;
	border: 1px solid #989898;
	padding: 12px 0;
	margin: 10px 0;
	display: flow-root;
	font-weight: 600
}

.loaders,
.loaders-stop {
	margin: 0 auto;
	font-size: 4px;
	position: relative;
	text-indent: -9999em;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	border-top: 4px solid #3184ff;
	border-right: 4px solid #ff6359;
	border-bottom: 4px solid #ffbd00;
	border-left: 4px solid #28b549;
	transform: translateZ(0);
	animation: load8 1.1s infinite linear;
	transition: all .3s ease-in-out
}

.loaders-stop.paused {
	animation: none;
	border-color: #ccc;
	opacity: .5;
	filter: grayscale(100%);
	cursor: not-allowed;
	transform: scale(.95)
}

@keyframes load8 {
	0% {
		transform: rotate(0)
	}

	100% {
		transform: rotate(360deg)
	}
}

.related-chord {
	margin: 15px 0
}

.related-chord h3 {
	width: 100%;
	max-width: 760px;
	padding: 5px 0;
	box-shadow: 0 1px 0 #ddd;
	margin-bottom: 0;
	display: inline-block;
	background: 0 0
}

.related-chord ul {
	padding: 0;
	list-style-type: none
}

.related-chord li {
	padding: 5px 0
}

.related-chord a {
	overflow: hidden;
	display: block;
	word-wrap: break-word;
	font-weight: 700
}

.related-chord a:hover {
	color: var(--teks-biasa)
}

.az-menu ul {
	list-style: none;
	padding: 0;
	margin: 0
}

.az-menu li {
	display: inline-block;
	margin-right: 10px
}

.az-menu a {
	text-decoration: none;
	color: #0073aa
}

.az-menu a:hover {
	text-decoration: underline
}

.az-category {
	margin: 20px 0
}

.az-category h2 {
	margin-bottom: 10px
}

.az-category ul {
	list-style: none;
	padding: 0;
	margin: 0
}

.az-category li {
	margin-bottom: 5px
}

.az-category a {
	text-decoration: none;
	color: #333
}

.az-category a:hover {
	text-decoration: underline
}

.left-column,
.right-column {
	width: 45%;
	float: left;
	margin: 0 2.5%
}

.left-column {
	border-right: 1px solid #ddd
}

.post-list {
	list-style-type: none;
	padding: 0;
	margin: 0
}

.post-item {
	width: 100%;
	max-width: 760px;
	padding: 5px 0;
	box-shadow: 0 1px 0 #ddd;
	margin-bottom: 0;
	display: inline-block;
	background: 0 0
}

.post-item:last-child {
	box-shadow: none
}

.tombol svg {
	fill: var(--warna-link)
}

.tombol span {
	display: inline-block;
	margin-left: 5px
}

.tombol .text {
	display: inline-block
}

.chord-tooltip {
	position: absolute;
	display: none;
	z-index: 100;
	pointer-events: none;
	box-shadow: 0 4px 10px #00000080;
	border: solid 2px #00000080;
	border-radius: 25px;
	background-color: #fff;
	width: auto;
	max-width: 200px;
	padding: 0;
	margin: -6px
}

.chord:hover .chord-tooltip {
	display: block;
	top: 0;
	left: 0
}

.chord-tooltip img {
	max-width: 100px;
	height: auto;
	display: block
}

.instruction {
	font-style: italic;
	font-weight: 700
}

.judul-artist {
	color: var(--teks-biasa)
}

#error-404 {
	text-align: center;
	padding: 50px 20px
}

.error-title {
	font-size: 2.5em;
	color: red
}

.error-message {
	font-size: 1.2em;
	margin-bottom: 20px
}

.error-suggestions ul {
	list-style-type: none;
	padding: 0
}

.error-suggestions li {
	margin: 10px 0
}

.error-suggestions a {
	text-decoration: underline;
	color: #0073aa
}

.error-suggestions a:hover {
	color: #005177
}

@media (max-width:760px) {
	body {
		padding: 0
	}

	body.custom-background {
		background-color: var(--background) !important
	}

	#main-content {
		width: auto;
		margin: 0 auto
	}

	#menu-header {
		margin: 0
	}

	#menunav .width {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 40px
	}

	#menunav #logo {
		font-size: 15px;
		padding: 0
	}

	.social-media {
		display: flex;
		justify-content: center;
		margin-bottom: 10px
	}

	#menunav .social-media a:first-child {
		margin-left: 0
	}

	#menunav .toggle-menu {
		display: block;
		cursor: pointer
	}

	#button-share h4 {
		font-size: 12px
	}

	#button-share a {
		font-size: 10px;
		padding: 3px 6px;
		margin: 2px;
		gap: 4px
	}

	#button-share svg {
		width: 15px;
		height: 15px
	}

	#menunav input[type=checkbox] {
		position: absolute;
		top: -9999px;
		left: -9999px
	}

	nav {
		display: none
	}

	.footer-navigation {
		display: block !important
	}

	#menunav input[type=checkbox]:checked~nav {
		display: block
	}

	#menunav nav {
		position: absolute;
		right: 0;
		left: 0;
		top: 40px;
		background-color: var(--background);
		padding: 0;
		margin: 0 10px;
		z-index: 99;
		text-align: center
	}

	#menunav nav ul {
		display: block;
		text-align: center;
		padding: 0
	}

	#menunav nav ul li {
		display: block;
		margin: 0 auto;
		width: 100%
	}

	#menunav nav ul li a {
		color: var(--teks-biasa);
		font-weight: 600;
		padding: 10px 20px;
		display: block;
		width: 100%;
		text-align: center;
		border-bottom: 1px solid #6161611a;
		transition: background-color .3s, color .3s
	}

	#menunav nav ul li a i {
		color: #fde428;
		padding-right: 14px
	}

	#menunav nav ul li a:hover {
		background-color: var(--warna-link)
	}

	#superheader {
		margin-bottom: 0
	}

	.waves {
		height: 60px;
		min-height: 50px;
		width: 100%
	}

	.content {
		height: 30vh
	}

	h1 {
		font-size: 24px
	}

	.filter-buttons {
		flex-direction: row
	}

	.filter-buttons button {
		font-size: 12px;
		padding: 6px 8px
	}

	#sidebar {
		float: none;
		display: block;
		padding: 5px;
		margin: 5px;
		width: 95%;
		background: var(--teks-biasa)
	}

	#box1,
	#box2 {
		float: none;
		display: block;
		padding: 5px;
		margin: 5px;
		width: 95%;
		clear: both
	}

	.deskripsi {
		margin: auto
	}

	#pbd-alp-load-posts a:link,
	#pbd-alp-load-posts a:visited {
		margin: 25px 10px
	}

	.scrollmenu {
		margin: 0 10px
	}

	.menusearch {
		display: block;
		margin: 0 0 10px;
		padding: 0 10px;
		width: 100%
	}

	#footer {
		margin: 0
	}
}