@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,500;0,600;0,800;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace+SC&family=Roboto+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rampart+One&display=swap');

div.user-avatar-img {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 0.5em;
	width: 100%;
}

.user-avatar-img.lg {
	max-height: 20em;
	max-width: 20em;
}

.user-avatar-img.md {
	max-height: 12.5em;
	max-width: 12.5em;
}

.user-avatar-img.sm {
	max-height: 5em;
	max-width: 5em;
}

div.user-avatar-img .avatar-image {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
}

div.user-avatar-img .avatar-image img {
	height: 100%;
	width: 95%;
}

div.user-avatar-img .avatar-frame,
div.user-avatar-img .avatar-accessory {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

div.user-avatar-img .avatar-accessory-overlay {
	display: grid;
	position: relative;
	height: 100%;
	width: 97.5%;
	padding: 0.75em;
}

div.user-avatar-img .avatar-frame > img {
	max-width: 100%;
	border-radius: 10%;
}

.avatar-accessory-overlay > img.top { align-self: flex-start; }
.avatar-accessory-overlay > img.bottom { align-self: flex-end; }
.avatar-accessory-overlay > img.vert-middle { align-self: center; }
.avatar-accessory-overlay > img.left { justify-self: flex-start; }
.avatar-accessory-overlay > img.right { justify-self: flex-end; }
.avatar-accessory-overlay > img.hor-middle { justify-self: center; }
.avatar-accessory-overlay > img.small { width: 30% !important; }
.avatar-accessory-overlay > img.medium { width: 45% !important; }
.avatar-accessory-overlay > img.large { width: 60% !important; }

div.user-avatar-img .avatar-flag {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: absolute;
	top: 0.25em;
	left: 0.75em;
	height: 100%;
	max-width: 25%;
	z-index: 10;
}

div.user-avatar-img .avatar-flag > img {
	max-height: 25%;
	max-width: 100%;
	border-radius: 3px;
	object-fit: contain;
}

div.user-avatar-title {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	font-family: 'Raleway', sans-serif;
}

div.user-avatar-title > img {
	max-height: 60px;
	/* max-width: 85%; */
	max-width: 250px;
}

div.user-avatar-name  {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	max-height: 65px;
	max-width: 275px;
	padding: 0.25em;
	text-align: center;
}

div.user-avatar-name .name-backplate {
	/* position: absolute;
	top: 0;
	left: 0; */
	min-height: 45px;
	height: 100%;
	width: 100%;
}

div.user-avatar-name .name-backplate > img {
	/* height: 95%; */
	width: 97.5%;
}

div.user-avatar-name .name-text {
	position: absolute;
	font-size: 2.25em;
	z-index: 10;
}

div.user-avatar-name .name-text.default { font-family: 'Kanit'; }
div.user-avatar-name .name-text.monospace { font-family: 'Roboto Mono', monospace; font-size: 3em; }
div.user-avatar-name .name-text.cartoon { font-family: 'Rampart One', cursive; }
div.user-avatar-name .name-text.future { font-family: 'Bruno Ace SC', cursive; }
div.user-avatar-name .name-text.wide { font-family: 'Syncopate'; }
div.user-avatar-name .name-text.comical { font-family: cursive; }


@media screen and (max-width: 960px) {
	div.user-avatar-img .avatar-flag { top: 0.35em; left: 5%; }
	div.user-avatar-img .avatar-flag > img { max-height: 30% !important; border-radius: 0; }

	div.user-avatar-img .avatar-accessory-overlay { padding: 0.35em; }

	div.user-avatar-name { padding-bottom: 0.75em; }
	div.user-avatar-name .name-backplate { min-height: auto; }
	div.user-avatar-name .name-text { font-size: 1.2em; }
	div.user-avatar-name .name-text.monospace { font-size: 1.5em; }
	div.user-avatar-title > img { max-width: 85%; max-height: 35px; }
}