[CSS - Modern] 🍰 Clarity by V.L

/* ===================================
Combine Premier and Studio Sections */

.data.season {
	width: 120px;
	height: 32px;
	margin-top: 8px;
	
	-webkit-align-self: flex-start;
	-moz-align-self: flex-start;
	align-self: flex-start;
}
.data.studio {
	margin-top: 45px !important;
	margin-left: -120px;
	
	-webkit-order: 20;
	-moz-order: 20;
	order: 20;
}

.data.studio:empty:before, .data.licensor:empty:before {
	content: "Unknown Studio";
	
	display: block;
	padding: 1px;
	
	color: #777;
	font-size: 10px;
	line-height: 15px;
	white-space: pre;
}

/* "Clarity" Modification by Valerio Lyndon / Hover Image / Revision 0.2 */
.data.image{overflow:visible}.data.image a:before{content:"";position:absolute;top:50%;left:-166px;width:150px;height:0;margin-top:0;background-repeat:no-repeat;background-position:center;background-size:cover;border-radius:8px;box-shadow:0 0 2px #000;opacity:0;pointer-events:none;-webkit-transition:all .3s ease;transition:all .3s ease;z-index:50}.data.image a:after,.data.image img{border-radius:50%}.data.image a:hover:before{height:200px;margin-top:-100px;opacity:1}.data.image img{height:64px!important;margin:0;overflow:hidden;object-fit:cover;transform:none}

/* Tag Descriptions - Base */

.data.tags span a { position: relative; }
.data.tags span a:not([href*="\=Favo"]):after, .data.tags span a:not([href*="\=Favo"]):before {
	position: absolute;
	
	display: block;
	
	-webkit-transition: all 0.15s ease;
	transition: all 0.15s ease;
	pointer-events: none;
	opacity: 0;
	z-index: 1;
}
.data.tags span a:not([href*="\=Favo"]):after {
	top: 27px;
	left: calc(50% - 345px);
	
	width: auto;
	max-width: 340px;
	height: auto;
	padding: 4px 8px;
	background: #191919;
	border: 1px solid #777;
	border-radius: 4px;
	
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
	color: #ababab;
	font: 11px/15px Arial, Verdana;
	text-align: left;
	white-space: pre-wrap;
	
	transform: translateX(-50%) translateX(340px);
}
.data.tags span a:not([href*="\=Favo"]):before {
	content: "";
	top: 17px;
	left: 50%;
	
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent #777 transparent;
	margin-left: -10px;
}
.data.tags span a:hover:after {
	left: calc(50% - 340px);
	
	opacity: 1;
}
.data.tags span a:not([href*="\=Favo"]):hover:before {
	margin-left: -5px;
	
	opacity: 1;
}

.data.tags span:not([href*="\=Favo"]) a:after { transform: translateX(-17%) translateX(340px); }
.data.tags span:not([href*="\=Favo"]):nth-child(n+3) a:after { transform: translateX(-33%) translateX(340px); }
.data.tags span:not([href*="\=Favo"]):nth-child(n+5) a:after { transform: translateX(-50%) translateX(340px); }
.data.tags span:not([href*="\=Favo"]):nth-child(n+7) a:after { transform: translateX(-67%) translateX(340px); }
.data.tags span:not([href*="\=Favo"]):nth-child(n+9) a:after { transform: translateX(-83%) translateX(340px); }

/* Tag Descriptions - Base */

.data.tags span a { position: relative; }
.data.tags span a:not([href*="\=Favo"]):after, .data.tags span a:not([href*="\=Favo"]):before {
	position: absolute;
	
	display: block;
	
	-webkit-transition: all 0.15s ease;
	transition: all 0.15s ease;
	pointer-events: none;
	opacity: 0;
	z-index: 1;
}
.data.tags span a:not([href*="\=Favo"]):after {
	top: 27px;
	left: calc(50% - 255px);
	
	width: auto;
	max-width: 250px;
	height: auto;
	padding: 4px 8px;
	background: #191919;
	border: 1px solid #777;
	border-radius: 4px;
	
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
	color: #ababab;
	font: 11px/15px Arial, Verdana;
	text-align: left;
	white-space: pre-wrap;
	
	transform: translateX(-50%) translateX(250px);
}
.data.tags span a:not([href*="\=Favo"]):before {
	content: "";
	top: 17px;
	left: 50%;
	
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent #777 transparent;
	margin-left: -10px;
}
.data.tags span a:hover:after {
	left: calc(50% - 250px);
	
	opacity: 1;
}
.data.tags span a:not([href*="\=Favo"]):hover:before {
	margin-left: -5px;
	
	opacity: 1;
}

.data.tags span:not([href*="\=Favo"]) a:after { transform: translateX(-17%) translateX(250px); }
.data.tags span:not([href*="\=Favo"]):nth-child(n+3) a:after { transform: translateX(-33%) translateX(250px); }
.data.tags span:not([href*="\=Favo"]):nth-child(n+5) a:after { transform: translateX(-50%) translateX(250px); }
.data.tags span:not([href*="\=Favo"]):nth-child(n+7) a:after { transform: translateX(-67%) translateX(250px); }
.data.tags span:not([href*="\=Favo"]):nth-child(n+9) a:after { transform: translateX(-83%) translateX(250px); }

@\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Theme%20-%20Compressed.css";
@\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Mod%20-%20Dark%20Mode%20Compressed.css";
.status-menu:after {
background-image: url(https://myanimelist.cdn-dena.com/images/userimages/7585872.jpg);
}
#cover-image-container:after {
content: "Alfie\a Marshall";
}