@charset "UTF-8";
/**
 * April 26, 2023
 * @ShadowShahriar's Profile
 * MIT | More info. in the details view
 *
 * originally created on September 20, 2020
 * (rev. 1) November 24-26, 2021
 * (rev. 2) January 5, 2022 (patch: profile links)
 * (rev. 3) February 16, 2022 (patch: sidebar activity count)
 * (rev. 4) April 28-30, 2022 (rewrite, remove dead code, patch: profile links, sidebar activity count & font-size)
 * (rev. 5) May 6, 2022 (patch: link color, pagination button SVG)
 * (rev. 6) July 15, 2022 (patch: sidebar link emojis, color animation to sidebar link)
 *
 */
.pen-thumbnail {
	background:
		url('https://blog.codepen.io/wp-content/uploads/2012/06/Button-White-Large.png') no-repeat scroll center/50vmin
			50vmin,
		linear-gradient(to bottom, #0000, rgba(0, 0, 0, 0.6)) no-repeat 0 0/100% 100%,
		linear-gradient(#0ebeff 0 0);
	height: 100vh;
}

html {
	-webkit-tap-highlight-color: #0000;
}

::-moz-selection {
	background: #181a1f;
	color: #fff;
}

::selection {
	background: #181a1f;
	color: #fff;
}

.profile-grid-pens > .item-grid > article > div iframe {
	display: none !important;
}

.profile-grid-pens .hide-owner:not(.featured-pen) .iframe-wrap > iframe {
	display: none;
}

#profile-content-wrap {
	margin: 0 0 30px 0;
}

#profile-header {
	background-color: #151027;
	box-shadow: 0 1vmax 2vmax 0 rgba(0, 0, 0, 0.4);
}

article[data-component='Item'] > div:nth-child(3) > footer button,
article[data-component='Item'] > div:nth-child(3) > footer a {
	padding: 6px 12px;
	font-family: 'Consolas', 'Lucida Console', monospace;
	font-weight: bold !important;
}

#profile-location-and-bio {
	margin: 0 1em;
	font-weight: bold;
}

#profile-bio {
	font-size: 1.1rem;
	word-spacing: 0.1em;
}

#profile-location,
.profile-location {
	background-image: linear-gradient(to right, #66687c 47%, #9b9dad 0);
	background-size: 100% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

body {
	transition: padding-left cubic-bezier(0.38, 0.01, 0.09, 0.98) 400ms;
	will-change: padding-left;
}

h1#profile-name-header > span {
	background-image: linear-gradient(to right, #0ebeff 1.6ch, #fff 0);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

#profile-username,
#profile-followers,
#profile-following {
	font-weight: bold;
	white-space: nowrap;
}

.profile-nav-1 {
	border-bottom: 0;
}

.profile-nav-2 {
	background: #2c303a4a;
	padding: 10px;
	border-radius: 7px;
}

.profile-nav-2 .explore-tab {
	padding: 7px;
	font-weight: bold;
}

.profile-nav-1 .explore-tab {
	position: relative;
	font-weight: bold;
	padding-right: 0;
	text-indent: 20px;
	left: -20px;
}

.profile-nav-1 .explore-tab::first-letter {
	font-family: 'Telefon', sans-serif;
	font-size: 1.5em;
	padding-right: 1px;
}

.profile-nav-1 .explore-tab.active:nth-child(1)::first-letter {
	color: #0ebeff;
}

.profile-nav-1 .explore-tab.active:nth-child(2)::first-letter {
	color: #ffdd40;
}

.profile-nav-1 .explore-tab.active:nth-child(3)::first-letter {
	color: #ae63e4;
}

.profile-nav-2 a:not(.explore-tab).active {
	font-weight: bold;
	padding: 3px 15px;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 20px;
	margin-left: 10px;
	color: #fff;
}

@media (hover: hover) {
	html ::-webkit-scrollbar {
		width: 16px;
	}

	html ::-webkit-scrollbar-thumb {
		border-radius: 20px;
		border: 4px solid #0000;
		height: 80px;
		background-clip: content-box;
	}

	html ::-webkit-scrollbar-track {
		background-color: #0000;
	}

	html ::-webkit-scrollbar-thumb {
		background-color: #0ebeff;
	}

	html ::-webkit-scrollbar-thumb:hover {
		background-color: #41ccff;
	}

	html ::-webkit-scrollbar-thumb:active {
		background-color: #005574;
	}

	html ::-webkit-scrollbar-thumb:window-inactive {
		background-color: #404354;
	}

	html ::-webkit-scrollbar-thumb:hover:window-inactive {
		background-color: #565a71;
	}

	@supports not (-moz-appearance: none) {
		.item-grid div[data-picture='true'] > picture > img,
		.item-grid div[data-picture='true'] > picture > source {
			-ms-interpolation-mode: nearest-neighbor;
			image-rendering: -moz-crisp-edges;
			image-rendering: pixelated;
		}
	}
}
@media (max-width: 550px) {
	#followers-count,
	#following-count {
		font-weight: bold;
	}

	.profile-header-right {
		border-top-color: #0ebeff;
	}

	#profile-image,
	.profile-avatar {
		top: 68px;
		border: 0;
		border-radius: 50%;
		background-color: #000;
		box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.6);
	}

	#profile-name,
	.profile-name {
		padding: 5px 0 0 110px;
	}

	h1#profile-name-header {
		margin: 0 0 1px;
	}

	h1#profile-name-header > span:first-of-type {
		font-size: 2.7rem;
	}

	#links-and-stats {
		background-color: #131417;
	}

	#profile-links {
		padding: 8px 0;
	}
	#profile-links > a {
		text-align: center;
	}
	#profile-links > a:first-of-type {
		text-align: left;
	}
	#profile-links > a:last-of-type {
		text-align: right;
	}

	article[data-component='Item'] > div:nth-child(3) > footer button,
	article[data-component='Item'] > div:nth-child(3) > footer a {
		padding: 9px 17px;
		margin-right: 8px;
	}

	#profile-location-and-bio {
		margin: 8px 1em;
	}

	.profile-nav-1 .explore-tab {
		flex: 1 1 0;
		text-indent: 0;
		left: -10px;
		text-align: center;
	}
}
@media not all and (max-width: 550px) {
	.profile-header-content {
		padding: 14vh 10px 92px 10px;
	}

	#links-and-stats {
		transform: translateY(-100%);
		padding-top: 20px;
		padding-bottom: 16px;
		background: transparent;
		z-index: 2;
	}

	#profile-image {
		color: #0000;
		width: 124px;
		height: 124px;
		border: 0;
		border-radius: 50%;
		background: #0c0d0f;
		box-shadow: 0 1vmax 1vmax 0vmax rgba(0, 0, 0, 0.4);
		transform: translateX(-50%) translateY(50%) rotate(-2deg);
	}

	#profile-header::after {
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: 150px;
		height: 75px;
		background-color: #0c0d0f;
		border-radius: 75px 75px 0 0;
		transform-origin: 50% 100%;
		display: block;
	}

	#followers-count,
	#following-count {
		font-family: 'Telefon', sans-serif;
		font-size: 180%;
		font-weight: 400;
	}

	h1#profile-name-header > span {
		font-size: 3.4rem;
	}

	@supports (-moz-appearance: none) {
		h1#profile-name-header > span {
			font-family: 'Telefon', sans-serif;
			font-weight: 600;
		}
	}
	#profile-bio,
	.profile-bio {
		position: relative;
		background-image: linear-gradient(#009fda 0 0);
		background-size: 0% 40%;
		background-repeat: no-repeat;
		background-position: right bottom;
		display: inline;
		transition: background-size ease 1s;
	}

	#profile-bio:hover,
	.profile-bio:hover {
		background-size: 100% 40%;
		background-position: left bottom;
	}

	#profile-bio::after,
	.profile-bio::after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 300%;
		display: inline-block;
		background: transparent;
	}

	.pen-as-header-question {
		padding-bottom: 37px;
		right: 1em;
		font-weight: bold;
	}

	.pen-as-header-question > span {
		font-weight: 400;
	}

	#profile-follow span,
	.profile-links > a:not(.button)::after {
		transition: color ease 200ms;
	}

	[class^='Sidebar_link'] {
		padding: 0.48rem 1.375rem;
		font-weight: bold;
		font-size: 1.09rem;
	}

	[class^='SidebarCreate_createButton'] {
		font-weight: bold;
		font-size: 1.025rem;
		padding: 0.55rem 0.875rem;
	}

	[class^='SidebarCreatePen_penDropdownButton'] {
		top: 0.45rem;
	}
}
@media (min-width: 831px) {
	body[data-sidebar-collapsed='true'] {
		padding-left: 11.5px;
	}

	#profile-location-and-bio {
		margin: 0 21em;
	}

	[class^='SidebarToggle_openBar'],
	button[title='Toggle Navigation'] + div[data-collapsed] {
		height: 110%;
		box-shadow: 8px 0 10px 0 #000;
	}

	button[class^='SidebarToggle_toggle'][title='Toggle Navigation'] > div[class^='SidebarToggle_icon'] {
		background-color: #0ebeff;
	}
	button[class^='SidebarToggle_toggle'][title='Toggle Navigation'] > div[class^='SidebarToggle_icon'] > span {
		background-color: #000;
		color: #000;
	}
	button[class^='SidebarToggle_toggle'][title='Toggle Navigation'] > div[class^='SidebarToggle_icon'] > svg {
		fill: #000;
	}

	header.main-sidebar > div[class^='Sidebar_'],
	[class^='Sidebar_root-2'] {
		overflow-x: hidden;
	}
}
[class^='ItemPreviewImage-module'] {
	text-align: center;
	font-weight: bold;
}

.profile-grid-pens > article:first-of-type > div:nth-of-type(2) {
	box-shadow: 0 0 0 3px #0ebeff;
}

#tags-grid {
	margin-bottom: 27px;
}

.tag-grid > li > a::before {
	opacity: 0;
}

.tag-grid > li > a {
	border-radius: 6px;
	padding: 15px;
	padding-right: 42px;
}

.tag-grid > li {
	padding: 0 5px;
	margin: 5px 0;
}

.tag-grid > li > a[href*='css'] {
	background-color: #0267af;
	box-shadow: inset 14px 11px 19px 0 rgba(255, 255, 255, 0.2);
}

.tag-grid > li > a[href*='scss'] {
	background-color: #b53372;
}

.tag-grid > li > a[href*='html'] {
	background-color: #db3c15;
	box-shadow: inset -14px -11px 19px 0 rgba(0, 0, 0, 0.2);
}

.tag-grid > li > a[href*='pug'] {
	background-color: #53312a;
	color: #e8c69e;
}

.tag-grid > li > a[href*='js'],
.tag-grid > li > a[href*='javascript'] {
	background-color: #fbb925;
}

.tag-grid > li > a[href*='ts'],
.tag-grid > li > a[href*='typescript'] {
	background-color: #2f74c0;
}

.tag-grid > li > a[href*='cpc-'],
.tag-grid > li > a[href*='codepenchallenge'] {
	background-color: #fff;
}

.tag-grid > li > a[href*='js'],
.tag-grid > li > a[href*='javascript'],
.tag-grid > li > a[href*='cpc-'],
.tag-grid > li > a[href*='codepenchallenge'] {
	color: #000;
}

.tag-grid > li > a:hover {
	background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
}

.tag-grid > li > a > span {
	right: 0px;
	top: 50%;
	background: rgba(0, 0, 0, 0.3);
	color: inherit;
	padding: 0;
	border-radius: 50% 0 0 50%;
	font-size: 80%;
	transform: translateY(-50%);
	width: 29px;
	height: 24px;
	display: grid;
	align-items: center;
	box-shadow:
		inset 0 1px 0 0 rgba(0, 0, 0, 0.4),
		inset 0 -1px 0 0 rgba(255, 255, 255, 0.08);
}

.follow-user-button[data-size='mini'] {
	font-size: 0.85rem;
	font-weight: bold !important;
	padding: 7px 11px;
	border-radius: 3px;
	z-index: 10;
}

.follow-user-button[data-size='mini'][data-following='false'] {
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	background-color: #0ebeff !important;
	transition: box-shadow ease-out 200ms;
	color: #000 !important;
}
.follow-user-button[data-size='mini'][data-following='false']:hover {
	box-shadow: 0 0 3.2em 8px #0ebeff;
}

span[data-test-id='action-menu'][title='Actions'] > button[data-size='mini'] {
	padding: 8px 7px;
	border-radius: 3px;
}

[class^='Sidebar_link'] {
	position: relative;
}

a[class^='Sidebar_link'][aria-haspopup='true'] > span[class^='Sidebar_unseen'] {
	color: #000;
	background-color: #0ebeff;
	padding: 0.1em 0.7em;
	border-radius: 3px;
	box-shadow: 0 0 2.1rem 2px #0ebeff;
	font-family: 'Lato';
	font-size: 0.83rem;
	font-weight: bold;
	position: absolute;
	margin: 0;
	left: 12.4ch;
	top: 1.1ch;
}
a[class^='Sidebar_link'][aria-haspopup='true'] > span[class^='Sidebar_unseen']::after {
	content: ' NEW';
}

@media (max-width: 550px) {
	a[class^='Sidebar_link'][aria-haspopup='true'] > span[class^='Sidebar_unseen'] {
		font-size: 0.96rem;
		left: 11.2ch;
		top: 1.3ch;
	}
}
#profile-links > a:not(.button) {
	position: relative;
	font-size: 0;
}

#profile-links > a:not(.button),
#profile-links > a:not(.button):hover {
	color: transparent;
}

#profile-links > a:not(.button)::after {
	position: relative;
	font-size: 1rem;
	display: block;
	font-weight: bold;
	text-align: center;
	color: #9b9dad;
}

#profile-links > a:not(.button):hover:after {
	color: #fff;
}

#profile-links > a:nth-child(1)::after {
	content: 'YouTube';
}

#profile-links > a:nth-child(2)::after {
	content: 'Instagram';
}

#profile-links > a:nth-child(3)::after {
	content: 'GitHub';
}

@media not all and (max-width: 550px) {
	#profile-links > a:not(.button) {
		overflow: visible;
		margin-left: 1.1rem;
	}

	#profile-links > a:not(.button)::after {
		font-size: 1.12rem;
		top: 17%;
	}
}
nav[class^='Pagination-module_pagination'],
nav[aria-label='Pagination'] {
	margin-bottom: 0 !important;
	margin-top: 0 !important;
	position: relative;
	z-index: 10;
}

nav.center > .button-outline,
nav[class^='Pagination-module'] > button,
nav[aria-label='Pagination'] > button {
	color: #0ebeff;
	background-color: transparent;
	border-color: currentColor;
	font-family: 'Telefon', sans-serif;
	font-size: 1.3rem;
	margin-top: 40px;
	letter-spacing: 1px;
	word-spacing: 5px;
	box-shadow:
		inset 0 0 0.4em 0 currentColor,
		0 0 0.4em 0 currentColor;
	text-shadow: 0 0 0.3em currentColor;
	transition: all ease 200ms;
}
nav.center > .button-outline > svg,
nav[class^='Pagination-module'] > button > svg,
nav[aria-label='Pagination'] > button > svg {
	filter: drop-shadow(0 0 3px currentColor);
}

nav.center > .button-outline:hover,
nav[class^='Pagination-module'] > button:hover,
nav[aria-label='Pagination'] > button:hover {
	color: rgba(0, 0, 0, 0.859) !important;
	text-shadow: 0 0 0 rgba(0, 0, 0, 0);
	box-shadow:
		inset 0 0 0 0 #0ebeff,
		0 0 4em 0.3em #0ebeff;
	background-color: #0ebeff !important;
	border-color: #0ebeff;
}

div[data-component='PaginationContainer'],
nav.center {
	padding-bottom: 80px;
}

nav[class^='Pagination-module_pagination'] {
	padding-top: 40px;
}

.profile-grid-pens {
	padding-bottom: 0;
}

a {
	color: #0ebeff;
}

[class^='Sidebar_link'][href='/search/pens?q=']::before {
	content: '🔎';
	padding-right: 9px;
	font-family: 'Twemoji Mozilla';
	font-weight: 400;
}

[class^='Sidebar_link'][href='/following']::before {
	content: '💎';
	padding-right: 9px;
	font-family: 'Twemoji Mozilla';
	font-weight: 400;
}

[class^='Sidebar_link'][href='/trending']::before {
	content: '👏';
	padding-right: 9px;
	font-family: 'Twemoji Mozilla';
	font-weight: 400;
}

[class^='Sidebar_link'][href='/challenges']::before {
	content: '💪';
	padding-right: 9px;
	font-family: 'Twemoji Mozilla';
	font-weight: 400;
}

[class^='Sidebar_link'][href='/spark']::before {
	content: '✨';
	padding-right: 9px;
	font-family: 'Twemoji Mozilla';
	font-weight: 400;
}

[class^='Sidebar_link'][href='/following']::before {
	-webkit-animation: rainbow linear 1s infinite;
	animation: rainbow linear 1s infinite;
}

@-webkit-keyframes rainbow {
	from {
		filter: hue-rotate(0);
	}
	to {
		filter: hue-rotate(1turn);
	}
}

@keyframes rainbow {
	from {
		filter: hue-rotate(0);
	}
	to {
		filter: hue-rotate(1turn);
	}
}