@font-face {font-family: cr-reg; src: url(/extras/ttf/CookieRun\ Regular.ttf);}
@font-face {font-family: cr-bold; src: url(/extras/ttf/CookieRun\ Bold.ttf);}
@font-face {font-family: cr-bold-x; src: url(/extras/ttf/CookieRun\ Black.ttf);}

    body {
		background: url(https://i.ibb.co/TxW5trwN/sorbet-shark-cookie-shrine-bg.png) center/cover fixed white;
		letter-spacing: -0.5px;
		line-height: 20px;
		font-size: 20px;
		font-family: cr-bold-x;
		color: white;
		-webkit-text-stroke: 1px black;
		text-shadow: 0 0 2px black;
		max-width: 1920px;
	}

	/* selection pseudo */
	::-moz-selection { /* Code for Firefox */
	color: white;
	background: #bb781a;
	}
	::selection {
	color: white;
	background: #bb781a;
	}

	p {	color: #ededed;}
	p.soon {color: #9e7252; font-family: cr-reg; font-size: 16px; margin: auto; font-style: italic; justify-self: end; letter-spacing: 0.2px; -webkit-text-stroke: 0; text-shadow: 0; }
	a {color: #ededed; text-decoration: wavy;}
	a:hover {color: white;	}

	/* cookie gacha animation */
	.cookie-animation-container {
		position: fixed;
		top: 2%; left: 8%;
		z-index: 1;
		height: 100vh;
		transform: scale(1.3);
		filter: drop-shadow(0 0 20px white);				
	}
	.cookie-animation-container img {height: 100vh;}

	/* footer */
	footer {
		background: #272447;
		border-top: 3px solid black;
		height: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 10px;
		position: fixed; bottom: 0;
		z-index: 9999;
	}

	/* footer btn */
	a.crk-btn {
		text-align: center;
		text-transform: capitalize;
		text-decoration: none;
		color: white;		
		display: block;
		position: relative;
		padding: 8px;
		margin: 10px;		
		width: 250px;		
		background: #5a5ca0;
		border-top: 3px solid #7b8cec;
		border-bottom: 3px solid #6f71c4;
		outline: 3px solid black;
		border-radius: 15px;
		filter: drop-shadow(0 3px 0 black);
	}
	a.crk-btn::before {
		content: "";
		height: 8px;
		width: 15px;
		rotate: -32deg;
		background: white;
		border-radius: 50%;
		z-index: 1;
		position: absolute;	top: -1px; left: 2px;
	}

	a.crk-btn:hover {transform: scale(1.05);}
	a.crk-btn:active {transform: scale(0.98);}

	/* border screens */
	hr.border-screen-top {
		background: #272447;
		height: 20px;
		width: 100%;
		z-index: 99999 !important;
		position: fixed; top: -2%; left: 0;
		border-bottom: 3px solid black;
	}

	/* page title */
	.page-title-fav-cookie {
		color: white;
		letter-spacing: -1px;
		font-size: 2rem;
		position: fixed; top: 5%; left: 2%;
		z-index: 9999;
	}

	/* exit button */
	a.exit-btn {
		display: flex; align-items: center;
		-webkit-text-stroke: 2px white;
		text-shadow: -4px 0 #000, 0 4px #000, 4px 0 #000, 0 -4px #000, 2px 2px #000, 2px -2px #000, -2px 2px #000, -2px -2px #000, 0 0;
		font-size: 1.8rem;
		font-weight: 900;
		color: white;
		text-decoration: 0;
		padding: 10px 8.5px;

		background: #4da2f6;
		border-top: 3px solid #70d2ff;
		border-left: 3px solid #70d2ff;
		border-bottom: 3px solid #2f64d8;
		border-right: 3px solid #2f64d8;
		border-radius: 100px;
		outline: 3px solid #000000;

		position: fixed; top: 4%; right: 1%;
		z-index: 9999;
	}
	a.exit-btn::before {
		content: "";
		display: block;
		height: 8px;
		width: 10px;
		transform: rotate(-30deg);
		background: #ffffff;
		border-radius: 50%;
		z-index: 1;
		position: absolute;	top: 2px; left: 2px;
	}
	a.exit-btn:hover {transform: scale(1.05);}
	a.exit-btn:active {transform: scale(0.97);}

	/* first encounter button */
	a.first-encounter {
		display: flex; align-items: center;
		font-size: 18px;
		color: white;
		text-decoration: 0;
		padding: 5px 15px;
		border-top: 3px solid white;
		border-bottom: 3px solid #6f6f6fe9;
		outline: 3px solid #232323d4;
		border-radius: 20px;
		background: #ffffff62;
		position: fixed; bottom: 11%; left: 2%;
		z-index: 9999;
	}
	a.first-encounter::before {
		content: "";
		background: url(https://i.ibb.co/6RQHnzxW/Play-Title-Screen-Button.webp) center/contain no-repeat;
		height: 1.5rem;
		width: 1.5rem;
		display: block;
		position: relative; left: 0;
		margin-right: 10px;
	}
	a.first-encounter:active {transform: scale(0.97);}
	
	/* card-body */
	.card-body {
		background: #393467;
		border-top: 2px solid #5c559e;
		border-left: 2px solid #5c559e;
		border-bottom: 2px solid #494381;
		border-right: 2px solid #494381;
		outline: 3px solid black;
		border-radius: 15px;
		filter: drop-shadow(0 2px 0 black);
	}
	.card-body::before {
		content: "";
		height: 8px;
		width: 10px;
		rotate: -30deg;
		background: #6b63b2;
		border-radius: 50%;
		z-index: 1;
		position: absolute;	top: 2px; left: 2px;
	}


	.container-body {
		margin: 20px auto;
		padding: 20px;
		background: #e3d3c6;
		border: 3px solid #865e42;
		border-radius: 20px;
		-webkit-text-stroke: 0.8px black;
		text-shadow: 0 0 1px black;
			
		header {
			display: flex;
			align-items: center;
			position: relative;
			background: #393467;
			border-top: 2px solid #5c559e;
			border-left: 2px solid #5c559e;
			border-bottom: 2px solid #494381;
			border-right: 2px solid #494381;
			border-top-left-radius: 17px;
			border-top-right-radius: 17px;
			outline: 3px solid black;
			height: 50px;
			padding: 10px;
			margin: -20px;
			margin-bottom: 20px;
		}

		header::before {
			content: "";
			display: block;
			height: 8px;
			width: 10px;
			transform: rotate(-30deg);
			background: #6b63b2;
			border-radius: 50%;
			z-index: 1;
			position: absolute;	top: 2px; left: 2px;
		}
		
	}

	.container-body-2 {
		background: #262626d1;
		margin: 20px auto;
		padding: 20px;
		border: 3px solid black;
		border-radius: 30px;
		-webkit-text-stroke: 0.8px black;
	}

	.container-body-3 {
		background: #33344b;
		margin: 20px auto;
		padding: 20px;
		border: 3px solid #484a67;
		outline: 3px solid black;
		border-radius: 20px;
		-webkit-text-stroke: 0.8px black;

		header {
			display: flex;
			align-items: center;
			position: relative;
			background: #211f2a;
			border-top: 3px solid #3d3b60;
			border-left: 3px solid #3d3b60;
			border-right: 3px solid #3d3b60;
			border-top-left-radius: 19px;
			border-top-right-radius: 19px;
			height: 50px;
			padding: 10px;
			margin: -22.5px;
			margin-bottom: 20px;

			p {	margin: 0;}
	
			p::before {
				content: "✦";
				color: #a1a9d8;
				font-size: 25px;
				margin-right: 10px;
			}
		}

	}


/*============================================================
////////////////////////	content		//////////////////////// 
==============================================================*/

	.container-all {
		z-index: 99;
		background: linear-gradient(to right, transparent, #00000082, #000000c9);
		justify-self: end;
		min-height: 100vh;
		width: 650px;
		padding: 40px 50px 150px 50px;
		position: relative;
	}

	/* title name */
	h1.title-name {
		z-index: 9999999999;
		position: sticky;
		top: 60px;
		font-size: 2rem;
		text-align: center;
		padding: 1px;
		background: linear-gradient(to right, transparent, #000000bd, #000000bd, transparent);
		
		/* cookie rarity */
		img.cookie-rarity {
			height: 35px;
			display: flex;
			margin: auto;
			margin-top: -13px;
			margin-bottom: -22px;
		}

		img {
			height: 2.2rem;
			position: relative; top: -1px;
		}
	}
	h1.title-name hr {
		display: block;
		border: 0;
		height: 1px;
		background: linear-gradient(to right, transparent, #ce9805, #ce9805, transparent);
	}
	h1.title-name hr.top {margin-bottom: 15px; margin-top: 5px;}
	h1.title-name hr.bottom {margin-top: 15px; margin-bottom: 5px;}

	/* title quote */
	h3.title-quote {
		margin-top: 30px;
		text-align: center;
		font-style: italic;
	}
	h3.title-quote:before {content: open-quote; margin: 0 5px; font-size: 2rem;}
	h3.title-quote:after {content: close-quote; margin: 0 5px; font-size: 2rem;}

	/* cookie soulstone */
	.cookie-soulstone {
		margin: 15px auto;
		display: flex; align-items: center;
		img {
			margin-right: 10px;
			width: 150px;
			height: 150px;
			object-fit: contain;
		}
		p {margin: 0;}
	}

	/* cookie skill */
	.cookie-skill {

		header {
			display: flex;
			position: relative;
			padding-bottom: 10px;
			margin-bottom: 10px;
			border-bottom: 3px groove #595959;
			
			img {
				height: 100px;
				width: 100px;
				margin-right: 10px;
				object-fit: contain;
			}

			.info {		
				h4 {
					color: #e8ffa2;
					display: inline-block;
					}
				p {	display: block;	}
			}

			.time {
				font-size: 15px;
				text-align: center;
				height: 25px;
				min-width: 60px;
				padding: 1px 5px 1px 15px;
				position: absolute;	right: 0; bottom: 10px;
				background: black;
				border: 2px solid #686868;
				border-radius: 20px;
			}

			.time::before {
				content: "";
				display: block;
				position: absolute;	left: -20%;	top: -1px;
				width: 30px;
				height: 25px;
				background: url(https://i.ibb.co/bSqLTK2/Icon-clock-crk.webp) center/contain no-repeat;
			}
		}

		p {
			font-size: 16px;
			line-height: 18px;
		}

		.skill-info {
			p {
				font-size: 15px;
				color: #aaaaaa;
				margin: 0;
			}
		}
	}

	/* my thoughts */
	.my-thoughts {				

		.cookie-gif-container {
			width: 200px;
			height: 300px;
		}	

		.cookie-gif-container img:hover {filter: drop-shadow(0 0 5px white);}

		p {
			color: white;
			font-size: 18px;
			margin-bottom: 5px;
			z-index: 10 !important;
		}

		img.background {
			width: 100%;
			position: absolute;
			z-index: 0;
		}

	}

	/* cookie costumes */
	.cookie-costumes {
		display: flex;
		justify-content: space-between;
		
		img {
			width: 170px;
			height: 170px;
			object-fit: contain;
			transition: 0.2s ease;
		}

		img:hover{
			transform: scale(1.05);
		}

		p {
			font-size: 17px;
			-webkit-text-stroke: 1px black;
			text-align: center;
			width: 160px;
			padding: 5px;
			background: #393467;
			border-top: 2px solid #5c559e;
			border-left: 2px solid #5c559e;
			border-bottom: 2px solid #494381;
			border-right: 2px solid #494381;
			outline: 3px solid black;
			border-radius: 15px;
			filter: drop-shadow(0 2px 0 black);
		}

		p::before {
			content: "";
			display: block;
			height: 5px;
			width: 8px;
			transform: rotate(-30deg);
			background: #6b63b2;
			border-radius: 50%;
			z-index: 1;
			position: absolute;	top: 2px; left: 2px;
		}
	}

	/* in game screenshots */

	/* cookie card info */
	.cookie-card-info {
		display: flex;
		padding: 10px;
		position: relative;
		font-size: 16px;

		p.quote-title {
			font-size: 2rem;
			font-style: italic;
			-webkit-text-stroke: 1px black;
			filter: drop-shadow(3px 3px 0 black);
			position: absolute; top: -10px; right: 10px;
		}
		p.quote-title:before {content: open-quote; margin: 0 5px; font-size: 2rem; font-style: italic;}
		p.quote-title:after {content: close-quote; margin: 0 5px; font-size: 2rem; font-style: italic;}

		ul {
			padding: 10px;
		}
		li.list-group-item {
			width: 250px;
			padding: 5px;
			display: flex; justify-content: space-between;
			background: 0;
			border: 0;
			border-bottom: 3px groove #595959;

			img {
				height: 16px;
				object-fit: contain;
			}
		}

		img.cookie-profile {			
			width: 250px;
			object-fit: contain;
		}
	}

	/* credits section */
	.credits-section {
		font-family: cr-reg;
		font-size: 16px;
		text-align: end;
		-webkit-text-stroke: 0;
		text-shadow: 0;

		padding: 10px;
		margin-top: 100px;
		margin-bottom: -100px;

		p {
			font-size: 12px;
			margin: 0;
		}
	}

	.end-container {
		height: 150px;
		width: 650px;
		background: linear-gradient(to bottom, transparent, #000000);
		margin: 5px 0 -120px -50px;
	}

	img.pagedoll-end {
		width: 300px;
		height: 300px;
		object-fit: contain;
		position: absolute;
		left: -30%;
		bottom: 1%;
		z-index: 99;
	}
	img.pagedoll-end:hover {
		animation: bounce 0.5s ease forwards;
	}
	@keyframes bounce {
		0% {transform: translateY(0);}
		20% {transform: translateY(5px);}
		70% {transform: translateY(-10px);}
	}

/*===== MUSIC PLAYER BY GLENTHEMES =====*/
	#glenplayer02 {
		background: linear-gradient(to left, #ffec9e, #f5bc2a);
		border: 3px solid #f2f255;
		border-right: 0 transparent;
		outline: 3px solid black;
		border-radius: 20px;

		padding: 15px;
		font-size: 20px;
		text-shadow: 0 transparent;

		position: relative;
		display: flex;
		z-index: 99;
	}
	#glenplayer02 a {text-decoration:none;}	
	#glenplayer02 > div {align-self:center;}	
	.labeltext::before {
		content: "✦";
		color: #ffff63;
		font-size: 25px;
		margin-right: 10px;
		-webkit-text-stroke: 1px #b06015;
	}
	.music-controls {
		user-select: none;
		width: 70px;
		font-size: 25px;
		cursor:pointer;
		text-align: center;
		position: absolute; right: 6px;
		text-shadow: 0 transparent;
		-webkit-text-stroke: 2px black;
	}
	.playy, .pausee {
		outline: 3px solid black;
		border-radius: 15px;
		padding: 4px;
		color: white;
		position: relative;
	}	
	.playy {
		background: #7bcd11;
		border-top: 5px solid #90f11a;
		border-bottom: 4px solid #049c00;
		outline: 3px solid #025114;
	}	
	.pausee {
		background: #38A5E8;
		border-top: 5px solid #55c4f8;
		border-bottom: 4px solid #0064cb;

		display:none;
	}
	.playy:active {	transform: scale(0.95);}
	.pausee:active {transform: scale(0.95);}
	.playy::before {
		content: "";
		height: 8px;
		width: 13px;
		rotate: -35deg;
		background: white;
		border-radius: 50%;
		z-index: 1;
		position: absolute;	top: -1.5px; left: 1.5px;
	}
	.pausee::before {
		content: "";
		height: 8px;
		width: 13px;
		rotate: -35deg;
		background: white;
		border-radius: 50%;
		z-index: 1;
		position: absolute;	top: -1.5px; left: 1.5px;
	}