/*
Theme Name: AST Super Trouper CABANG LOVELY
Theme URI: https://anandastoon.com
Description: Tema Wordpress yang terinspirasi lagu ABBA.
Version: 1.0
Author: Ananda Maulana Ilhami
Author URI: https://anandastoon.com
*/
@font-face {
    font-family: "bona";
    src: url("aset/font/bona-nova.woff2") format('woff2');
	font-display: swap;
}
@font-face {
    font-family: "caveat";
    src: url("aset/font/caveat.woff") format('woff');
	font-display: swap;
}
@font-face {
    font-family: "judson";
    src: url("aset/font/judson.woff2") format('woff2');
	font-display: swap;
}
@font-face {
    font-family: "judson";
    font-weight: bold;
    src: url("aset/font/judson-b.woff2") format('woff2');
	font-display: swap;
}
@font-face {
    font-family: "ysabeau";
    font-weight: bold;
    src: url("aset/font/ysabeau-b.woff2") format('woff2');
	font-display: swap;
}
@font-face {
    font-family: "ysabeau";
    font-weight: bold;
    font-style: italic;
    src: url("aset/font/ysabeau-bi.woff2") format('woff2');
	font-display: swap;
}
@font-face {
    font-family: "ysabeau";
    font-style: italic;
    src: url("aset/font/ysabeau-i.woff2") format('woff2');
	font-display: swap;
}
@font-face {
    font-family: "ysabeau";
    src: url("aset/font/ysabeau.woff2") format('woff2');
	font-display: swap;
}
:root {
	--bg: #001e56;
}
body {
	font-family: 'ysabeau', Arial, Helvetica, sans-serif;
	line-height: 1.5;
	background-color: var(--bg);
	color: #e9eff3;
	--n-aksen-hover: #1ce0ff;
	--n-aksen: #2af8fd;
	--sekunder: #ff80ff;
	--sekunder-hover: #ff5cff;
	--fg: rgb(185, 237, 0);
	font-size: 1.15rem;
}
h1 {font-family: 'bona', Arial, Helvetica, sans-serif;}
h2,h3,h4,h5 {font-family: 'judson', Arial, Helvetica, sans-serif;}
a, #ast-entry-judul .ast-meta-comment a {color: var(--n-aksen);}
a:hover, #ast-entry-judul .ast-meta-comment a:hover {color: var(--n-aksen-hover);}
a:visited, #ast-entry-judul .ast-meta-date a {color: var(--sekunder);}
a:visited:hover, #ast-entry-judul .ast-meta-date a:hover {color: var(--sekunder-hover);}
blockquote {
	font-family: 'caveat', 'Times New Roman', Times, serif;
	font-size: 1.8rem;
	border-top: 4px solid var(--fg);
	border-bottom: 4px solid var(--fg);
	margin: 2rem 0;
	padding: 0 1rem;
	position: relative;
}
blockquote::before, blockquote::after {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	font-family: 'bona';
	content: '';
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 2rem;
	text-align: center;
	background-color: var(--fg);
	color: black;
	pointer-events: none;
}
blockquote::before {
	top: -1.2rem;
}
blockquote::after {
	bottom: -1.2rem;
}
blockquote p {
	margin: 1.5rem auto;
}
blockquote p::before, blockquote p::after {
	position: absolute;
	text-align: center;
	width: 100%;
	color: var(--bg);
	left: 0;
	right: 0;
	font-family: 'judson', Courier, monospace;
	font-size: 5rem;
	pointer-events: none;
}
blockquote p::before {
	top: -2.6rem;
	content: open-quote;
}
blockquote p::after {
	bottom: -5rem;
	color: var(--bg);
	content: close-quote;
	z-index: 1;
}
.top-buffer {margin-top: 2rem;}
.nol-buffer {margin-top: 0;}
.p1 {padding: 1rem} .p1s {padding: auto 1rem}
.c {text-align: center;}
.kn {text-align: end;}
.fkn {margin-left: auto;}
.kr {text-align: start;}
.cv {display: flex; align-items: center; flex-wrap: wrap;}
.cv > * {flex-shrink: 0; width: 100%;}
.ast-fluid {
	max-width: 800px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.ast-grid-entry {
	margin-bottom: 2rem;
	border: 2px var(--fg) solid;
}
.ast-grid-entry-k {
	display: flex;
	align-items: center;
	overflow: hidden;
}
.ast-grid-entry-judul {
	align-self: stretch;
	width: 45%;
	font-size: 1.05rem;
	position: relative;
	z-index: 1;
}
.ast-grid-entry-judul::after {
	content: '';
	height: 100%;
	width: 150%;
	right: 0;
	position: absolute;
	transform: skewX(-8deg);
	background-color: var(--fg);
	top: 0;
	z-index: -1;
}
.ast-grid-entry-judul, .ast-grid-entry-pos {
	align-content: center;
	padding: 0 1rem;
}
.ast-grid-entry-pos {
	width: 55%;
}
.ast-grid-entry-pos {
	padding: 1rem;
	padding-left: 1.6rem;
}
.ast-grid-entry-judul a {color: var(--bg);}
.ast-grid-entry-judul a:hover {color: var(--bg); text-decoration: underline;}
.ast-grid-entry-judul h2 {margin: 0.25rem auto}
.ast-grid-entry-link {margin-top: 0.8rem;}

#ast-title-alt {margin-bottom: 4px; font-size: 2rem;}
#ast-title-alt a {text-decoration: none;}
#ast-desc-alt {margin-top: 4px; color: #CCC}
#ast-body {position: relative}
article h2 {
	margin-top: 3.6rem;
	margin-bottom: 1.8rem;
	padding: 0.6rem;
	padding-left: 1.75rem;
	position: relative;
	grid-gap: 1rem;
	width: 100%;
}
article h2::before {
	content: '';
	position: absolute;
	aspect-ratio: 1/2;
	clip-path: polygon(0 0,100% 50%,0 100%);
	background: var(--fg);
	top: 0;
	bottom: 0;
	left: 0;
	width: 1rem;
	height: 3rem;
	margin: auto;
}
article h2::after {
	content: ' ';
	position: absolute;
	width: 100%;
	right: 0;
	max-width: max(4rem, 40%);
	bottom: 0;
	left: 0;
	margin: auto;
	height: 4px;
	background: linear-gradient(to right, var(--sekunder), var(--sekunder) 48%, var(--bg) 48.01%, var(--bg) 52%, var(--n-aksen) 52.01%);
}
#ast-likes-plugin {margin-top: 2rem !important;}
.ast-like-teks {
	color: var(--fg) !important;
}
#ast-entry-title {margin-bottom: 2.5rem;}
#ast-sub-meta {
	display: flex;
	justify-content: space-around;
	text-align: center;
	align-items: center;
}
.ast-meta-date, .ast-meta-read, .ast-meta-comment {
	width: 33.33%;
	margin: 0.2rem 0.5rem;
	font-family: 'judson', Arial, Helvetica, sans-serif;
}
@keyframes lodingmuter {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}
.ast-entry-neuro {
	max-width: 720px;
    border-radius: 20px;
    margin: 2rem auto;
	padding: 0 1rem;
}
#ast-entry-judul {
	text-align: center;
	padding: 1.2rem;
	padding-bottom: 2rem;
	margin-bottom: 4rem;
	border: 4px var(--fg) solid;
}
.neuro-div {
	display: flex;
	gap: 1rem;
	justify-content: center;
	align-items: center;
	margin: 2rem auto;
}
.neuro-div-1, .neuro-div-3 {
	width: 50px;
	height: 5px;
}
.neuro-div-2 {
	width: 20px;
	height: 20px;
	background-color: var(--fg);
}
.neuro-div-3 {background-color: var(--n-aksen);}
.neuro-div-1 {background-color: var(--sekunder);}

.ast-neuro-nav-t {
	position: relative;
	overflow: hidden;
	color: var(--bg);
	font-size: 1.2rem;
	min-width: 3.5rem;
}
.ast-neuro-nav-t::before {
	background-color: var(--fg);
	width: 120px;
	height: 100%;
	position: absolute;
	content: ' ';
	z-index: -1;
	transition: transform 0.2s;
}
#ast-neuro-nav-seb .ast-neuro-nav-t {
	padding: 0 1.6rem 0.2rem 0.5rem;
}
#ast-neuro-nav-seb .ast-neuro-nav-t::before {
	right: 20px;
	transform: skewX(30deg);
}
#ast-neuro-nav-seb:hover .ast-neuro-nav-t::before {transform: skewX(30deg) translateX(8px);}
#ast-neuro-nav-ses .ast-neuro-nav-t {
	padding: 0 0.5rem 0.2rem 1.6rem;
}
#ast-neuro-nav-ses .ast-neuro-nav-t::before {
	transform: skewX(-30deg);
	left: 20px;
}
#ast-neuro-nav-ses:hover .ast-neuro-nav-t::before {transform: skewX(-30deg) translateX(-8px);}
#ast-neuro-nav-ses .ast-neuro-nav-t {text-align: right;}
.ast-neuro-nav-p {
	color: white;
	font-family: 'judson', 'Times New Roman', Times, serif;
}
.ast-neuro-nav-k {display: flex;}
#ast-neuro-nav-seb {justify-content: flex-start;}
#ast-neuro-nav-ses {justify-content: flex-end;}
.ast-neuro-nav {
	display: flex;
	max-width: max-content;
	border-bottom: solid var(--fg) thin;
	align-items: flex-end;
	margin-bottom: 1.5rem;
}
.ast-neuro-nav {
	justify-content: space-between;
}

/* Elemen Komentar */
#reply-title {
	border-bottom-color: var(--fg);
}
#ast-comment {text-align: initial;}
#comment-count {
	font-family: 'caveat', Times, serif;
	padding-right: 0.8rem;
	margin-right: 0.2rem;
	background-image: linear-gradient(135deg, var(--sekunder) 50%, var(--sekunder-hover));
}
#comment-count::before {
	right: 0rem;
	text-shadow: none;
	color: var(--n-aksen)
}
.comment-form-author, .comment-form-email, .comment-form-url, .comment-form-comment {
	margin-left: 0;
	padding: 0;
	margin-top: 3rem;
	margin-bottom: 2rem;
}
.comment-form-author input, .comment-form-email input, .comment-form-url input, .comment-form-comment textarea {
	border: 4px var(--fg) solid;
	color: white;
	background-color: transparent;
	border-radius: 0;
}

.comment-form-author label, .comment-form-email label, .comment-form-url label, .comment-form-comment label {
	overflow: hidden;
	background-color: transparent;
	border-radius: 0;
	color: var(--bg);
	font-family: 'judson', 'Times New Roman', Times, serif;
	margin: 0;
	font-size: 1rem;
	top: calc(-1rem - 8px);
	position: absolute;
	z-index: 1;
	max-width: 130px;
	text-align: start;
}
.comment-form-author label::before, .comment-form-email label::before, .comment-form-url label::before, .comment-form-comment label::before {
	background-color: var(--fg);
	width: 120%;
	height: 100%;
	right: 20px;
	position: absolute;
	transform: skewX(30deg);
	content: ' ';
	z-index: -1;
}
.commentlist .vcard img.avatar, .commentlist .vcard:hover img.avatar {
	box-shadow: -5px -5px 0px var(--n-aksen), 5px 5px 0px var(--sekunder);
}
.commentlist .vcard img.avatar:hover {
	box-shadow: 5px 5px 0px var(--n-aksen), -5px -5px 0px var(--sekunder);
}
.commentlist .bypostauthor > div .fn::after {border-left-color: var(--sekunder); color: var(--fg)}

.commentlist .comment-meta a, #astl-popup a {color: var(--n-aksen);}
.commentlist .even > .children {border-color: var(--sekunder);}
.commentlist .odd > .children {border-color: var(--n-aksen);}
#ast-comment .commentlist .reply a {
	background-color: transparent;
	border: var(--fg) solid 2px;
	color: var(--n-aksen);
	border-radius: 0;
	margin-left: 0.8rem;
}
#ast-comment .commentlist .reply a:hover {border-color: var(--n-aksen-hover)}
#ast-comment .commentlist .reply a:active {transform: translateY(2px);}
.commentlist .vcard cite.fn {font-size: 1.5rem;}
#comment-title {
	font-weight: normal;
	font-size: 1.4em;
    color: white;
}
.commentlist .vcard {display: flex;}

#ast-comment input[type='submit'] {
    font-family: 'judson', 'Times New Roman', Times, serif;
	font-weight: bold;
	color: var(--n-aksen);
	background-color: transparent;
	padding: 12px 24px;
    font-size: 1.05rem;
	border: 2px var(--fg) solid;
	transition: background-color 0.2s;
    cursor: pointer;
	position: relative;
}

#ast-comment input[type='submit']:active {
	transform: translateY(2px);
}
li.widget-container {
    list-style: none;
}
#ast-footer {
	padding-top: 2rem;
	margin-top: 3rem;
	text-align: center;
}
.ast-footer-menu a {color: var(--n-aksen);}
.ast-footer-menu a:hover {color: var(--n-aksen-hover);}
.ast-copyright {
	text-align: center;
	padding: 2rem 1rem;
	font-family: 'bona', Arial, Helvetica, sans-serif;
}
#ast-neuro-hero {
	margin: 1rem;
	padding: 1.5rem 1.2rem;
	min-height: 90vh;
	border: 4px var(--fg) solid;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
#wlu {
	font-family: 'judson', 'Times New Roman', Times, serif;
	font-weight: bold;
	font-size: 1.5rem;
}
#neuro-post-terakhir {
	margin-top: 4rem;
	text-align: center;
	margin-bottom: 2rem;
}
#ast-content-full {padding: 1rem}
.ast-main-title {font-size: 4rem; margin: 1rem auto; color: var(--fg)}
#neuro-karosel {
	height: 8rem;
	position: relative;
}
.nki {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	font-family: 'caveat', 'Times New Roman', Times, serif;
	font-size: 2.5rem;
	display: block;
	will-change: transform;
}

@media screen and (max-width: 540px) {
	body {
		font-size: 1.05rem;
	}
	blockquote {
		font-size: 1.5rem;	
	}
	
	blockquote::before, blockquote::after {
		width: 2rem;
		height: 2rem;
	}
	blockquote::before {
		top: -1.2rem;
	}
	blockquote::after {
		bottom: -1.2rem;
	}
	blockquote p::before, blockquote p::after {
		font-size: 4rem;
	}
	blockquote p::before {
		top: -2.3rem;
		content: open-quote;
	}
	blockquote p::after {
		bottom: -4.2rem;
		color: var(--bg);
		content: close-quote;
		z-index: 1;
	}
	.ast-grid-entry-judul h2 {margin: 0.25rem auto; font-size: 1.3rem;}
	.ast-grid-entry-k {flex-wrap: wrap;}
	.ast-grid-entry-judul {font-size: 1rem;}
	.ast-grid-entry-judul::after {
		transform: skewY(-2deg);
		height: 150%;
		width: 100%;
		top: unset;
		bottom: 0;
	}
	.ast-grid-entry-judul, .ast-grid-entry-pos {
		width: 100%;
		padding: 0.8rem;
	}
	.ast-grid-entry-pos {
		padding-top: 1.4rem;
	}

	#ast-sub-meta {
		flex-wrap: wrap;
	}
	#ast-sub-meta > span {
		width: 100%;
	}
	#ast-entry-title {
		font-size: 1.65rem;
	}
	#ast-entry-judul {
		padding: 1rem;
	}
	.ast-main-title {font-size: 3.4rem;}
	#wlu {font-size: 1.35rem;} 
}