.btn-blurple, .bg-blurple{
	background-color: var(--btn) !important;
	color: var(--white) !important;
}

.btn-outline-blurple{
	border: 2px solid var(--btn) !important;
	color: var(--btn) !important;
}

.btn-purple, .bg-purple{
	background-color: var(--purple) !important;
	color: var(--white) !important;
}

.btn-blue, .bg-blue{
	background-color: var(--blue) !important;
	color: var(--white) !important;
}

.btn-navbar, .bg-navbar{
	background-color: var(--navbar) !important;
	color: var(--white) !important;
}

.btn-elements, .bg-elements{
	background-color: var(--elements) !important;
	color: var(--white) !important;
}

.text-light-blue{
	color: var(--light-blue) !important;
}

.text-blurple{
	color: var(--blurple) !important;
}

.note-blurple{
	color: #ccc !important;
	background-color: var(--navbar);
	border-color: var(--blurple);
}

.cursor-pointer{
	cursor: pointer;
}

.bg-transparent{
	background-color: transparent !important;
}

.checkbox-lg{
	transform: scale(1.1,1.1);
}

.w-maxcontent{
	width: max-content !important;
}

/* responsive stats div */

.stats{
	border-radius: 30px;
	background-color: #282c30;
	width: max-content;
	padding: 10px 35px;
	border-right: 2px solid #ccc;
	border-left: 2px solid #ccc;
	font-size: 25px;
}

.responsive-align-text{
	text-align: center!important;
}

.responsive-align-text .stats{
	margin-left: auto;
	margin-right: auto;
}

.statusActivityBoxMaxWidth{
	max-width: 100%;
}

@media screen and (max-width: 800px){
	.responsive-align-text{
		text-align: left!important;
	}
	.responsive-align-text .stats{
		margin-left: 1%;
	}
	.statusActivityBoxMaxWidth{
		max-width: 169px;
	}
}

.responsive-display-text{
	display: block;
}

@media screen and (max-width: 800px){
	.responsive-display-text{
		display: inline-block;
		vertical-align: middle;
	}
	.responsive-display-stats{
		float: right;
	}
}

.banner{
	width: 100%;
	height: 90px;
	background-size: cover;
	background-position: 50% 50%;
}

.profile.banner{
	height: 200px;
}

.noimage{
	color: white;
	display: flex;
	justify-content: center;
	-webkit-box-pack: center;
	width: 30px;
	height: 30px;
	font-weight: bold;
	border-radius: 25px;
	border: 1px solid white;
	-webkit-box-align: center;
	align-items: center;
	user-select: none;
	flex-shrink: 0;
	text-align: center;
	vertical-align: middle;
}

.invisible-input{
	background-color: transparent;
	border: none;
	outline: none;
	color: #fff;
	font-size: 10px;
	width: 25px;
	text-align: center;
}

.invisible-input:focus{
	border-bottom: 2px solid #fff;
}

.shadow {
	background: linear-gradient(180deg, var(--blurple) 17.71%, var(--elements) 100%);
	transform: rotate(135.31deg);
	z-index: -5;
	filter: blur(120px);
	width: 322px;
	height: 322px;
	position: absolute;
}

.scrollbtn{
	display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	cursor: pointer;
}

.social-media-link{
	color: #fff;
	text-align: center;
	width: 100%;
	padding: 4px 10px;
    background-color: var(--primary-color);
	border-radius: 6px;
	border: 2px solid transparent;
	font-size: 30px;
    transition: var(--tran-03);
}

.social-media-link:hover{
	border-color: var(--primary);
}

.searchable.disabled{
	pointer-events: none;
	opacity: 0.5;
}

div.stars {
	display: inline-block;
}

input.star {
	display: none
}

label.star {
	float: right;
	padding: 10px;
	font-size: 26px;
	color: #ffffff;
	transition: all .2s
}

input.star:checked~label.star:before {
	content: '\f005';
	color: #FD4;
	transition: all .25s
}

input.star-5:checked~label.star:before {
	color: #FE7;
	text-shadow: 0 0 20px #952
}

input.star-1:checked~label.star:before {
	color: #F62
}

label.star:hover {
	transform: rotate(-15deg) scale(1.3)
}

label.star:before {
	content: '\f006';
	font-family: FontAwesome;
}

/* Twitch Iframe Resizer */

.resizer {
	display: flex;
	margin: 0;
	padding: 0;
	resize: vertical;
	overflow: hidden;
	min-height: 630px;
}

.resizer > .resized {
	flex-grow: 1;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Projects Card Image */

.project_image{
	max-width:100%;
	object-fit: cover;
	height: 400px;
}