:root{
	--fafa:#fafafa;
	--semihitam:#212121;
	--coklatbanget:#725E03;
	--biruandalan:#2980b9;
  --ijogelap:#004040;
  --zhalifunaslogowarna:https://i.ibb.co/8LN9fCn5/Untitled-Photoroom-1.png;
}
/* start dasar | default */
body{
	margin:0;
	padding:0;
	background:var(--fafa);
}
a{
	text-decoration:none;
	color:inherit;
}
i[class^="ri-"], i[class*="ri-"]{line-height:1;transform:translateY(13%);display:inline-block;text-rendering:auto;}
summary::marker{display:none;}
summary::-webkit-details-marker{display:none;}
button{
	outline:none;
	border-style:none;
}
button:focus{outline:none;}
button:hover{cursor:pointer;}
button:disabled{cursor:context-menu;opacity:0.6;}
img[disable],img[disabled]{
  display:none;
}
/* end dasar | default */

/* header */
section.head{
	display:flex;
	margin:23px;
	flex-wrap:wrap;
}
section.head:focus{
  background-image:url("https://i.ibb.co/8D4Yrmpb/1739054770592.jpg");
  background-size:contain;
  background-repeat:no-repeat;
  background-origin:content-box;
  background-position:top right;
}
@media screen and (min-width:300px),(max-width:500px){
	section.head{
		margin-left:5px;
	}
}
div.pitcure{
	float:left;
	margin:10px;
	margin-right:20px;
}
div.pitcure img{
	max-width:100px;
	width:100%;
}
div.pitcure img#wallpaper{
	position: fixed;
  right:8px;
  background:#fafafa;
  opacity:.7;
  z-index:100;
}
div.profil{
	background:;
	padding-left:10px;
	width:90%;
	max-width:400px;
	user-select:none;
}
div.profil h1{
	font-family:"mntserrat", sans-serif;
	color:#212121;
	font-weight:700;
	margin-bottom:0;

}
div.profil p{
	margin-top:5.4px;
	margin-bottom:10px;
	font-family:"montserrat", sans-serif;
  text-transform: capitalize;
  
}
div.profil a.link{
	font-size:19px;
  padding-bottom:3px;
	margin:auto 10px;
	color:#004040;
}
div.profil a.link.instagram{
	margin-left:0;
}
div.profil a.link.instagram:hover{
	background:#be2edd;
	color:var(--fafa);
}
/* div.profil a.link.instagram:hover:after{
	content:"instagram";
	padding-left:4px;
	padding-right:2px;
} */
div.profil a.link.facebook:hover{
	background:#2980b9;
	color:var(--fafa);
}
/* div.profil a.link.facebook:hover:after{
	content:"facebook";
	padding-left:4px;
	padding-right:2px;
} */
div.profil a.link.twitter:hover{
	background:#0abde3;
	color:var(--fafa);
}
/* div.profil a.link.twitter:hover:after{
	content:"twitter";
	padding-left:4px;
	padding-right:2px;
} */
div.profil a.link.linkedin:hover{
	background:#0077b5;
	color:var(--fafa);
}
/* div.profil a.link.linkedin:hover:after{
	content:"linkedin";
	padding-left:4px;
	padding-right:2px;
} */
div.profil a.link.codepen:hover{
	background:#2c3e50;
	color:var(--fafa);
}
/* div.profil a.link.codepen:hover:after{
	content:"codepen";
	padding-left:4px;
	padding-right:2px;
} */
div.profil a.link.threads:hover{
	background:#2c3e50;
	color:var(--fafa);
}
div.profil a.link[disable]{display:none;}
/* end header */

/*tombolan*/
section.badan{
	background:#004040;
  z-index:2;
	height:100%;
	min-height:100vh;
	padding:10px;
  padding-bottom:10px;
  border-radius:20px 20px 0 0;
  background-image:url("https://i.ibb.co/8LN9fCn5/Untitled-Photoroom-1.png");
  background-size:250px;
  background-repeat:no-repeat;
  background-position:bottom right;
  background-origin:content-box;
}
div.tombol-list details{
	display:block;
	width:100%;
	margin-bottom:9px;
}
div.tombol-list details[disabled]{
	display:none;
}
div.tombol-list details summary{
	background:#fafafa;
	text-align:center;
	user-select:none;
	padding:9px;
	border-radius:10px;
	font-family:sans-serif;
	list-style:none;
	list-style-type:none;
}
div.tombol-list details summary:hover{
	cursor:pointer;
  background:var(--coklatbanget);
  color:var(--fafa);
  font-weight:600;
  animation-name:tombol;
  animation-duration:.3s;
  animation-timing-function:ease-in-out;
}
div.tombol-list details summary:focus{
	border:none;
	outline:none;
}

/* isi details */
div.isian{
  display:;
	background:#fafafa;
	margin-top:10px;
	padding-top:15px;
	padding-bottom:15px;
	border-radius:13.2px;
  padding-left:10px;
  padding-right:10px;
}
div.isian p{
  color:var(--semihitam);
}
div.isian p::selection,
div.isian p i::selection{
  background:var(--coklatbanget);
  color:var(--fafa);
}
div.isian p.info{
  padding-bottom:6px;
  border-bottom: var(--biruandalan) 2px solid;
  width: 400px;
  max-width:80%;
  user-select:none;
}
div.isian p.info i[icon]{color: var(--biruandalan);margin-right:5px;}
div.isian a{
  display:inline-block;
  user-select:none;
  background:var(--biruandalan);
  border: var(--biruandalan) 2px solid;
  color: var(--fafa);
  padding:5px;
  margin-top:5px;
  border-radius:4px;
  word-break:keep-all;
}
div.isian a:hover{
  border: var(--biruandalan) 2px solid;
  background: transparent;
  color:var(--biruandalan);
}
div.isian a i{
  margin-right:4px;
}
/* akhir isi details */

/* inside div youtube content box*/
div.youtube.content-box{
	display:;
	background:#fafafa;
	margin-top:10px;
	padding-top:15px;
	padding-bottom:25px;
	border-radius:13.2px;
}
div.youtube.content-box p{
	color:var(--semihitam);
}
div.youtube.content-box span:nth-child(1){
	background:#bda473;
	color:#fafafa;
	padding:3px;
	padding-right:5px;
	padding-left:70px;
	margin-left:auto;
	margin-bottom:10px;
	border-top-right-radius:8.2px;
	border-bottom-right-radius:8.2px;
	display:inline-block;
	user-select:none;
	font-size:20pt;
	font-family:"poppins",sans-serif;
}
@media only screen and (min-width:300px), (max-width:500px){
	div.youtube.content-box span:nth-child(1),
	div.content-box span:nth-child(1){
		font-size:15.2pt;
	}
}
div.youtube.content-box h3{
	text-align:center;
	font-family:"poppins", sans-serif;
	font-size:23.2pt;
	margin-top:10px;
	margin-bottom:0;
	user-select:none;
}
div.youtube.content-box p.selengkapnya{
	text-align:center;
}
div.youtube.content-box p a{
	color:#2980b9;
	font-size:11pt;
	font-family:"poppins", sans-serif;;
	font-weight:500;
	padding-left:5px;
	padding-right:5px;
	padding-bottom:1.1px;
	border:2.3px solid var(--biruandalan);
}
div.youtube.content-box p a:hover{
	background:var(--biruandalan);
	color:#fafafa;
}
div.youtube.content-box p a i{
	margin-left:10px;
}
div.youtube.content-box div,
div.content-box div{
	display:flex;
	justify-content:center;
	margin-left:20px;
	margin-right:20px;
}
div.youtube.content-box div iframe.youtube.podcast{
	height:100%;
	min-height:400px;/* harus ada */
	width:100%;
	max-width:600px;
	border-radius:13.2px;
}
/* akhir inside div youtube content box*/

div.tombol-list button:hover{
  background:var(--coklatbanget);
  color:var(--fafa);
  font-weight:600;
  animation-name:tombol;
  animation-duration:.3s;
  animation-timing-function:ease-out;
}
@keyframes tombol{
  from{background: var(--fafa);color:var(--semihitam)}
  to{background:var(--coklatbanget);color:var(--fafa)}
}
div.tombol-list button{
	display:block;
  position:relative;
	width:100%;
	background:#fafafa;
  color:var(--ijogelap);
	margin-bottom:9px;
	padding:9px;
	font-size:12.3pt;
	border-radius:10px;
}
div.tombol-list button:nth-child(6){
	margin-bottom:0;
}
div.tombol-list button span{
  font-size:10pt;
  background:yellow;
  color:var(--semihitam);
  padding:2px;
  border-radius:3.3px;
  position:absolute;
  top:-7px;
  left:0;
}
div.tombol-list button[del],div.tombol-list button[delete]{
  display:none;
}
/* akhir tombol list */

/*credit*/
footer.credit{
  padding:10px;
	text-align:center;
	background:var(--coklatbanget);
	color:#fafafa;
	font-family:sans-serif;
}
footer.credit::selection{
	background:var(--ijogelap);
}
footer.credit a{
	text-decoration:underline;
}
footer.credit a::selection{
	background:#fafafa;
	color:var(--coklatbanget);
	padding-left:10px;
}