.profile {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: #fdfbfe;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23000000' fill-opacity='0.07'%3E%3Cpath fill-rule='evenodd' d='M11 0l5 20H6l5-20zm42 31a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM0 72h40v4H0v-4zm0-8h31v4H0v-4zm20-16h20v4H20v-4zM0 56h40v4H0v-4zm63-25a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM53 41a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-30 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-28-8a5 5 0 0 0-10 0h10zm10 0a5 5 0 0 1-10 0h10zM56 5a5 5 0 0 0-10 0h10zm10 0a5 5 0 0 1-10 0h10zm-3 46a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM21 0l5 20H16l5-20zm43 64v-4h-4v4h-4v4h4v4h4v-4h4v-4h-4zM36 13h4v4h-4v-4zm4 4h4v4h-4v-4zm-4 4h4v4h-4v-4zm8-8h4v4h-4v-4z'/%3E%3C/g%3E%3C/svg%3E");
}
.profile-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    margin-bottom: 20px;
    gap: 10px;
    margin-top: 30px;
    z-index: 999;
    position: relative;
}

.user-avatar img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    outline: 2px solid white;
}

.user-banner {
	position: absolute;
    top: 0;
    left: 0;
    background: #386af7;
    height: 150px;
    width: 100%;
}

.page-container {
    height: 100%;
    display: flex;
    justify-content: center;
    width: 100%;
}

.user-card {
    background: white;
    height: 100%;
    min-width: 50%;
    border-left: 1px solid #0000001f;
    border-right: 1px solid #0000001f;
    position: relative;
	max-width: 80%;
}

.user-name {
    font-size: 35px;
    color: #0c0c0c;
    transition: .4s;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 5px;
    margin-top: 5px;
}

.badges {
    display: flex;
    font-size: 25px;
    align-items: center;
}

.badges i {
    color: #386af7;
    margin-top: 5px;
}

.user-badge {
    width: 20px;
}

.user-tag {
    margin-top: -5px;
    color: #0c0c0c;
    opacity: 50%;
    font-size: 15px;
    display: flex;
    font-weight: 600;
}

.user-desc {
	text-align: left;
    font-weight: 500;
}

img.brand-color {
	margin: 4px;
	margin-top: 0;
	filter: invert(56%) sepia(89%) saturate(6432%) hue-rotate(218deg) brightness(102%) contrast(94%);
}

.profile-links {
    display: flex;
	flex-direction: column;
    flex-wrap: wrap;
}

.social {
	background: #386af7;
	color: white;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	border-radius: 50%;
}

.social-btn {
    display: flex;
    align-items: center;
    flex-direction: row;
    color: black;
    transition: .4s;
    padding: 10px;
    display: flex;
    border-radius: 10px;
    width: 100%;
    border: 1px solid #0000001f;
}

.social-linkname {
    margin-left: 14px;
    display: flex;
    align-items: center;
    gap: 3px;
}

.social-linkname .icon-hovered {
	color: white;
}

.user-banner .btn {
    position: absolute;
    z-index: 9999;
    top: 0;
    right: 0;
    margin: 20px;
    background: #ffffff2e;
    border-radius: 10px!important;
    border: 1px solid #ffffff1f;
}

.social-linkname i {
    color: #385cff;
}

.brand-color-default {
	margin: 4px;
	filter: invert(1);
}

.social-btn:hover {
    background: #386af738;
    color: #386af7;
    border: 1px solid #386af757;
}

.adaptive-dflex-row {
	display: flex;
}

.invasion-container {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-top: -20px;
	z-index: 1;
	flex-direction: column;
	gap: 5px;
}

.sm-btn-icon {
	width: 18px;
	margin: -2px 2px;
	vertical-align: sub;
}

.user-flag {
	width: 25px;
	border-radius: 4px;
}

.social-verify {
	width: 12px;
}

@media screen and (max-width: 991px) {
	.profile {
		height: auto;
    	padding: 0px;
	}
	.user-card {
		max-width: 100%;
		border: none;
	}
}