body {
	background: radial-gradient(circle at center, #FFB347, #FFA07A);
	background-color: #FFE8B6;
}
body::before {
	content: 'PUSS in BOOTS';
	color : #8B0000;
	font-family: 'Haettenschweiler, sans-serif';
	font-size: 72px;
	display: flex;
	justify-content: center;
	transform: translateY(150%);
}
body::after {
	content: 'Lie, Samuel M K';
	color : #8B0000;
	font-family: Haettenschweiler, sans-serif;
	font-size: 24px;
	display: flex;
	justify-content: center;
	transform: translateY(650%);
}
/* Bisa menampilkan image jika da filenya
body::after {
	content: '';
	position: fixed;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	z-index : -1;
	background-image: url('puss-background-stand.jpg');
	background-size: cover;
}*/

/*ADD COLOR CHANGE KE KITTY SOFTPAWSSS?!!*/
/*change the parentsbox too?*/
/*coba add background image lain kali
background-image: url('puss-background-stand.jpeg');*/

.parentsbox {
	background: conic-gradient(from 0deg at 50% 50%, #8B0000, #E25822, #8B0000);
	width: 300px;
	height: 300px;
	position: relative;
	margin: 0 auto;
	transform: translate(0%, 50%);
	display: flex;
	justify-content: center;
	border-radius: 20%;
	border: solid 10px #D7F3D7;
}
.parentsbox:hover {
	background: conic-gradient(from 180deg, #61b7fb 0%, #00ff00 50%, #61b7fb 100%);
}
.parentsbox:hover::before {
	content: "KITTY";
	color : black;
}
/*tidak nested/cascade, jadi bisa langsung ke pighead, pigear, dkk*/
.parentsbox:hover .pighead { 
	background-color: black;
}
.parentsbox:hover .pighead::before {
	background-color: #F5F5F5;
}
.parentsbox:hover .pigear {
	border-color: transparent black transparent transparent;
}
.parentsbox:hover .pigeye {
	background-color: #61b7fb;
} 

.parentsbox::before {
	content: "PUSS";
	color : #8B0000;
	font-family: Impact, sans-serif;
	transform: translate(10%, 87%);
	font-size: 24px;
}

.pighead {
	/*warna lama -> #E58C56*/
	background-color: #FF6600;
	width: 210px;
	height: 180px;
	position: absolute;
	margin: 0 auto;
	border-radius: 50% 50% 50% 50% / 65% 65% 35% 35% ;
	transform: translate(0%, 30%);
	z-index : 1;
}

.pighead::before {
	content: "";
	background-color: #FFDAB9 ;
	width: 50%;
	height: 45%;
	transform: translate(50%, 120%);
	border-radius: 50% 50% 50% 50% / 19% 24% 76% 81% ;
	display: block;
	position: absolute;
	z-index: 3;
}

.pigear {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 75px 75px 0;
	border-color: transparent #FF6600 transparent transparent;
	position: absolute;
}

.pigear::before {
	content : "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 45px 45px 0;
	border-color: transparent #F5DEB3  transparent transparent;
	position: absolute;
	z-index : 5;
}

.ear1 {
	right: 55%;
	top: 9.5%;
	transform: rotate(-180deg) skewY(-20deg);
}

.ear2 {
	left: 56%;
	top: 9%;
	transform: rotate(110deg) skewY(-20deg);
	position: absolute;
}

.ear1::before {
	content : "";
	left : 47px;
	top: 10px;
	transform: rotate(240deg) skewY(-20deg);
	position: absolute;
}

.ear2::before {
	content : "";
	left : 11px;
	top: 4px;
	transform: rotate(19deg) skewY(-20deg);
	position: absolute;
}
/* tidak jadi, masih terikat dengan sifat ear yang z-indexnya di bawah head
.pigear::after {
	content: "";
	width : 75px;
	height : 25px;
	border-top: 2px solid white;
	position: absolute;
	border-radius: 50%;
	z-index: 20;
}
.ear1::after {
	content: "";
	transform: translate(55%, 30%) rotate(180deg);
}
.ear2::after {
	content: "";
	transform: translate(60%, 50%) rotate(-90deg);
}*/

.pigeye {
	background-color: #00FF00;
	position: absolute;
	width: 55px;
	height: 45px;
	margin-left: -40px;
	z-index: 3;
	
	animation: blinking 5s ease-in infinite;
	/*ease ada velocity masing"*/
}

.pigeye::before {
	content : "";
	background-color: black;
	position: absolute;
	width: 25px;
	height: 43px;
	z-index: 2;
}
.eye1::before {
	content : "";
	transform: translate(23px, 1px);
	border-radius: 2% 98% 50% 50% / 29% 48% 52% 71%;
}
.eye2::before {
	content : "";
	transform: translate(8px, 1px);
	border-radius: 98% 2% 50% 50% / 48% 29% 71% 52%;
}

.pigeye::after {
	content : "";
	background-color: white;
	position: absolute;
	width: 8px;
	height: 8px;
	z-index: 2;
	border-radius: 50% 50% 50% 50%;
}
.eye1::after {
	content: "";
	transform: translate(40px, 20px);
}
.eye2::after {
	content: "";
	transform: translate(25px, 20px);
}
.eye1 {
	top: 35%;
	left: 40%;
	border-radius: 30% 70% 45% 55% / 37% 76% 24% 63% ;
}

.eye2 {
	top: 35%;
	left: 69%;
	border-radius: 70% 30% 55% 45% / 76% 37% 63% 24%;
}

@keyframes blinking { 
	/*usual 0%-100%, bisa from -> to dalam persen*/
	0% {
		transform: scaleY(0);
	}
	10% {
		transform: scaleY(0);
	}
	15% {
		transform: scaleY(1);
	}
	48% {
		transform: scaleY(1);
	}
	50% {
		transform: scaleY(0);
	}
	52% {
		transform: scaleY(1);
	}
	90% {
		transform: scaleY(1);
	}
	100% {
		transform: scaleY(0);
	}
}

.pignose {
	position: absolute;
	width : 12%;
	height : 5%;
	background-color: #F9B1C4;
	top: 50%;
    left: 44%;
	border-radius: 50% 50% 50% 50% / 20% 20% 80% 80%;
	z-index : 3;
}

.pignose::before, .pignose::after {
	content: "";
	width : 75px;
	height : 25px;
	border-top: 2px solid white;
	position: absolute;
	border-radius: 50%;
	z-index: 5;
}
.pignose::before {
	content: "";
	transform: translate(45%, 30%) rotate(5deg);
	animation: moving1 3s ease-in infinite;
}
@keyframes moving1 {
	0% {
		transform: translate(45%, 30%) rotate(5deg);
	}
	50% {
		transform: translate(45%, 50%) rotate(10deg);
	}
	100% {
		transform: translate(45%, 30%) rotate(5deg);
	}
}
.pignose::after {
	content: "";
	transform: translate(-95%, 30%) rotate(-5deg);
	animation: moving2 3s ease-in infinite;
}
@keyframes moving2 {
	0% {
		transform: translate(-95%, 30%) rotate(-5deg);
	}
	50% {
		transform: translate(-95%, 50%) rotate(-10deg);
	}
	100% {
		transform: translate(-95%, 30%) rotate(-5deg);
	}
}
.pigsmile {
	width : 25px;
	border-top: 2px solid black;
	position: absolute;
	transform: translate(-35%, 800%) rotate(90deg);
	z-index: 2;
}

.pigsmile::before {
	content: "";
	width: 40px;
	height: 13px;
	position: absolute;
	border-top: 2px solid black;
	transform : translate(6%, -190%)rotate(90deg);
	border-radius: 50%;
}
.pigsmile::after {
	content: "";
	width: 40px;
	height: 13px;
	position: absolute;
	border-top: 2px solid black;
	transform : translate(-5%, 65%) rotate(90deg);
	border-radius: 50%;
}

p {
	display: none;
}