@font-face {
	font-family: "ProximaSoft";
	src: url("./assets/fonts/proxima_soft_bold.otf") format("opentype");
	font-display: swap;
}

* {
	font-family: "ProximaSoft", sans-serif;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

body {
	min-height: 100vh;
	padding: 0;
	background-image: linear-gradient(180deg, rgba(15, 15, 15, 0.6), #0f0f0f),
		url("./assets/images/background.jpg") !important;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	cursor: url("https://sweezy-cursors.com/wp-content/uploads/cursor/sanrio-cinnamoroll-strawberry/sanrio-cinnamoroll-strawberry-cursor-32x32.png"),
		default !important;
}

h2,
h3,
p,
span {
	color: #fff !important;
}

.headerProfile {
	margin-top: 50px;
	flex-direction: column;
	align-items: center;
	display: flex;
}

.container-avatar {
	margin-bottom: 15px;
	height: 170px;
	width: 170px;
}
.container-avatar .border-avatar {
	border: 4px solid #ffb800;
	border-radius: 50%;
	overflow: hidden;
	padding: 4px;
	height: 100%;
	width: 100%;
}
.container-avatar .border-avatar img {
	border-radius: 50%;
	object-fit: cover;
	height: 100%;
	width: 100%;
	animation: fadeIn ease 0.4s;
}

.badge {
	cursor: url("https://sweezy-cursors.com/wp-content/uploads/cursor/sanrio-cinnamoroll-strawberry/sanrio-cinnamoroll-strawberry-pointer-32x32.png"),
		pointer !important;
	height: auto;
	width: 35px;
}
.badge img {
	object-fit: cover;
	height: 100%;
	width: 100%;
}

.subtitle {
	font-size: small;
	max-width: 350px;
}

.infomation {
	grid-template-columns: repeat(4, 1fr);
}
.infomation .forMe {
	color: #ffb800 !important;
	font-size: 23px;
	margin: 0;
}
.infomation .des-forMe {
	font-size: 15px;
	animation: fadeIn ease 0.8s;
}

.content {
	height: auto !important;
}
.content .wow {
	animation: fadeIn ease 1.2s;
}
.content .split {
	justify-content: center;
	align-items: center;
	white-space: nowrap;
	display: flex;
	padding: 0;
	margin: 0;
}
.content .split .line {
	background-color: rgba(255, 255, 255, 0.4);
	border-radius: 500px;
	margin-inline: 15px;
	height: 2px;
	width: 100%;
}

.cards-container {
	grid-template-columns: repeat(auto-fill, 360px);
	animation: fadeIn ease 1.6s;
}
.cards-container .card {
	cursor: url("https://sweezy-cursors.com/wp-content/uploads/cursor/sanrio-cinnamoroll-strawberry/sanrio-cinnamoroll-strawberry-pointer-32x32.png"),
		pointer !important;
	transition: all 0.2s ease-out;
	height: 180px !important;
	width: 360px !important;
	box-sizing: border-box;
	outline-offset: 5px;
	position: relative;
	border-radius: 8px;
	overflow: hidden;
}
.cards-container .card:hover {
	outline: rgba(255, 255, 255, 0.5) solid 3px;
	animation: glow 1s ease-out;
}
.cards-container .card img {
	object-fit: cover;
	height: 100%;
	width: 100%;
}
.cards-container .card .card-content {
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0),
		rgba(0, 0, 0, 0.5),
		rgba(0, 0, 0, 0.8)
	);
	justify-content: space-between;
	align-items: center;
	position: absolute;
	padding: 010px;
	display: flex;
	width: 100%;
	bottom: 0;
	left: 0;
}
.cards-container .card .card-content .card-title {
	text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.6);
	font-size: 20px;
}
.cards-container .card .card-content .card-subtitle {
	text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.6);
	color: rgba(255, 255, 255, 0.6) !important;
	font-size: 14px;
}

.popup-container {
	background: rgba(0, 0, 0, 0.6);
	justify-content: center;
	align-items: center;
	position: fixed;
	display: none;
	z-index: 999;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}

.popupNoti,
.popupBadge {
	background: rgba(255, 255, 255, 0);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	animation: scaleIn ease 1s;
	justify-content: center;
	align-items: center;
	position: fixed;
	width: 360px;
}
.popupNoti .logo,
.popupBadge .logo {
	width: 35px;
}
.popupNoti .logo img,
.popupBadge .logo img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.popupNoti .description,
.popupBadge .description {
	color: #d1d1d1 !important;
}
.popupNoti .split,
.popupBadge .split {
	background-color: rgba(255, 255, 255, 0.1);
	display: flex;
	height: 1px;
	width: 100%;
}
.popupNoti .button,
.popupBadge .button {
	cursor: url("https://sweezy-cursors.com/wp-content/uploads/cursor/sanrio-cinnamoroll-strawberry/sanrio-cinnamoroll-strawberry-pointer-32x32.png"),
		pointer !important;
	font-size: 15px;
	padding: 12px 0;
	margin: 0;
}
.popupNoti .button:hover,
.popupBadge .button:hover {
	background: #ffffff2a;
}

.border-avatar img,
.card,
.logo,
.button {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

@keyframes glow {
	0% {
		box-shadow: 0px 0px 0px rgba(225, 184, 0, 0);
	}
	10% {
		box-shadow: 0px 0px 100px rgba(225, 184, 0, 0.5);
		filter: brightness(1.2);
		transform: scale(1.02);
	}
	50% {
		box-shadow: 0px 0px 50px rgba(225, 184, 0, 0.2);
		filter: brightness(1);
		transform: scale(1);
	}
}

@keyframes fadeIn {
	0% {
		filter: blur(10px);
		opacity: 0;
	}
	100% {
		filter: blur(0);
		opacity: 1;
	}
}

@keyframes scaleIn {
	0% {
		opacity: 0;
		transform: scale(1.05);
	}
	100% {
		opacity: 1;
	}
}